@sumaris-net/ngx-components 18.25.4 → 18.25.6

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, inject, NgModule, forwardRef, booleanAttribute, ViewChildren, Input, ChangeDetectionStrategy, Component, HostListener, HostBinding, ElementRef, numberAttribute, ViewChild, ANIMATION_MODULE_TYPE, RendererStyleFlags2, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Self, ViewEncapsulation, Injector, APP_INITIALIZER, DestroyRef, input, output, Renderer2, effect, signal, SecurityContext, EnvironmentInjector, runInInjectionContext, viewChildren, viewChild, model, computed, untracked } from '@angular/core';
+import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, inject, NgModule, forwardRef, booleanAttribute, ViewChildren, Input, ChangeDetectionStrategy, Component, HostListener, HostBinding, ElementRef, numberAttribute, ViewChild, ANIMATION_MODULE_TYPE, RendererStyleFlags2, TemplateRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Self, ViewEncapsulation, Injector, APP_INITIALIZER, DestroyRef, input, output, Renderer2, effect, signal, SecurityContext, EnvironmentInjector, runInInjectionContext, viewChildren, viewChild, model, computed, untracked } from '@angular/core';
 import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$9, Observable, forkJoin, timeout, defer, combineLatest, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, mergeMap as mergeMap$1, switchMap as switchMap$1, EMPTY, interval } from 'rxjs';
 import { catchError, map, filter, takeUntil, first, switchMap, tap as tap$1, throttleTime, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import * as cloneImported from 'clone';
@@ -9265,6 +9265,29 @@ class MatAutocompleteFieldUtils {
     }
 }
 
+class MaterialAutocompleteHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialAutocompleteHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MaterialAutocompleteHeaderDirective, selector: "ng-template[panelHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialAutocompleteHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[panelHeader]',
+                    standalone: false
+                }]
+        }] });
+class MaterialAutocompleteFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialAutocompleteFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MaterialAutocompleteFooterDirective, selector: "ng-template[panelFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialAutocompleteFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[panelFooter]',
+                    standalone: false
+                }]
+        }] });
+
 const noop$6 = () => { };
 const DEFAULT_VALUE_ACCESSOR$4 = {
     provide: NG_VALUE_ACCESSOR,
@@ -9317,8 +9340,8 @@ class MatAutocompleteField {
     required = false;
     hideRequiredMarker = false;
     mobile;
-    showListHeader = true;
-    showListFooter = true;
+    showPanelHeader = true;
+    showPanelFooter = true;
     clearable = false;
     debounceTime = null;
     displaySeparator;
@@ -9391,8 +9414,8 @@ class MatAutocompleteField {
     matInputText;
     autocomplete;
     autocompleteTrigger;
-    listHeaderTemplate;
-    listFooterTemplate;
+    panelHeaderTemplate;
+    panelFooterTemplate;
     showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
     constructor(injector, el, cd, modalController, renderer, formGroupDir) {
         this.injector = injector;
@@ -10231,6 +10254,8 @@ class MatAutocompleteField {
         let searchBarSubscription;
         this._subscription.add(this.matSelect.openedChange.subscribe(async (open) => {
             if (open) {
+                // Wait panel to be created
+                await waitFor(() => !!this.matSelect.panel, { stop: this._destroy$ });
                 const panelElement = this.matSelect.panel.nativeElement;
                 const overlayPane = findParentWithClass(panelElement, 'cdk-overlay-pane');
                 // Fix panel position, when overlay has an transformX (added when keyboard is shown)
@@ -10388,11 +10413,11 @@ class MatAutocompleteField {
         this.toggleFavorite.emit({ source: this.matSelect || this.autocomplete, value: value });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatAutocompleteField, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.ModalController }, { token: i0.Renderer2 }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", label: "label", appearance: "appearance", subscriptSizing: "subscriptSizing", placeholder: "placeholder", suggestFn: "suggestFn", required: ["required", "required", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], showListHeader: ["showListHeader", "showListHeader", booleanAttribute], showListFooter: ["showListFooter", "showListFooter", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], debounceTime: ["debounceTime", "debounceTime", numberAttribute], displaySeparator: "displaySeparator", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: ["highlightAccent", "highlightAccent", booleanAttribute], showAllOnFocus: ["showAllOnFocus", "showAllOnFocus", booleanAttribute], showPanelOnFocus: ["showPanelOnFocus", "showPanelOnFocus", booleanAttribute], reloadItemsOnFocus: ["reloadItemsOnFocus", "reloadItemsOnFocus", booleanAttribute], clearInvalidValueOnBlur: ["clearInvalidValueOnBlur", "clearInvalidValueOnBlur", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", panelClass: "panelClass", panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], matAutocompletePosition: "matAutocompletePosition", multiple: ["multiple", "multiple", booleanAttribute], fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: ["suggestLengthThreshold", "suggestLengthThreshold", numberAttribute], showLoadingSpinner: ["showLoadingSpinner", "showLoadingSpinner", booleanAttribute], debug: ["debug", "debug", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], stickySearchBar: ["stickySearchBar", "stickySearchBar", booleanAttribute], applyImplicitValue: "applyImplicitValue", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", trimSearchText: ["trimSearchText", "trimSearchText", booleanAttribute], splitSearchText: ["splitSearchText", "splitSearchText", booleanAttribute], selectInputContentOnFocus: ["selectInputContentOnFocus", "selectInputContentOnFocus", booleanAttribute], selectInputContentOnFocusDelay: ["selectInputContentOnFocusDelay", "selectInputContentOnFocusDelay", numberAttribute], previewImplicitValue: ["previewImplicitValue", "previewImplicitValue", booleanAttribute], showFavorites: "showFavorites", toggleFavoriteTitle: "toggleFavoriteTitle", favoriteItems: "favoriteItems", colSizes: "colSizes", classList: ["class", "classList"], filter: "filter", readonly: ["readonly", "readonly", booleanAttribute], tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keydownBackspace: "keydown.backspace", keyupEnter: "keyup.enter", arrowUp: "arrowUp", arrowDown: "arrowDown", enter: "enter", selectionChange: "selectionChange", openedChange: "openedChange", toggleFavorite: "toggleFavorite" }, providers: [DEFAULT_VALUE_ACCESSOR$4], queries: [{ propertyName: "listHeaderTemplate", first: true, predicate: ["listHeaderTemplate"], descendants: true }, { propertyName: "listFooterTemplate", first: true, predicate: ["listFooterTemplate"], descendants: true }], 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 field-container\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <!-- readonly -->\n      @if (_readonly) {\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          class=\"mat-form-field-disabled\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n          <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n          <ion-text>{{ value | toString: displayWith }}</ion-text>\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          <!-- hints -->\n          @if (!formControl.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      } @else {\n        @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          [hideRequiredMarker]=\"hideRequiredMarker\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if ((label || placeholder) && floatLabel !== 'never') {\n            <mat-label>{{ label || placeholder }}</mat-label>\n          }\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          @if (mobile || multiple) {\n            <mat-select\n              #matSelect\n              hideSingleSelectionIndicator\n              disableOptionCentering\n              [disableRipple]=\"disableRipple\"\n              [formControl]=\"formControl\"\n              [tabindex]=\"_tabindex\"\n              [panelClass]=\"panelClass\"\n              [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n              (focus)=\"filterMatSelectFocusEvent($event)\"\n              (blur)=\"filterMatSelectBlurEvent($event)\"\n              (keydown.escape)=\"emitEscape($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              (openedChange)=\"openedChange.emit($event)\"\n              [compareWith]=\"equals\"\n              [multiple]=\"multiple\"\n              [typeaheadDebounceInterval]=\"debounceTime * 10\"\n              [required]=\"required\"\n              [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n            >\n              <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n              <!-- Search bar -->\n              @if (showSearchBar) {\n                <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n                  <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n                  <ion-searchbar\n                    #ionSearchbar\n                    inputmode=\"search\"\n                    autocomplete=\"off\"\n                    animated=\"false\"\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                [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n              >\n                <!-- favorite spacer -->\n                @if (hasFavorites) {\n                  <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                }\n                <!-- attribute headers -->\n                @for (attr of displayAttributes; track attr; let i = $index) {\n                  <ion-col [size]=\"displayColumnSizes[i]\">\n                    <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  </ion-col>\n                }\n              </ion-row>\n\n              <!-- None option -->\n              @if (!required && !multiple && !clearable) {\n                <mat-option 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              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n                    <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col size=\"auto\" class=\"favorite-col\">\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n\n                        <!-- attribute columns -->\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n                            <ion-label\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\n                            ></ion-label>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- need more character -->\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              } @else {\n                <!-- loading spinner -->\n                <mat-option class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n              <!-- footer -->\n              @if (showListFooter && itemCount; as count) {\n                <mat-option class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\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            </mat-select>\n          } @else {\n            <!-- desktop (use mat-autocomplete) -->\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"(label || 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)=\"emitEscape($event)\"\n              (keydown.backspace)=\"onBackspace($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (keyup.arrowUp)=\"emitArrowUp($event)\"\n              (keyup.arrowDown)=\"emitArrowDown($event)\"\n            />\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              [autoActiveFirstOption]=\"true\"\n              [hideSingleSelectionIndicator]=\"true\"\n              [displayWith]=\"displayWith\"\n              [class]=\"panelClass\"\n              [panelWidth]=\"panelWidth\"\n              [disableRipple]=\"disableRipple\"\n              (optionSelected)=\"onOptionSelected($event)\"\n              (opened)=\"openedChange.emit(true)\"\n              (closed)=\"openedChange.emit(false)\"\n            >\n              <!-- Custom header list -->\n              <ng-container\n                [ngTemplateOutlet]=\"listHeaderTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n              <!-- Headers -->\n              @if (showListHeader) {\n                <ion-row\n                  class=\"mat-autocomplete-header column ion-no-padding\"\n                  [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n                >\n                  <!-- favorite spacer -->\n                  @if (hasFavorites) {\n                    <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                  }\n                  @for (attr of displayAttributes; track attr; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\">\n                      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                    </ion-col>\n                  }\n                </ion-row>\n              }\n\n              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n                    <mat-option\n                      [value]=\"item\"\n                      class=\"ion-no-padding\"\n                      [class.mdc-list-item--selected]=\"item === _selectedItem\"\n                      [class.mdc-list-item--favorite]=\"isFavorite\"\n                    >\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col\n                            matPrefix\n                            size=\"auto\"\n                            class=\"favorite-col\"\n                            (click)=\"toggleFavoriteClick($event, item)\"\n                          >\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            } @else if (toggleFavorite.observed) {\n                              <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col\n                            [size]=\"displayColumnSizes[j]\"\n                            [title]=\"!showTooltip ? text.innerText : ''\"\n                            [matTooltip]=\"showTooltip ? text.innerText : ''\"\n                            class=\"ion-align-self-center\"\n                          >\n                            <ion-text>\n                              <span\n                                #text\n                                [innerHTML]=\"\n                                  item\n                                    | propertyGet: path\n                                    | highlight\n                                      : {\n                                          search: matInputText.value,\n                                          withAccent: highlightAccent,\n                                        }\n                                \"\n                              ></span>\n                            </ion-text>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- Need more characters -->\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              } @else {\n                <!-- Loading spinner -->\n                <mat-option class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n\n              <!-- footer -->\n              @if (showListFooter && itemCount; as count) {\n                <ion-row 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              }\n              <!-- Custom footer list -->\n              <ng-container [ngTemplateOutlet]=\"listFooterTemplate\" [ngTemplateOutletContext]=\"{}\"></ng-container>\n            </mat-autocomplete>\n          }\n          <!--\n          NOTE :\n          - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          @if (formControl?.hasError('required')) {\n            <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n          }\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n          <!-- Hints -->\n          @if (!formControl?.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      }\n    </ion-col>\n    <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\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  @if (!mobile) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"toggleShowPanel($event)\"\n      [hidden]=\"disabled\"\n      [title]=\"!showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n  }\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"!showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.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: "component", type: i6$2.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: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayIncludesPipe, name: "arrayIncludes" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i20.RxPush, name: "push" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", label: "label", appearance: "appearance", subscriptSizing: "subscriptSizing", placeholder: "placeholder", suggestFn: "suggestFn", required: ["required", "required", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], showPanelHeader: ["showPanelHeader", "showPanelHeader", booleanAttribute], showPanelFooter: ["showPanelFooter", "showPanelFooter", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], debounceTime: ["debounceTime", "debounceTime", numberAttribute], displaySeparator: "displaySeparator", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: ["highlightAccent", "highlightAccent", booleanAttribute], showAllOnFocus: ["showAllOnFocus", "showAllOnFocus", booleanAttribute], showPanelOnFocus: ["showPanelOnFocus", "showPanelOnFocus", booleanAttribute], reloadItemsOnFocus: ["reloadItemsOnFocus", "reloadItemsOnFocus", booleanAttribute], clearInvalidValueOnBlur: ["clearInvalidValueOnBlur", "clearInvalidValueOnBlur", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", panelClass: "panelClass", panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], matAutocompletePosition: "matAutocompletePosition", multiple: ["multiple", "multiple", booleanAttribute], fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: ["suggestLengthThreshold", "suggestLengthThreshold", numberAttribute], showLoadingSpinner: ["showLoadingSpinner", "showLoadingSpinner", booleanAttribute], debug: ["debug", "debug", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], stickySearchBar: ["stickySearchBar", "stickySearchBar", booleanAttribute], applyImplicitValue: "applyImplicitValue", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", trimSearchText: ["trimSearchText", "trimSearchText", booleanAttribute], splitSearchText: ["splitSearchText", "splitSearchText", booleanAttribute], selectInputContentOnFocus: ["selectInputContentOnFocus", "selectInputContentOnFocus", booleanAttribute], selectInputContentOnFocusDelay: ["selectInputContentOnFocusDelay", "selectInputContentOnFocusDelay", numberAttribute], previewImplicitValue: ["previewImplicitValue", "previewImplicitValue", booleanAttribute], showFavorites: "showFavorites", toggleFavoriteTitle: "toggleFavoriteTitle", favoriteItems: "favoriteItems", colSizes: "colSizes", classList: ["class", "classList"], filter: "filter", readonly: ["readonly", "readonly", booleanAttribute], tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keydownBackspace: "keydown.backspace", keyupEnter: "keyup.enter", arrowUp: "arrowUp", arrowDown: "arrowDown", enter: "enter", selectionChange: "selectionChange", openedChange: "openedChange", toggleFavorite: "toggleFavorite" }, providers: [DEFAULT_VALUE_ACCESSOR$4], queries: [{ propertyName: "panelHeaderTemplate", first: true, predicate: MaterialAutocompleteHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: MaterialAutocompleteFooterDirective, descendants: true, read: TemplateRef }], 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 field-container\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <!-- readonly -->\n      @if (_readonly) {\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          class=\"mat-form-field-disabled\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n          <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n          <ion-text>{{ value | toString: displayWith }}</ion-text>\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          <!-- hints -->\n          @if (!formControl.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      } @else {\n        @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          [hideRequiredMarker]=\"hideRequiredMarker\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if ((label || placeholder) && floatLabel !== 'never') {\n            <mat-label>{{ label || placeholder }}</mat-label>\n          }\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          @if (mobile || multiple) {\n            <mat-select\n              #matSelect\n              hideSingleSelectionIndicator\n              disableOptionCentering\n              [disableRipple]=\"disableRipple\"\n              [formControl]=\"formControl\"\n              [tabindex]=\"_tabindex\"\n              [panelClass]=\"panelClass\"\n              [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n              (focus)=\"filterMatSelectFocusEvent($event)\"\n              (blur)=\"filterMatSelectBlurEvent($event)\"\n              (keydown.escape)=\"emitEscape($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              (openedChange)=\"openedChange.emit($event)\"\n              [compareWith]=\"equals\"\n              [multiple]=\"multiple\"\n              [typeaheadDebounceInterval]=\"debounceTime * 10\"\n              [required]=\"required\"\n              [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n            >\n              <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n              <!-- Search bar -->\n              @if (showSearchBar) {\n                <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n                  <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n                  <ion-searchbar\n                    #ionSearchbar\n                    inputmode=\"search\"\n                    autocomplete=\"off\"\n                    animated=\"false\"\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\n              <!-- Custom header -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelHeaderTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n              <!-- Headers -->\n              <ion-row\n                class=\"mat-select-header column sticky ion-no-padding\"\n                [class.multiple]=\"multiple\"\n                [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n                [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n              >\n                <!-- favorite spacer -->\n                @if (hasFavorites) {\n                  <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                }\n                <!-- attribute headers -->\n                @for (attr of displayAttributes; track attr; let i = $index) {\n                  <ion-col [size]=\"displayColumnSizes[i]\">\n                    <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  </ion-col>\n                }\n              </ion-row>\n\n              <!-- None option -->\n              @if (!required && !multiple && !clearable) {\n                <mat-option 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              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n                    <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col size=\"auto\" class=\"favorite-col\">\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n\n                        <!-- attribute columns -->\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n                            <ion-label\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\n                            ></ion-label>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding mat-pseudo-checkbox-hidden\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- need more character -->\n                <mat-option class=\"ion-padding text-italic mat-pseudo-checkbox-hidden\" disabled>\n                  <ion-label>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-label>\n                </mat-option>\n              } @else {\n                <!-- loading spinner -->\n                <mat-option class=\"ion-padding mat-pseudo-checkbox-hidden\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n\n              <!-- footer -->\n              @if (showPanelFooter && itemCount; as count) {\n                <mat-option class=\"mat-option-footer mat-autocomplete-footer mat-pseudo-checkbox-hidden ion-no-padding\" disabled>\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\n              <!-- Custom footer -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelFooterTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n            </mat-select>\n          } @else {\n            <!-- desktop (use mat-autocomplete) -->\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"(label || 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)=\"emitEscape($event)\"\n              (keydown.backspace)=\"onBackspace($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (keyup.arrowUp)=\"emitArrowUp($event)\"\n              (keyup.arrowDown)=\"emitArrowDown($event)\"\n            />\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              [autoActiveFirstOption]=\"true\"\n              [hideSingleSelectionIndicator]=\"true\"\n              [displayWith]=\"displayWith\"\n              [class]=\"panelClass\"\n              [panelWidth]=\"panelWidth\"\n              [disableRipple]=\"disableRipple\"\n              (optionSelected)=\"onOptionSelected($event)\"\n              (opened)=\"openedChange.emit(true)\"\n              (closed)=\"openedChange.emit(false)\"\n            >\n\n              <!-- Custom header -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelHeaderTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n              <!-- Headers -->\n              @if (showPanelHeader) {\n                <ion-row\n                  class=\"mat-autocomplete-header column sticky ion-no-padding\"\n                  [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n                >\n                  <!-- favorite spacer -->\n                  @if (hasFavorites) {\n                    <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                  }\n                  @for (attr of displayAttributes; track attr; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\">\n                      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                    </ion-col>\n                  }\n                </ion-row>\n              }\n              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n                    <mat-option\n                      [value]=\"item\"\n                      class=\"ion-no-padding\"\n                      [class.mdc-list-item--selected]=\"item === _selectedItem\"\n                      [class.mdc-list-item--favorite]=\"isFavorite\"\n                    >\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col\n                            matPrefix\n                            size=\"auto\"\n                            class=\"favorite-col\"\n                            (click)=\"toggleFavoriteClick($event, item)\"\n                          >\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            } @else if (toggleFavorite.observed) {\n                              <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col\n                            [size]=\"displayColumnSizes[j]\"\n                            [title]=\"!showTooltip ? text.innerText : ''\"\n                            [matTooltip]=\"showTooltip ? text.innerText : ''\"\n                            class=\"ion-align-self-center\"\n                          >\n                            <ion-label>\n                              <span\n                                #text\n                                [innerHTML]=\"\n                                  item\n                                    | propertyGet: path\n                                    | highlight\n                                      : {\n                                          search: matInputText.value,\n                                          withAccent: highlightAccent,\n                                        }\n                                \"\n                              ></span>\n                            </ion-label>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- Need more characters -->\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              } @else {\n                <!-- Loading spinner -->\n                <mat-option class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n\n              <!-- footer -->\n              @if (showPanelFooter && itemCount; as count) {\n                <ion-row 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              }\n\n              <!-- Custom footer -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelFooterTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n            </mat-autocomplete>\n          }\n          <!--\n          NOTE :\n          - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          @if (formControl?.hasError('required')) {\n            <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n          }\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n          <!-- Hints -->\n          @if (!formControl?.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      }\n    </ion-col>\n    <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\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  @if (!mobile) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"toggleShowPanel($event)\"\n      [hidden]=\"disabled\"\n      [title]=\"!showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n  }\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"!showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.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: "component", type: i6$2.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: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayIncludesPipe, name: "arrayIncludes" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i20.RxPush, name: "push" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatAutocompleteField, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-autocomplete-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-grid class=\"ion-no-padding field-container\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <!-- readonly -->\n      @if (_readonly) {\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          class=\"mat-form-field-disabled\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n          <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n          <ion-text>{{ value | toString: displayWith }}</ion-text>\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          <!-- hints -->\n          @if (!formControl.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      } @else {\n        @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          [hideRequiredMarker]=\"hideRequiredMarker\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if ((label || placeholder) && floatLabel !== 'never') {\n            <mat-label>{{ label || placeholder }}</mat-label>\n          }\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          @if (mobile || multiple) {\n            <mat-select\n              #matSelect\n              hideSingleSelectionIndicator\n              disableOptionCentering\n              [disableRipple]=\"disableRipple\"\n              [formControl]=\"formControl\"\n              [tabindex]=\"_tabindex\"\n              [panelClass]=\"panelClass\"\n              [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n              (focus)=\"filterMatSelectFocusEvent($event)\"\n              (blur)=\"filterMatSelectBlurEvent($event)\"\n              (keydown.escape)=\"emitEscape($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              (openedChange)=\"openedChange.emit($event)\"\n              [compareWith]=\"equals\"\n              [multiple]=\"multiple\"\n              [typeaheadDebounceInterval]=\"debounceTime * 10\"\n              [required]=\"required\"\n              [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n            >\n              <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n              <!-- Search bar -->\n              @if (showSearchBar) {\n                <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n                  <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n                  <ion-searchbar\n                    #ionSearchbar\n                    inputmode=\"search\"\n                    autocomplete=\"off\"\n                    animated=\"false\"\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                [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n              >\n                <!-- favorite spacer -->\n                @if (hasFavorites) {\n                  <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                }\n                <!-- attribute headers -->\n                @for (attr of displayAttributes; track attr; let i = $index) {\n                  <ion-col [size]=\"displayColumnSizes[i]\">\n                    <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  </ion-col>\n                }\n              </ion-row>\n\n              <!-- None option -->\n              @if (!required && !multiple && !clearable) {\n                <mat-option 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              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n                    <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col size=\"auto\" class=\"favorite-col\">\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n\n                        <!-- attribute columns -->\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n                            <ion-label\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\n                            ></ion-label>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- need more character -->\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              } @else {\n                <!-- loading spinner -->\n                <mat-option class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n              <!-- footer -->\n              @if (showListFooter && itemCount; as count) {\n                <mat-option class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\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            </mat-select>\n          } @else {\n            <!-- desktop (use mat-autocomplete) -->\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"(label || 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)=\"emitEscape($event)\"\n              (keydown.backspace)=\"onBackspace($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (keyup.arrowUp)=\"emitArrowUp($event)\"\n              (keyup.arrowDown)=\"emitArrowDown($event)\"\n            />\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              [autoActiveFirstOption]=\"true\"\n              [hideSingleSelectionIndicator]=\"true\"\n              [displayWith]=\"displayWith\"\n              [class]=\"panelClass\"\n              [panelWidth]=\"panelWidth\"\n              [disableRipple]=\"disableRipple\"\n              (optionSelected)=\"onOptionSelected($event)\"\n              (opened)=\"openedChange.emit(true)\"\n              (closed)=\"openedChange.emit(false)\"\n            >\n              <!-- Custom header list -->\n              <ng-container\n                [ngTemplateOutlet]=\"listHeaderTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n              <!-- Headers -->\n              @if (showListHeader) {\n                <ion-row\n                  class=\"mat-autocomplete-header column ion-no-padding\"\n                  [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n                >\n                  <!-- favorite spacer -->\n                  @if (hasFavorites) {\n                    <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                  }\n                  @for (attr of displayAttributes; track attr; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\">\n                      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                    </ion-col>\n                  }\n                </ion-row>\n              }\n\n              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n                    <mat-option\n                      [value]=\"item\"\n                      class=\"ion-no-padding\"\n                      [class.mdc-list-item--selected]=\"item === _selectedItem\"\n                      [class.mdc-list-item--favorite]=\"isFavorite\"\n                    >\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col\n                            matPrefix\n                            size=\"auto\"\n                            class=\"favorite-col\"\n                            (click)=\"toggleFavoriteClick($event, item)\"\n                          >\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            } @else if (toggleFavorite.observed) {\n                              <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col\n                            [size]=\"displayColumnSizes[j]\"\n                            [title]=\"!showTooltip ? text.innerText : ''\"\n                            [matTooltip]=\"showTooltip ? text.innerText : ''\"\n                            class=\"ion-align-self-center\"\n                          >\n                            <ion-text>\n                              <span\n                                #text\n                                [innerHTML]=\"\n                                  item\n                                    | propertyGet: path\n                                    | highlight\n                                      : {\n                                          search: matInputText.value,\n                                          withAccent: highlightAccent,\n                                        }\n                                \"\n                              ></span>\n                            </ion-text>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- Need more characters -->\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              } @else {\n                <!-- Loading spinner -->\n                <mat-option class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n\n              <!-- footer -->\n              @if (showListFooter && itemCount; as count) {\n                <ion-row 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              }\n              <!-- Custom footer list -->\n              <ng-container [ngTemplateOutlet]=\"listFooterTemplate\" [ngTemplateOutletContext]=\"{}\"></ng-container>\n            </mat-autocomplete>\n          }\n          <!--\n          NOTE :\n          - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          @if (formControl?.hasError('required')) {\n            <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n          }\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n          <!-- Hints -->\n          @if (!formControl?.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      }\n    </ion-col>\n    <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\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  @if (!mobile) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"toggleShowPanel($event)\"\n      [hidden]=\"disabled\"\n      [title]=\"!showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n  }\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"!showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"] }]
+            args: [{ selector: 'mat-autocomplete-field', providers: [DEFAULT_VALUE_ACCESSOR$4], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-grid class=\"ion-no-padding field-container\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <!-- readonly -->\n      @if (_readonly) {\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          class=\"mat-form-field-disabled\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n          <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n          <ion-text>{{ value | toString: displayWith }}</ion-text>\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          <!-- hints -->\n          @if (!formControl.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      } @else {\n        @let hasFavorites = toggleFavorite.observed || (favoriteItems | isNotEmptyArray);\n\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [title]=\"!showTooltip ? _displayValue || '' : ''\"\n          [matTooltip]=\"showTooltip ? _displayValue || '' : ''\"\n          [hideRequiredMarker]=\"hideRequiredMarker\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n          @if ((label || placeholder) && floatLabel !== 'never') {\n            <mat-label>{{ label || placeholder }}</mat-label>\n          }\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          @if (mobile || multiple) {\n            <mat-select\n              #matSelect\n              hideSingleSelectionIndicator\n              disableOptionCentering\n              [disableRipple]=\"disableRipple\"\n              [formControl]=\"formControl\"\n              [tabindex]=\"_tabindex\"\n              [panelClass]=\"panelClass\"\n              [panelWidth]=\"panelWidth || _defaultPanelWidth\"\n              (focus)=\"filterMatSelectFocusEvent($event)\"\n              (blur)=\"filterMatSelectBlurEvent($event)\"\n              (keydown.escape)=\"emitEscape($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              (openedChange)=\"openedChange.emit($event)\"\n              [compareWith]=\"equals\"\n              [multiple]=\"multiple\"\n              [typeaheadDebounceInterval]=\"debounceTime * 10\"\n              [required]=\"required\"\n              [class.mat-mdc-select-arrow-hidden]=\"!mobile\"\n            >\n              <mat-select-trigger>{{ value | toString: displayWith }}</mat-select-trigger>\n              <!-- Search bar -->\n              @if (showSearchBar) {\n                <mat-optgroup class=\"mat-select-searchbar\" [class.mat-select-searchbar-sticky]=\"stickySearchBar\">\n                  <!-- FIXME on iOS devices, when animated=\"true\", then the search icon overlap the placeholder -->\n                  <ion-searchbar\n                    #ionSearchbar\n                    inputmode=\"search\"\n                    autocomplete=\"off\"\n                    animated=\"false\"\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\n              <!-- Custom header -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelHeaderTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n              <!-- Headers -->\n              <ion-row\n                class=\"mat-select-header column sticky ion-no-padding\"\n                [class.multiple]=\"multiple\"\n                [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\"\n                [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n              >\n                <!-- favorite spacer -->\n                @if (hasFavorites) {\n                  <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                }\n                <!-- attribute headers -->\n                @for (attr of displayAttributes; track attr; let i = $index) {\n                  <ion-col [size]=\"displayColumnSizes[i]\">\n                    <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  </ion-col>\n                }\n              </ion-row>\n\n              <!-- None option -->\n              @if (!required && !multiple && !clearable) {\n                <mat-option 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              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n\n                    <mat-option [value]=\"item\" class=\"ion-no-padding\" [class.mdc-list-item--favorite]=\"isFavorite\">\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col size=\"auto\" class=\"favorite-col\">\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n\n                        <!-- attribute columns -->\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col [size]=\"displayColumnSizes[j]\" class=\"ion-align-self-center ion-text-wrap\">\n                            <ion-label\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\n                            ></ion-label>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding mat-pseudo-checkbox-hidden\" (ngInit)=\"_initMatSelectInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- need more character -->\n                <mat-option class=\"ion-padding text-italic mat-pseudo-checkbox-hidden\" disabled>\n                  <ion-label>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-label>\n                </mat-option>\n              } @else {\n                <!-- loading spinner -->\n                <mat-option class=\"ion-padding mat-pseudo-checkbox-hidden\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n\n              <!-- footer -->\n              @if (showPanelFooter && itemCount; as count) {\n                <mat-option class=\"mat-option-footer mat-autocomplete-footer mat-pseudo-checkbox-hidden ion-no-padding\" disabled>\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\n              <!-- Custom footer -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelFooterTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n            </mat-select>\n          } @else {\n            <!-- desktop (use mat-autocomplete) -->\n            <input\n              matInput\n              #matInputText\n              type=\"text\"\n              [matAutocomplete]=\"autocomplete\"\n              [matAutocompletePosition]=\"matAutocompletePosition\"\n              [formControl]=\"formControl\"\n              [placeholder]=\"(label || 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)=\"emitEscape($event)\"\n              (keydown.backspace)=\"onBackspace($event)\"\n              (keyup.enter)=\"emitEnter($event)\"\n              (keyup.arrowUp)=\"emitArrowUp($event)\"\n              (keyup.arrowDown)=\"emitArrowDown($event)\"\n            />\n            <!-- autocomplete -->\n            <mat-autocomplete\n              #autocomplete=\"matAutocomplete\"\n              [autoActiveFirstOption]=\"true\"\n              [hideSingleSelectionIndicator]=\"true\"\n              [displayWith]=\"displayWith\"\n              [class]=\"panelClass\"\n              [panelWidth]=\"panelWidth\"\n              [disableRipple]=\"disableRipple\"\n              (optionSelected)=\"onOptionSelected($event)\"\n              (opened)=\"openedChange.emit(true)\"\n              (closed)=\"openedChange.emit(false)\"\n            >\n\n              <!-- Custom header -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelHeaderTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n              <!-- Headers -->\n              @if (showPanelHeader) {\n                <ion-row\n                  class=\"mat-autocomplete-header column sticky ion-no-padding\"\n                  [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\"\n                >\n                  <!-- favorite spacer -->\n                  @if (hasFavorites) {\n                    <ion-col size=\"auto\" class=\"favorite-col\"></ion-col>\n                  }\n                  @for (attr of displayAttributes; track attr; let i = $index) {\n                    <ion-col [size]=\"displayColumnSizes[i]\">\n                      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                    </ion-col>\n                  }\n                </ion-row>\n              }\n              @if (_$filteredItems | push: 'userBlocking'; as items) {\n                <!-- No item option -->\n                @if (items | isEmptyArray) {\n                  <mat-option class=\"ion-padding text-italic\" disabled>\n                    <ion-label>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-label>\n                  </mat-option>\n                } @else {\n                  <!-- Options -->\n                  @for (item of items; track i; let i = $index) {\n                    @let isFavorite = hasFavorites && (favoriteItems | arrayIncludes: item);\n                    <mat-option\n                      [value]=\"item\"\n                      class=\"ion-no-padding\"\n                      [class.mdc-list-item--selected]=\"item === _selectedItem\"\n                      [class.mdc-list-item--favorite]=\"isFavorite\"\n                    >\n                      <ion-row [classList]=\"item?.classList || ''\" [style.--ion-grid-columns]=\"hasFavorites ? 13 : 12\">\n                        <!-- favorite icon -->\n                        @if (hasFavorites) {\n                          <ion-col\n                            matPrefix\n                            size=\"auto\"\n                            class=\"favorite-col\"\n                            (click)=\"toggleFavoriteClick($event, item)\"\n                          >\n                            @if (isFavorite) {\n                              <ion-icon name=\"star\" color=\"tertiary\"></ion-icon>\n                            } @else if (toggleFavorite.observed) {\n                              <ion-icon name=\"star-outline\" color=\"medium\" class=\"visible-hover\"></ion-icon>\n                            }\n                          </ion-col>\n                        }\n                        @for (path of displayAttributes; track j; let j = $index) {\n                          <ion-col\n                            [size]=\"displayColumnSizes[j]\"\n                            [title]=\"!showTooltip ? text.innerText : ''\"\n                            [matTooltip]=\"showTooltip ? text.innerText : ''\"\n                            class=\"ion-align-self-center\"\n                          >\n                            <ion-label>\n                              <span\n                                #text\n                                [innerHTML]=\"\n                                  item\n                                    | propertyGet: path\n                                    | highlight\n                                      : {\n                                          search: matInputText.value,\n                                          withAccent: highlightAccent,\n                                        }\n                                \"\n                              ></span>\n                            </ion-label>\n                          </ion-col>\n                        }\n                      </ion-row>\n                    </mat-option>\n                  }\n                }\n                <!-- More item -->\n                @if (_moreItemsCount) {\n                  <mat-option class=\"ion-padding\" (ngInit)=\"_initAutocompleteInfiniteScroll()\" disabled>\n                    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                  </mat-option>\n                }\n              } @else if ((_displayValue | strLength) < suggestLengthThreshold) {\n                <!-- Need more characters -->\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              } @else {\n                <!-- Loading spinner -->\n                <mat-option class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              }\n\n              <!-- footer -->\n              @if (showPanelFooter && itemCount; as count) {\n                <ion-row 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              }\n\n              <!-- Custom footer -->\n              <ng-container\n                [ngTemplateOutlet]=\"panelFooterTemplate\"\n                [ngTemplateOutletContext]=\"{ itemCount: itemCount }\"\n              ></ng-container>\n\n            </mat-autocomplete>\n          }\n          <!--\n          NOTE :\n          - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n          @if (formControl?.hasError('required')) {\n            <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error translate>ERROR.FIELD_INVALID</mat-error>\n          }\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n          <!-- Hints -->\n          @if (!formControl?.invalid) {\n            <mat-hint>\n              <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n            </mat-hint>\n          }\n        </mat-form-field>\n      }\n    </ion-col>\n    <ion-col [size]=\"colSizes?.[1]\" class=\"ion-no-padding\">\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  @if (!mobile) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"toggleShowPanel($event)\"\n      [hidden]=\"disabled\"\n      [title]=\"!showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (dropButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>{{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n  }\n  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [hidden]=\"disabled || !formControl.value\"\n      [title]=\"!showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? (clearButtonTitle || '' | translate) : ''\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label,:host.ion-text-wrap ion-text{white-space:normal!important}:host ::ng-deep .mat-mdc-select-arrow-hidden .mat-mdc-select-arrow-wrapper{display:none;visibility:hidden}ion-grid.field-container>ion-row>ion-col.ion-no-padding{--ion-padding-start: 0}ion-row{flex-wrap:nowrap}button[hidden]{display:none}mat-autocomplete mat-option{--mat-option-text-width: 100%}ion-col.favorite-col{flex:0 0 auto;width:24px!important}mat-option .visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}mat-option:hover .visible-hover{display:inline-block;opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.ModalController }, { type: i0.Renderer2 }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { equals: [{
@@ -10424,10 +10449,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], mobile: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], showListHeader: [{
+            }], showPanelHeader: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], showListFooter: [{
+            }], showPanelFooter: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], clearable: [{
@@ -10584,12 +10609,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], autocompleteTrigger: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]
-            }], listHeaderTemplate: [{
+            }], panelHeaderTemplate: [{
                 type: ContentChild,
-                args: ['listHeaderTemplate']
-            }], listFooterTemplate: [{
+                args: [MaterialAutocompleteHeaderDirective, { read: TemplateRef }]
+            }], panelFooterTemplate: [{
                 type: ContentChild,
-                args: ['listFooterTemplate']
+                args: [MaterialAutocompleteFooterDirective, { read: TemplateRef }]
             }], filter: [{
                 type: Input
             }], readonly: [{
@@ -10616,7 +10641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class SharedMatAutocompleteModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, declarations: [MatAutocompleteField], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, declarations: [MatAutocompleteField, MaterialAutocompleteHeaderDirective, MaterialAutocompleteFooterDirective], imports: [CommonModule,
             IonicModule,
             ScrollingModule,
             ReactiveFormsModule,
@@ -10630,7 +10655,7 @@ class SharedMatAutocompleteModule {
             MatIconModule,
             MatButtonModule,
             MatSelectModule,
-            MatRippleModule, i1$1.TranslateModule, MatTooltip], exports: [MatAutocompleteModule, MatAutocompleteField] });
+            MatRippleModule, i1$1.TranslateModule, MatTooltip], exports: [MatAutocompleteModule, MatAutocompleteField, MaterialAutocompleteHeaderDirective, MaterialAutocompleteFooterDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, imports: [CommonModule,
             IonicModule,
             ScrollingModule,
@@ -10670,8 +10695,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TranslateModule.forChild(),
                         MatTooltip,
                     ],
-                    exports: [MatAutocompleteModule, MatAutocompleteField],
-                    declarations: [MatAutocompleteField],
+                    exports: [MatAutocompleteModule, MatAutocompleteField, MaterialAutocompleteHeaderDirective, MaterialAutocompleteFooterDirective],
+                    declarations: [MatAutocompleteField, MaterialAutocompleteHeaderDirective, MaterialAutocompleteFooterDirective],
                 }]
         }] });
 
@@ -15109,7 +15134,7 @@ class AppFormField {
                 useExisting: forwardRef(() => AppFormField),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }, { propertyName: "autocompleteField", first: true, predicate: ["autocompleteField"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- integer -->\n  <mat-form-field\n    *ngSwitchCase=\"'integer'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      pattern=\"-?[0-9]*\"\n      step=\"1\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field\n    *ngSwitchCase=\"'double'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      decimal=\"true\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [step]=\"numberInputStep\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{\n        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')\n          | translate: { maxDecimals: definition.maximumNumberDecimals }\n      }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field\n    *ngSwitchCase=\"'boolean'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [compact]=\"compact\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field\n    *ngSwitchCase=\"'date'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field\n    *ngSwitchCase=\"'dateTime'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field\n    *ngSwitchCase=\"'enum'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n    [class.mat-form-field-disabled]=\"readonly\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    @if (readonly) {\n      <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n      <ion-text>{{ formControl.value }}</ion-text>\n    } @else {\n      <mat-select\n        [formControl]=\"formControl\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      >\n        <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n      </mat-select>\n    }\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- multi enum -->\n  <mat-chips-field\n    *ngSwitchCase=\"'enums'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [clearable]=\"clearable\"\n    [items]=\"_values\"\n    [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n    [config]=\"definition.autocomplete\"\n    [showAllOnFocus]=\"true\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [chipColor]=\"chipColor | matColor\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-chips-field>\n\n  <!-- color -->\n  <mat-form-field\n    *ngSwitchCase=\"'color'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input\n      matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [style.color]=\"getColorContrast(formControl.value)\"\n      [style.background]=\"formControl.value\"\n      [colorPicker]=\"formControl.value\"\n      (colorPickerChange)=\"writeValue($event)\"\n      [cpSaveClickOutside]=\"true\"\n      cpPosition=\"top\"\n      cpOutputFormat=\"hex\"\n      [cpOKButton]=\"false\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field\n    *ngSwitchCase=\"'string'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterAlphanumericalInput($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field\n    *ngSwitchCase=\"'entity'\"\n    #autocompleteField\n    [class]=\"classList\"\n    [autofocus]=\"autofocus\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [clearable]=\"clearable\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field\n    *ngSwitchCase=\"'entities'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">\n      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.\n    </mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showListHeader", "showListFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "class", "style", "hourMinWidth", "hourMaxWidth", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "showChips", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }, { propertyName: "autocompleteField", first: true, predicate: ["autocompleteField"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- integer -->\n  <mat-form-field\n    *ngSwitchCase=\"'integer'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      pattern=\"-?[0-9]*\"\n      step=\"1\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field\n    *ngSwitchCase=\"'double'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      decimal=\"true\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [step]=\"numberInputStep\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{\n        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')\n          | translate: { maxDecimals: definition.maximumNumberDecimals }\n      }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field\n    *ngSwitchCase=\"'boolean'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [compact]=\"compact\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field\n    *ngSwitchCase=\"'date'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field\n    *ngSwitchCase=\"'dateTime'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field\n    *ngSwitchCase=\"'enum'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n    [class.mat-form-field-disabled]=\"readonly\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    @if (readonly) {\n      <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n      <ion-text>{{ formControl.value }}</ion-text>\n    } @else {\n      <mat-select\n        [formControl]=\"formControl\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      >\n        <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n      </mat-select>\n    }\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- multi enum -->\n  <mat-chips-field\n    *ngSwitchCase=\"'enums'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [clearable]=\"clearable\"\n    [items]=\"_values\"\n    [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n    [config]=\"definition.autocomplete\"\n    [showAllOnFocus]=\"true\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [chipColor]=\"chipColor | matColor\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-chips-field>\n\n  <!-- color -->\n  <mat-form-field\n    *ngSwitchCase=\"'color'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input\n      matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [style.color]=\"getColorContrast(formControl.value)\"\n      [style.background]=\"formControl.value\"\n      [colorPicker]=\"formControl.value\"\n      (colorPickerChange)=\"writeValue($event)\"\n      [cpSaveClickOutside]=\"true\"\n      cpPosition=\"top\"\n      cpOutputFormat=\"hex\"\n      [cpOKButton]=\"false\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field\n    *ngSwitchCase=\"'string'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterAlphanumericalInput($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field\n    *ngSwitchCase=\"'entity'\"\n    #autocompleteField\n    [class]=\"classList\"\n    [autofocus]=\"autofocus\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [clearable]=\"clearable\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field\n    *ngSwitchCase=\"'entities'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">\n      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.\n    </mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showPanelHeader", "showPanelFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "class", "style", "hourMinWidth", "hourMaxWidth", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "showChips", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppFormField, decorators: [{
             type: Component,
@@ -27452,7 +27477,7 @@ class NamedFilterSelector extends AppForm {
         this.autocompleteField.blurred.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NamedFilterSelector, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2$1.ToastController }, { token: i2$1.PopoverController }, { token: APP_NAMED_FILTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NamedFilterSelector, selector: "app-named-filter-selector", inputs: { mobile: "mobile", entityName: "entityName", appearance: "appearance", subscriptSizing: "subscriptSizing", filterContentProvider: "filterContentProvider", filterImportCallback: "filterImportCallback", filterFormDirty: "filterFormDirty", showButtons: "showButtons", exportFileNamePrefix: "exportFileNamePrefix", autocompleteConfig: "autocompleteConfig", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", detectChangeOnSelectFilter: "detectChangeOnSelectFilter", buttonsPosition: "buttonsPosition", disabled: "disabled" }, outputs: { filterSelected: "filterSelected", filterDeleted: "filterDeleted", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "autocompleteField", first: true, predicate: MatAutocompleteField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row class=\"ion-no-padding\">\n    <ion-col class=\"ion-no-padding\">\n      <form class=\"form-container\" [formGroup]=\"form\">\n        <mat-autocomplete-field\n          formControlName=\"namedFilter\"\n          [config]=\"autocompleteFields.namedFilter\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n          [clearable]=\"true\"\n          [dropButtonTitle]=\"dropButtonTitle\"\n          [clearButtonTitle]=\"clearButtonTitle\"\n        >\n          @if (showButtons && buttonsPosition === 'matSuffix') {\n            <ng-container matSuffix>\n              <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n            </ng-container>\n          }\n        </mat-autocomplete-field>\n      </form>\n    </ion-col>\n    @if (showButtons && buttonsPosition === 'after') {\n      <ion-col size=\"auto\" class=\"ion-no-padding\">\n        <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n      </ion-col>\n    }\n  </ion-row>\n</ion-grid>\n\n<ng-template #buttons>\n  <!-- save -->\n  <button\n    mat-icon-button\n    [color]=\"'primary'\"\n    [disabled]=\"saveDisabled\"\n    [title]=\"!showTooltip ? ('COMMON.NAMED_FILTER.SAVE' | translate) : ''\"\n    [matTooltip]=\"showTooltip ? ('COMMON.NAMED_FILTER.SAVE' | translate) : ''\"\n    (click)=\"save($event)\"\n  >\n    <mat-icon>save</mat-icon>\n    <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0\">add</mat-icon>\n  </button>\n\n  <!-- delete -->\n  <button\n    mat-icon-button\n    [disabled]=\"deleteDisabled\"\n    [title]=\"!showTooltip ? ('COMMON.NAMED_FILTER.DELETE' | translate) : ''\"\n    [matTooltip]=\"showTooltip ? ('COMMON.NAMED_FILTER.DELETE' | translate) : ''\"\n    (click)=\"delete($event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- more '...' -->\n  <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\" (click)=\"onMoreOptionsClick($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n\n  <!-- more menu -->\n  <mat-menu #moreMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <!-- import -->\n      <button mat-menu-item (click)=\"import($event)\">\n        <mat-icon>file_upload</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>\n      </button>\n\n      <mat-divider></mat-divider>\n\n      <!-- export -->\n      <button mat-menu-item (click)=\"export($event)\" [disabled]=\"isNew\">\n        <mat-icon>file_download</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>\n      </button>\n    </ng-template>\n  </mat-menu>\n</ng-template>\n", styles: [":host{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showListHeader", "showListFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NamedFilterSelector, selector: "app-named-filter-selector", inputs: { mobile: "mobile", entityName: "entityName", appearance: "appearance", subscriptSizing: "subscriptSizing", filterContentProvider: "filterContentProvider", filterImportCallback: "filterImportCallback", filterFormDirty: "filterFormDirty", showButtons: "showButtons", exportFileNamePrefix: "exportFileNamePrefix", autocompleteConfig: "autocompleteConfig", dropButtonTitle: "dropButtonTitle", clearButtonTitle: "clearButtonTitle", detectChangeOnSelectFilter: "detectChangeOnSelectFilter", buttonsPosition: "buttonsPosition", disabled: "disabled" }, outputs: { filterSelected: "filterSelected", filterDeleted: "filterDeleted", filterCleared: "filterCleared" }, viewQueries: [{ propertyName: "autocompleteField", first: true, predicate: MatAutocompleteField, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row class=\"ion-no-padding\">\n    <ion-col class=\"ion-no-padding\">\n      <form class=\"form-container\" [formGroup]=\"form\">\n        <mat-autocomplete-field\n          formControlName=\"namedFilter\"\n          [config]=\"autocompleteFields.namedFilter\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"subscriptSizing\"\n          [placeholder]=\"'COMMON.NAMED_FILTER.TITLE' | translate\"\n          [clearable]=\"true\"\n          [dropButtonTitle]=\"dropButtonTitle\"\n          [clearButtonTitle]=\"clearButtonTitle\"\n        >\n          @if (showButtons && buttonsPosition === 'matSuffix') {\n            <ng-container matSuffix>\n              <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n            </ng-container>\n          }\n        </mat-autocomplete-field>\n      </form>\n    </ion-col>\n    @if (showButtons && buttonsPosition === 'after') {\n      <ion-col size=\"auto\" class=\"ion-no-padding\">\n        <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n      </ion-col>\n    }\n  </ion-row>\n</ion-grid>\n\n<ng-template #buttons>\n  <!-- save -->\n  <button\n    mat-icon-button\n    [color]=\"'primary'\"\n    [disabled]=\"saveDisabled\"\n    [title]=\"!showTooltip ? ('COMMON.NAMED_FILTER.SAVE' | translate) : ''\"\n    [matTooltip]=\"showTooltip ? ('COMMON.NAMED_FILTER.SAVE' | translate) : ''\"\n    (click)=\"save($event)\"\n  >\n    <mat-icon>save</mat-icon>\n    <mat-icon *ngIf=\"isNew\" class=\"icon-secondary\" style=\"left: 12px; top: 0\">add</mat-icon>\n  </button>\n\n  <!-- delete -->\n  <button\n    mat-icon-button\n    [disabled]=\"deleteDisabled\"\n    [title]=\"!showTooltip ? ('COMMON.NAMED_FILTER.DELETE' | translate) : ''\"\n    [matTooltip]=\"showTooltip ? ('COMMON.NAMED_FILTER.DELETE' | translate) : ''\"\n    (click)=\"delete($event)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- more '...' -->\n  <button mat-icon-button [matMenuTriggerFor]=\"moreMenu\" (click)=\"onMoreOptionsClick($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n\n  <!-- more menu -->\n  <mat-menu #moreMenu=\"matMenu\">\n    <ng-template matMenuContent>\n      <!-- import -->\n      <button mat-menu-item (click)=\"import($event)\">\n        <mat-icon>file_upload</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>\n      </button>\n\n      <mat-divider></mat-divider>\n\n      <!-- export -->\n      <button mat-menu-item (click)=\"export($event)\" [disabled]=\"isNew\">\n        <mat-icon>file_download</mat-icon>\n        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>\n      </button>\n    </ng-template>\n  </mat-menu>\n</ng-template>\n", styles: [":host{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showPanelHeader", "showPanelFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NamedFilterSelector, decorators: [{
             type: Component,
@@ -28309,6 +28334,676 @@ ProgressInterceptor = __decorate([
     __param(0, Inject(APP_PROGRESS_BAR_SERVICE))
 ], ProgressInterceptor);
 
+/**
+ * The zoom/pan/rotate/crop slideshow shown when clicking an image in `AppImageGalleryComponent`.
+ * Extracted into its own component so the exact same slideshow can be presented either inside an
+ * `ion-modal` (default), or inline as an overlay directly within the gallery, without any duplication.
+ */
+class AppImageGallerySlideshowComponent {
+    alterCtrl;
+    translate;
+    cd;
+    activeSlideIndex = 0;
+    swiperModules = [IonicSlides];
+    _swiper;
+    // Mouse wheel zoom & rotation state
+    _zoomState = { scale: 1, tx: 0, ty: 0 };
+    _rotation = 0; // degrees: 0, 90, 180, 270
+    _dragState = null;
+    _wheelListener = null;
+    _wheelEl = null;
+    // Crop & rotate state. Rotation is always available; the crop grid/handles only show once the
+    // crop tool has been explicitly activated (fab button). Validate/cancel show up once something changed.
+    _cropToolActive = false;
+    _cropRect = { x: 0, y: 0, width: 1, height: 1 };
+    _cropOverlayRect = null;
+    _cropDragState = null;
+    _cropHandles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+    rows = [];
+    selectedIndex = 0;
+    mobile = false;
+    readOnly = false;
+    disabled = false;
+    debug = false;
+    mouseZoomEnabled = false;
+    wheelZoomStep = 0.3;
+    maxZoomRatio = 3;
+    rotationEnabled = true;
+    cropEnabled = true;
+    imageExportFormat = 'png';
+    imageExportQuality = 0.92;
+    imageSizeQueryParam = 'size';
+    modalImageSize;
+    /** Requests deletion of the given row. The caller (gallery) owns the confirmation/deletion logic and resolves the promise with whether it actually happened. */
+    deleteRequested = createPromiseEventEmitter();
+    closeRequested = new EventEmitter();
+    afterEditImage = new EventEmitter();
+    afterEditRow = new EventEmitter();
+    swiperRef;
+    showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
+    get hasPendingEdit() {
+        const r = this._cropRect;
+        return this._rotation !== 0 || r.x !== 0 || r.y !== 0 || r.width !== 1 || r.height !== 1;
+    }
+    constructor(alterCtrl, translate, cd) {
+        this.alterCtrl = alterCtrl;
+        this.translate = translate;
+        this.cd = cd;
+    }
+    ngOnDestroy() {
+        this._cleanupWheelZoom();
+    }
+    getSwiper(swiperElement) {
+        this._swiper = (swiperElement || this.swiperRef?.nativeElement)?.swiper || this._swiper;
+        return this._swiper;
+    }
+    onSlideChange(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        this.activeSlideIndex = swiper.activeIndex;
+        this._resetZoom(swiperElement);
+        this._updateSwiperTouchMove(swiperElement);
+        this.markForCheck();
+    }
+    onSwiperInit(swiperElement) {
+        this._resetZoom();
+        if (this.selectedIndex > 0) {
+            if (this.debug)
+                console.debug(`[image-gallery-slideshow] Initializing slideshow, selectedIndex=${this.selectedIndex}`);
+            // Use a setTimeout otherwise the swiper cannot slide
+            setTimeout(() => {
+                const swiper = this.getSwiper(swiperElement);
+                swiper.slideTo(this.selectedIndex, 0);
+            });
+        }
+        this._setupWheelZoom(swiperElement);
+        this._updateSwiperTouchMove(swiperElement);
+        setTimeout(() => {
+            this._updateEditImageSize(swiperElement);
+            this._updateCropOverlayPosition(swiperElement);
+        });
+    }
+    /**
+     * Swiper's own touch/mouse-drag-to-swipe gesture is captured very early (before our crop overlay's
+     * own mousedown handler can stop it), so it must be disabled upfront whenever the crop tool is active
+     * -- otherwise dragging inside the crop selection ends up sliding to the next/previous image instead.
+     * Prev/next arrow buttons keep working, since they call the Swiper API directly.
+     */
+    _updateSwiperTouchMove(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        if (!swiper)
+            return;
+        swiper.allowTouchMove = !this._cropToolActive;
+    }
+    async zoom(swiperElement, zoomIn) {
+        if (this.debug)
+            console.debug('[image-gallery-slideshow] zoom ' + (zoomIn ? 'in' : 'out'), swiperElement);
+        if (this.mouseZoomEnabled) {
+            const delta = zoomIn ? this.wheelZoomStep : -this.wheelZoomStep;
+            const newScale = Math.max(1, Math.min(this._zoomState.scale + delta, this.maxZoomRatio));
+            if (newScale === this._zoomState.scale)
+                return;
+            if (newScale === 1) {
+                this._zoomState = { scale: 1, tx: 0, ty: 0 };
+            }
+            else {
+                this._zoomState.scale = newScale;
+                this._clampTranslations(swiperElement);
+            }
+            this._applyZoom(swiperElement);
+        }
+        else {
+            const swiper = this.getSwiper(swiperElement);
+            if (zoomIn)
+                swiper.zoom.in();
+            else
+                swiper.zoom.out();
+        }
+    }
+    async requestDelete(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
+        if (!currentRow)
+            return false; // Row not found
+        let deleted = false;
+        try {
+            deleted = await emitPromiseEvent(this.deleteRequested, 'delete', { detail: { row: currentRow } });
+        }
+        catch (err) {
+            if (err === 'CANCELLED')
+                return false; // User cancel
+            throw err;
+        }
+        if (deleted) {
+            if (!this.rows?.length) {
+                this.closeRequested.emit();
+            }
+            else {
+                this._resetZoom(swiperElement);
+                swiper.update();
+                this.markForCheck();
+            }
+        }
+        return deleted;
+    }
+    async slidePrev(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeIndex = swiper.activeIndex;
+        if (activeIndex === 0) {
+            // Loop to last
+            await swiper.slideTo(this.rows.length - 1, 0 /*no transition, to avoid a "revert" effect*/);
+        }
+        else {
+            await swiper.slidePrev();
+        }
+    }
+    async slideNext(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeIndex = swiper.activeIndex;
+        if (activeIndex === this.rows.length - 1) {
+            // Loop to first
+            await swiper.slideTo(0, 0 /*no transition, to avoid a "revert" effect*/);
+        }
+        else {
+            await swiper.slideNext();
+        }
+    }
+    getImageSizeQueryParams() {
+        if (!this.imageSizeQueryParam || isNilOrBlank(this.modalImageSize))
+            return undefined;
+        return {
+            [this.imageSizeQueryParam]: this.modalImageSize,
+        };
+    }
+    // --- Crop & rotate tools: always available (no "enter edit mode" step) ---
+    // Validate/Cancel only appear once the user actually changed something (see `hasPendingEdit`).
+    discardEdit(swiperElement) {
+        this._resetEditState(swiperElement);
+    }
+    resetCrop(_swiperElement) {
+        this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+        this.markForCheck();
+    }
+    toggleCropTool(swiperElement) {
+        if (!this.cropEnabled || this.readOnly)
+            return;
+        this._cropToolActive = !this._cropToolActive;
+        // Discard any pending crop selection when hiding the tool
+        if (!this._cropToolActive) {
+            this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+            this._cropDragState = null;
+        }
+        this._updateSwiperTouchMove(swiperElement);
+        this.markForCheck();
+        if (this._cropToolActive) {
+            // Wait for the crop overlay to be rendered, then compute its position
+            setTimeout(() => this._updateCropOverlayPosition(swiperElement));
+        }
+    }
+    async validateEdit(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
+        if (!currentRow)
+            return;
+        const image = currentRow.currentData;
+        const format = this.imageExportFormat;
+        const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
+        const quality = format === 'jpeg' ? this.imageExportQuality : undefined;
+        try {
+            const canvas = await this._renderEditedImage(image, this._rotation, this._cropRect);
+            const dataUrl = canvas.toDataURL(mimeType, quality);
+            const blob = await new Promise((resolve, reject) => {
+                canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('canvas.toBlob() failed'))), mimeType, quality);
+            });
+            // Update the row, so the slideshow and thumbnail reflect the change immediately
+            image.dataUrl = dataUrl;
+            image.url = null;
+            this.afterEditImage.emit({ row: currentRow, image, dataUrl, blob, format });
+            this.afterEditRow.emit(currentRow);
+            this._resetEditState(swiperElement);
+        }
+        catch (err) {
+            console.error('[image-gallery-slideshow] Failed to export the edited image', err);
+            await Alerts.showError('IMAGE.GALLERY.ERROR_EDIT_IMAGE', this.alterCtrl, this.translate);
+        }
+    }
+    _resetEditState(swiperElement) {
+        this._rotation = 0;
+        this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+        this._cropDragState = null;
+        this._cropToolActive = false;
+        this._applyZoom(swiperElement);
+        this._updateEditImageSize(swiperElement);
+        this._updateSwiperTouchMove(swiperElement);
+        this.markForCheck();
+    }
+    onWindowResize() {
+        const swiperElement = this.swiperRef?.nativeElement;
+        if (!swiperElement)
+            return;
+        this._updateEditImageSize(swiperElement);
+        this._updateCropOverlayPosition(swiperElement);
+    }
+    rotate(swiperElement, direction) {
+        if (!this.rotationEnabled)
+            return;
+        const delta = direction === 'right' ? 90 : -90;
+        this._rotation = (((this._rotation + delta) % 360) + 360) % 360;
+        this._applyZoom(swiperElement);
+        this._updateEditImageSize(swiperElement);
+        this._updateCropOverlayPosition(swiperElement);
+    }
+    /**
+     * Constrains the displayed image so that, even once rotated 90°/270° via CSS transform,
+     * its visual bounding box always fits inside the slide container (no overflow).
+     */
+    _updateEditImageSize(swiperElement, retriesLeft = 60) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return;
+        const containerEl = activeSlide.querySelector('.swiper-zoom-container');
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        if (!containerEl || !imgEl)
+            return;
+        if (!this.cropEnabled && !this.rotationEnabled) {
+            imgEl.style.width = '';
+            imgEl.style.height = '';
+            return;
+        }
+        const containerRect = containerEl.getBoundingClientRect();
+        const naturalSize = this._getImageNaturalSize(imgEl);
+        // The container/image may not be laid out or loaded yet: skip and retry on the next frame
+        if (!containerRect.width || !containerRect.height || !naturalSize) {
+            if (retriesLeft > 0) {
+                requestAnimationFrame(() => this._updateEditImageSize(swiperElement, retriesLeft - 1));
+            }
+            return;
+        }
+        // Compute the exact box (preserving the image's aspect ratio) that fits the available space,
+        // swapping width/height when rotated 90°/270° so the rotated visual box never overflows.
+        const swapped = this._rotation % 180 !== 0;
+        const availWidth = swapped ? containerRect.height : containerRect.width;
+        const availHeight = swapped ? containerRect.width : containerRect.height;
+        const ratio = Math.min(availWidth / naturalSize.width, availHeight / naturalSize.height);
+        imgEl.style.width = `${naturalSize.width * ratio}px`;
+        imgEl.style.height = `${naturalSize.height * ratio}px`;
+    }
+    _getImageNaturalSize(imgEl) {
+        const inner = (imgEl.tagName === 'ION-IMG' ? imgEl.shadowRoot?.querySelector('img') : imgEl);
+        if (!inner?.naturalWidth || !inner?.naturalHeight)
+            return null;
+        return { width: inner.naturalWidth, height: inner.naturalHeight };
+    }
+    // --- Crop overlay: drag to move/resize the crop rectangle ---
+    onCropPointerDown(event, swiperElement, handle) {
+        event.preventDefault();
+        event.stopPropagation();
+        const pt = this._getEventPoint(event);
+        this._cropOverlayRect = this._cropOverlayRect ?? this._updateCropOverlayPosition(swiperElement);
+        this._cropDragState = {
+            handle,
+            startX: pt.x,
+            startY: pt.y,
+            startRect: { ...this._cropRect },
+        };
+        // Also disable programmatic slide navigation while dragging (allowTouchMove is already
+        // permanently off whenever crop is enabled, see `_updateSwiperTouchMove`)
+        const swiper = this.getSwiper(swiperElement);
+        if (swiper) {
+            swiper.allowSlideNext = false;
+            swiper.allowSlidePrev = false;
+        }
+    }
+    onCropPointerMove(event, _swiperElement) {
+        if (!this._cropDragState)
+            return;
+        event.preventDefault();
+        const rect = this._cropOverlayRect;
+        if (!rect?.width || !rect?.height)
+            return;
+        const pt = this._getEventPoint(event);
+        const dx = (pt.x - this._cropDragState.startX) / rect.width;
+        const dy = (pt.y - this._cropDragState.startY) / rect.height;
+        this._cropRect = this._computeCropRect(this._cropDragState.handle, this._cropDragState.startRect, dx, dy);
+        this.markForCheck();
+    }
+    onCropPointerUp(_event, swiperElement) {
+        if (!this._cropDragState)
+            return;
+        this._cropDragState = null;
+        const swiper = swiperElement ? this.getSwiper(swiperElement) : null;
+        if (swiper) {
+            swiper.allowSlideNext = true;
+            swiper.allowSlidePrev = true;
+        }
+        if (swiperElement)
+            this._updateSwiperTouchMove(swiperElement);
+    }
+    _computeCropRect(handle, start, dx, dy) {
+        const MIN_SIZE = 0.08;
+        const clamp01 = (v) => Math.max(0, Math.min(1, v));
+        if (handle === 'move') {
+            let x = clamp01(start.x + dx);
+            let y = clamp01(start.y + dy);
+            x = Math.min(x, 1 - start.width);
+            y = Math.min(y, 1 - start.height);
+            return { x, y, width: start.width, height: start.height };
+        }
+        let left = start.x;
+        let top = start.y;
+        let right = start.x + start.width;
+        let bottom = start.y + start.height;
+        if (handle.includes('w'))
+            left = clamp01(start.x + dx);
+        if (handle.includes('e'))
+            right = clamp01(start.x + start.width + dx);
+        if (handle.includes('n'))
+            top = clamp01(start.y + dy);
+        if (handle.includes('s'))
+            bottom = clamp01(start.y + start.height + dy);
+        if (right - left < MIN_SIZE) {
+            if (handle.includes('w'))
+                left = right - MIN_SIZE;
+            else
+                right = left + MIN_SIZE;
+        }
+        if (bottom - top < MIN_SIZE) {
+            if (handle.includes('n'))
+                top = bottom - MIN_SIZE;
+            else
+                bottom = top + MIN_SIZE;
+        }
+        left = clamp01(left);
+        right = clamp01(right);
+        top = clamp01(top);
+        bottom = clamp01(bottom);
+        return { x: left, y: top, width: right - left, height: bottom - top };
+    }
+    _getEventPoint(event) {
+        if ('touches' in event && event.touches.length) {
+            return { x: event.touches[0].clientX, y: event.touches[0].clientY };
+        }
+        if ('changedTouches' in event && event.changedTouches.length) {
+            return { x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY };
+        }
+        const mouseEvent = event;
+        return { x: mouseEvent.clientX, y: mouseEvent.clientY };
+    }
+    _updateCropOverlayPosition(swiperElement, retriesLeft = 60) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return null;
+        const containerEl = activeSlide.querySelector('.swiper-zoom-container');
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        const overlayEl = activeSlide.querySelector('.crop-overlay');
+        if (!containerEl || !imgEl || !overlayEl)
+            return null;
+        const containerRect = containerEl.getBoundingClientRect();
+        const imgRect = imgEl.getBoundingClientRect();
+        // The image may not be laid out yet: keep any previous (non-zero) value and retry on the next frame
+        if (!imgRect.width || !imgRect.height) {
+            if (retriesLeft > 0) {
+                requestAnimationFrame(() => this._updateCropOverlayPosition(swiperElement, retriesLeft - 1));
+            }
+            return this._cropOverlayRect;
+        }
+        overlayEl.style.left = `${imgRect.left - containerRect.left}px`;
+        overlayEl.style.top = `${imgRect.top - containerRect.top}px`;
+        overlayEl.style.width = `${imgRect.width}px`;
+        overlayEl.style.height = `${imgRect.height}px`;
+        this._cropOverlayRect = { width: imgRect.width, height: imgRect.height };
+        return this._cropOverlayRect;
+    }
+    // --- Canvas rendering, used to export the cropped/rotated image ---
+    async _renderEditedImage(image, rotation, cropRect) {
+        const src = image.dataUrl || image.url;
+        const img = await this._loadImageElement(src);
+        const sw = img.naturalWidth;
+        const sh = img.naturalHeight;
+        const swapped = rotation % 180 !== 0;
+        const rw = swapped ? sh : sw;
+        const rh = swapped ? sw : sh;
+        // 1) Draw the full (uncropped) image, rotated
+        const rotCanvas = document.createElement('canvas');
+        rotCanvas.width = rw;
+        rotCanvas.height = rh;
+        const rctx = rotCanvas.getContext('2d');
+        rctx.translate(rw / 2, rh / 2);
+        rctx.rotate((rotation * Math.PI) / 180);
+        rctx.drawImage(img, -sw / 2, -sh / 2);
+        // 2) Crop the rotated image
+        const cropX = Math.round(cropRect.x * rw);
+        const cropY = Math.round(cropRect.y * rh);
+        const cropW = Math.max(1, Math.round(cropRect.width * rw));
+        const cropH = Math.max(1, Math.round(cropRect.height * rh));
+        const outCanvas = document.createElement('canvas');
+        outCanvas.width = cropW;
+        outCanvas.height = cropH;
+        outCanvas.getContext('2d').drawImage(rotCanvas, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
+        return outCanvas;
+    }
+    _loadImageElement(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            if (!src.startsWith('data:'))
+                img.crossOrigin = 'anonymous';
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error(`[image-gallery-slideshow] Cannot load image: ${src}`));
+            img.src = src;
+        });
+    }
+    // --- Mouse-wheel zoom & mouse-drag pan ---
+    onPointerDown(event, swiperElement) {
+        if (!this.mouseZoomEnabled || this._zoomState.scale <= 1)
+            return;
+        // Don't intercept clicks on buttons/controls
+        if (event.target.closest('ion-fab-button, ion-button, button'))
+            return;
+        event.preventDefault();
+        this._dragState = {
+            startX: event.clientX,
+            startY: event.clientY,
+            startTx: this._zoomState.tx,
+            startTy: this._zoomState.ty,
+        };
+        const wrapEl = this._getActiveZoomWrapEl(swiperElement);
+        if (wrapEl)
+            wrapEl.style.cursor = 'grabbing';
+        // Disable Swiper slide-change while dragging
+        const swiper = this.getSwiper(swiperElement);
+        if (swiper) {
+            swiper.allowSlideNext = false;
+            swiper.allowSlidePrev = false;
+        }
+    }
+    onPointerMove(event, swiperElement) {
+        if (this._cropDragState) {
+            this.onCropPointerMove(event, swiperElement);
+            return;
+        }
+        if (!this._dragState)
+            return;
+        event.preventDefault();
+        this._zoomState.tx = this._dragState.startTx + event.clientX - this._dragState.startX;
+        this._zoomState.ty = this._dragState.startTy + event.clientY - this._dragState.startY;
+        this._clampTranslations(swiperElement);
+        this._applyZoom(swiperElement);
+    }
+    onPointerUp(event, swiperElement) {
+        if (this._cropDragState) {
+            this.onCropPointerUp(event, swiperElement);
+            return;
+        }
+        if (!this._dragState)
+            return;
+        this._dragState = null;
+        const wrapEl = this._getActiveZoomWrapEl(swiperElement);
+        if (wrapEl)
+            wrapEl.style.cursor = this._zoomState.scale > 1 ? 'grab' : '';
+        // Re-enable Swiper navigation
+        const swiper = swiperElement ? this.getSwiper(swiperElement) : null;
+        if (swiper) {
+            swiper.allowSlideNext = true;
+            swiper.allowSlidePrev = true;
+        }
+    }
+    _resetZoom(swiperElement) {
+        this._zoomState = { scale: 1, tx: 0, ty: 0 };
+        this._dragState = null;
+        this._rotation = 0;
+        this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+        this._cropDragState = null;
+        this._cropToolActive = false;
+        if (swiperElement) {
+            this._applyZoom(swiperElement);
+            this._updateEditImageSize(swiperElement);
+        }
+    }
+    _setupWheelZoom(swiperElement) {
+        this._cleanupWheelZoom();
+        if (!this.mouseZoomEnabled)
+            return;
+        const el = swiperElement?.nativeElement ?? swiperElement;
+        if (!el)
+            return;
+        this._wheelListener = (event) => {
+            event.preventDefault();
+            const step = this.wheelZoomStep;
+            const oldScale = this._zoomState.scale;
+            const newScale = Math.max(1, Math.min(oldScale + (event.deltaY < 0 ? step : -step), this.maxZoomRatio));
+            if (newScale === oldScale)
+                return;
+            if (newScale === 1) {
+                this._zoomState = { scale: 1, tx: 0, ty: 0 };
+            }
+            else {
+                // Zoom towards cursor position
+                const swiper = this.getSwiper(el);
+                const activeSlide = swiper?.slides?.[swiper.activeIndex];
+                if (activeSlide) {
+                    const rect = activeSlide.getBoundingClientRect();
+                    const cx = event.clientX - rect.left - rect.width / 2;
+                    const cy = event.clientY - rect.top - rect.height / 2;
+                    this._zoomState.tx = cx - ((cx - this._zoomState.tx) * newScale) / oldScale;
+                    this._zoomState.ty = cy - ((cy - this._zoomState.ty) * newScale) / oldScale;
+                }
+                this._zoomState.scale = newScale;
+                this._clampTranslations(el);
+            }
+            this._applyZoom(el);
+        };
+        el.addEventListener('wheel', this._wheelListener, { passive: false });
+        this._wheelEl = el;
+    }
+    _cleanupWheelZoom() {
+        if (this._wheelEl && this._wheelListener) {
+            this._wheelEl.removeEventListener('wheel', this._wheelListener);
+        }
+        this._wheelEl = null;
+        this._wheelListener = null;
+    }
+    _applyZoom(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return;
+        const wrapEl = activeSlide.querySelector('.swiper-zoom-container');
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        if (!wrapEl || !imgEl)
+            return;
+        const { scale, tx, ty } = this._zoomState;
+        wrapEl.style.transitionDuration = '0ms';
+        wrapEl.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
+        imgEl.style.transitionDuration = '0ms';
+        imgEl.style.transform = `translate3d(0, 0, 0) scale(${scale}) rotate(${this._rotation}deg)`;
+        wrapEl.style.cursor = scale > 1 ? 'grab' : '';
+    }
+    _clampTranslations(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return;
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        if (!imgEl)
+            return;
+        const imgW = imgEl.offsetWidth || imgEl.clientWidth;
+        const imgH = imgEl.offsetHeight || imgEl.clientHeight;
+        if (!imgW || !imgH)
+            return;
+        const { scale } = this._zoomState;
+        const maxTx = Math.max(0, (imgW * scale - activeSlide.offsetWidth) / 2);
+        const maxTy = Math.max(0, (imgH * scale - activeSlide.offsetHeight) / 2);
+        this._zoomState.tx = Math.max(-maxTx, Math.min(maxTx, this._zoomState.tx));
+        this._zoomState.ty = Math.max(-maxTy, Math.min(maxTy, this._zoomState.ty));
+    }
+    _getActiveZoomWrapEl(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        return activeSlide?.querySelector('.swiper-zoom-container') ?? null;
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, deps: [{ token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: "selectedIndex", mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], mouseZoomEnabled: ["mouseZoomEnabled", "mouseZoomEnabled", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", rotationEnabled: ["rotationEnabled", "rotationEnabled", booleanAttribute], cropEnabled: ["cropEnabled", "cropEnabled", booleanAttribute], imageExportFormat: "imageExportFormat", imageExportQuality: "imageExportQuality", imageSizeQueryParam: "imageSizeQueryParam", modalImageSize: "modalImageSize" }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["slideshowSwiper"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, slideshowSwiper)\"\n  (mousemove)=\"onPointerMove($event, slideshowSwiper)\"\n  (mouseup)=\"onPointerUp($event, slideshowSwiper)\"\n  (mouseleave)=\"onPointerUp($event, slideshowSwiper)\"\n  (touchmove)=\"onCropPointerMove($event, slideshowSwiper)\"\n  (touchend)=\"onCropPointerUp($event, slideshowSwiper)\"\n  (touchcancel)=\"onCropPointerUp($event, slideshowSwiper)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && rotationEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && cropEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(slideshowSwiper)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(slideshowSwiper)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back -->\n  <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n    <div class=\"side-buttons prev\" (click)=\"slidePrev(slideshowSwiper)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" (click)=\"slideNext(slideshowSwiper)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  </ng-container>\n\n  <!-- image slides -->\n  <swiper-container\n    #slideshowSwiper\n    [modules]=\"swiperModules\"\n    [zoom]=\"!mouseZoomEnabled\"\n    (swiperslidechange)=\"onSlideChange(slideshowSwiper)\"\n    (swiperinit)=\"onSwiperInit(slideshowSwiper)\"\n  >\n    @for (row of rows; track row.id; let i = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\">\n          @if (image.url) {\n            <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n          } @else {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && cropEnabled && _cropToolActive && i === activeSlideIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <ion-button\n            *ngIf=\"!readOnly\"\n            (click)=\"requestDelete(slideshowSwiper)\"\n            [disabled]=\"disabled\"\n            fill=\"clear\"\n            color=\"danger\"\n          >\n            <mat-icon slot=\"start\">delete</mat-icon>\n            {{ 'COMMON.BTN_DELETE' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"6\" class=\"ion-text-start\">\n          <ion-button (click)=\"discardEdit(slideshowSwiper)\" color=\"medium\" fill=\"clear\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"6\" class=\"ion-text-end\">\n          <ion-button (click)=\"validateEdit(slideshowSwiper)\" color=\"tertiary\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, slideshowSwiper)\"\n  (mousemove)=\"onPointerMove($event, slideshowSwiper)\"\n  (mouseup)=\"onPointerUp($event, slideshowSwiper)\"\n  (mouseleave)=\"onPointerUp($event, slideshowSwiper)\"\n  (touchmove)=\"onCropPointerMove($event, slideshowSwiper)\"\n  (touchend)=\"onCropPointerUp($event, slideshowSwiper)\"\n  (touchcancel)=\"onCropPointerUp($event, slideshowSwiper)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && rotationEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && cropEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(slideshowSwiper)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(slideshowSwiper)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back -->\n  <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n    <div class=\"side-buttons prev\" (click)=\"slidePrev(slideshowSwiper)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" (click)=\"slideNext(slideshowSwiper)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  </ng-container>\n\n  <!-- image slides -->\n  <swiper-container\n    #slideshowSwiper\n    [modules]=\"swiperModules\"\n    [zoom]=\"!mouseZoomEnabled\"\n    (swiperslidechange)=\"onSlideChange(slideshowSwiper)\"\n    (swiperinit)=\"onSwiperInit(slideshowSwiper)\"\n  >\n    @for (row of rows; track row.id; let i = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\">\n          @if (image.url) {\n            <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n          } @else {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && cropEnabled && _cropToolActive && i === activeSlideIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <ion-button\n            *ngIf=\"!readOnly\"\n            (click)=\"requestDelete(slideshowSwiper)\"\n            [disabled]=\"disabled\"\n            fill=\"clear\"\n            color=\"danger\"\n          >\n            <mat-icon slot=\"start\">delete</mat-icon>\n            {{ 'COMMON.BTN_DELETE' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"6\" class=\"ion-text-start\">\n          <ion-button (click)=\"discardEdit(slideshowSwiper)\" color=\"medium\" fill=\"clear\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"6\" class=\"ion-text-end\">\n          <ion-button (click)=\"validateEdit(slideshowSwiper)\" color=\"tertiary\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { rows: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], mobile: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], debug: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], mouseZoomEnabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], wheelZoomStep: [{
+                type: Input
+            }], maxZoomRatio: [{
+                type: Input
+            }], rotationEnabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cropEnabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], imageExportFormat: [{
+                type: Input
+            }], imageExportQuality: [{
+                type: Input
+            }], imageSizeQueryParam: [{
+                type: Input
+            }], modalImageSize: [{
+                type: Input
+            }], deleteRequested: [{
+                type: Output
+            }], closeRequested: [{
+                type: Output
+            }], afterEditImage: [{
+                type: Output
+            }], afterEditRow: [{
+                type: Output
+            }], swiperRef: [{
+                type: ViewChild,
+                args: ['slideshowSwiper']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 class ImageService extends StartableService {
     platform;
     settings;
@@ -28434,10 +29129,13 @@ class AppImageGalleryComponent {
     _titleForm;
     _titleAutofocus = false;
     _slidesSubscription;
-    _swiper;
-    swiperModules = [IonicSlides];
     zoomActive = false;
     zoomScale = 1;
+    _mouseZoomEnabled = false;
+    _rotationEnabled = false;
+    _cropEnabled = false;
+    /** Whether the inline slideshow overlay is currently shown (only relevant when zoomPresentation === 'inline'). */
+    _inlineSlideshowActive = false;
     viewChange;
     cardColor;
     debug = null;
@@ -28462,6 +29160,24 @@ class AppImageGalleryComponent {
         modal: 'large',
     };
     imageSizeQueryParam = 'size';
+    /** Enable mouse-wheel zoom and mouse-drag pan in the slideshow (defaults to true on desktop). */
+    enableMouseZoom = null;
+    /** Zoom step applied on each mouse-wheel tick (default 0.3). */
+    wheelZoomStep = 0.3;
+    /** Maximum zoom ratio reachable via mouse wheel (default 3). */
+    maxZoomRatio = 3;
+    /** Enable 90° rotation buttons in the slideshow (defaults to true). */
+    enableRotation = null;
+    /** Enable the crop tool in the slideshow (defaults to true). */
+    enableCrop = null;
+    /** Image format used when emitting the edited (cropped/rotated) image. */
+    imageExportFormat = 'png';
+    /** Export quality, applied only when imageExportFormat is 'jpeg' (0 to 1). */
+    imageExportQuality = 0.92;
+    /** Where to show the slideshow: in a full-screen modal (default), or inline, as an overlay over the gallery itself (desktop only). */
+    zoomPresentation = 'inline';
+    /** Height of the inline slideshow overlay (CSS value, e.g. '60vh'). Only used when zoomPresentation is 'inline'. */
+    inlineZoomHeight = '60vh';
     set dataSource(dataSource) {
         if (this._dataSource !== dataSource) {
             this._switchDataSource(dataSource);
@@ -28479,15 +29195,12 @@ class AppImageGalleryComponent {
     get rowCount() {
         return this.rows?.length || 0;
     }
-    get activeIndex() {
-        return this.getSwiper()?.activeIndex || 0;
-    }
     zoomModal;
     titlePopover;
-    swiperRef;
     onBeforeDeleteRows = createPromiseEventEmitter();
     onAfterAddRows = new EventEmitter();
     onAfterEditRow = new EventEmitter();
+    onAfterEditImage = new EventEmitter();
     click = new EventEmitter();
     showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
     constructor(imageService, platform, alterCtrl, translate, cd, environment) {
@@ -28509,6 +29222,13 @@ class AppImageGalleryComponent {
         this.showAddCardButton = toBoolean(this.showAddCardButton, this.mobile);
         this.showFabButton = toBoolean(this.showFabButton, this.mobile && !this.showAddCardButton);
         this.showAddToolbarButton = this.showAddToolbarButton ?? (this.showToolbar && !this.readOnly);
+        this._mouseZoomEnabled = toBoolean(this.enableMouseZoom, !this.mobile);
+        this._rotationEnabled = toBoolean(this.enableRotation, true);
+        this._cropEnabled = toBoolean(this.enableCrop, true);
+        // The inline presentation is only meaningful on desktop: there is no "rest of the page" worth
+        // preserving on a small mobile screen, and the fullscreen modal already works well there.
+        if (this.mobile)
+            this.zoomPresentation = 'modal';
         // Get modal presenting element (iOS only)
         this._presentingElement = this.mobile ? document.querySelector('.ion-page') : null;
     }
@@ -28639,82 +29359,38 @@ class AppImageGalleryComponent {
         // Delegate click action
         if (this.click.observed) {
             this.click.emit(row.currentData);
+            return;
+        }
+        // By default, open the slideshow: either inline (overlay in the gallery itself), or in a full-screen modal
+        this._selectedRowIndex = index;
+        if (this.zoomPresentation === 'inline') {
+            this._inlineSlideshowActive = true;
+            this.markForCheck();
         }
-        // By default, open a zoom modal
         else {
-            this._selectedRowIndex = index;
             await this.zoomModal.present();
             await this.zoomModal.onDidDismiss();
         }
     }
-    activeSlideIndex = 0;
-    getSwiper(swiperElement) {
-        this._swiper = (swiperElement || this.swiperRef?.nativeElement)?.swiper || this._swiper;
-        return this._swiper;
-    }
-    onSlideChange(swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        this.activeSlideIndex = swiper.activeIndex;
+    closeInlineSlideshow() {
+        this._inlineSlideshowActive = false;
         this.markForCheck();
     }
-    initModalSlides(swiperElement) {
-        if (this._selectedRowIndex > 0) {
-            if (this.debug)
-                console.debug(`[image-gallery] Initializing modal, selectedRowIndex=${this._selectedRowIndex}`);
-            // Use a setTimeout otherwise the swiper cannot slide
-            setTimeout(() => {
-                const swiper = this.getSwiper(swiperElement);
-                swiper.slideTo(this._selectedRowIndex, 0);
-            });
-        }
-    }
-    async zoom(swiperElement, zoomIn) {
-        if (this.debug)
-            console.debug('[image-gallery] zoom ' + (zoomIn ? 'in' : 'out'), swiperElement);
-        const swiper = this.getSwiper(swiperElement);
-        const zoom = swiper.zoom;
-        if (zoomIn)
-            zoom.in();
-        else
-            zoom.out();
-    }
-    async deleteFromModal(event, swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
-        if (!currentRow)
-            return false; // Row not found
-        const deleted = await this.delete(event, currentRow);
-        if (this.rows.length === 0) {
-            await this.zoomModal.dismiss();
-        }
-        else {
-            // Reset the zoom
-            swiper.zoom.out();
-            swiper.update();
-            this.markForCheck();
-        }
-        return deleted;
-    }
-    async slidePrev(swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        const activeIndex = swiper.activeIndex;
-        if (activeIndex === 0) {
-            // Loop to last
-            await swiper.slideTo(this.rows.length - 1, 0 /*no transition, to avoid a "revert" effect*/);
-        }
-        else {
-            await swiper.slidePrev();
-        }
-    }
-    async slideNext(swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        const activeIndex = swiper.activeIndex;
-        if (activeIndex === this.rows.length - 1) {
-            // Loop to first
-            await swiper.slideTo(0, 0 /*no transition, to avoid a "revert" effect*/);
+    /**
+     * Handles a delete request coming from the slideshow component (either inline or in the modal):
+     * runs the same confirmation/deletion flow as a card's delete button, then resolves the promise
+     * so the slideshow knows whether to reset its zoom or close.
+     */
+    async onSlideshowDeleteRequested(promiseEvent) {
+        try {
+            const deleted = await this.delete(promiseEvent, promiseEvent.detail.row);
+            promiseEvent.detail.success(deleted);
+            if (deleted && this.rows.length === 0 && this.zoomPresentation === 'inline') {
+                this.closeInlineSlideshow();
+            }
         }
-        else {
-            await swiper.slideNext();
+        catch (err) {
+            promiseEvent.detail.error(err);
         }
     }
     async canDeleteRows(rows, opts) {
@@ -28753,11 +29429,11 @@ class AppImageGalleryComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i2$1.Platform }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", click: "click" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "swiperRef", first: true, predicate: ["modalSwiper"], descendants: true }], ngImport: i0, template: "<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container ion-padding-bottom {{ this.mode }}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\">\n      @let count = rows?.length || 0;\n      <!-- Counter  -->\n      <div class=\"top-left\">\n        <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        @if (!mobile) {\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n          </ion-fab-button>\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n          </ion-fab-button>\n        }\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n        <div class=\"side-buttons prev\" (click)=\"slidePrev(modalSwiper)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\" (click)=\"slideNext(modalSwiper)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <swiper-container\n        #modalSwiper\n        [modules]=\"swiperModules\"\n        [zoom]=\"true\"\n        (swiperslidechange)=\"onSlideChange(modalSwiper)\"\n        (swiperinit)=\"initModalSlides(modalSwiper)\"\n      >\n        @for (row of rows; track row.id; let last = $last) {\n          <swiper-slide>\n            @let image = row | propertyGet: 'currentData';\n            <div class=\"swiper-zoom-container\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams('modal')\" />\n              } @else {\n                <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n              }\n            </div>\n          </swiper-slide>\n        }\n      </swiper-container>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar color=\"light\">\n        <ion-row>\n          <ion-col size=\"4\" class=\"ion-text-start\">\n            <ion-button\n              *ngIf=\"!readOnly\"\n              (click)=\"deleteFromModal($event, modalSwiper)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\"></ion-col>\n          <ion-col size=\"4\" class=\"ion-text-end\">\n            <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n            <ng-template #desktop>\n              <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\">\n                {{ 'COMMON.BTN_CLOSE' | translate }}\n              </ion-button>\n            </ng-template>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal swiper-container{height:100%;background:#000}.zoom-modal ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotation: ["enableRotation", "enableRotation", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], imageExportFormat: "imageExportFormat", imageExportQuality: "imageExportQuality", zoomPresentation: "zoomPresentation", inlineZoomHeight: "inlineZoomHeight", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", click: "click" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }], ngImport: i0, template: "<ion-toolbar color=\"light\" class=\"gallery-toolbar\" *ngIf=\"showToolbar && !_inlineSlideshowActive\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"_inlineSlideshowActive\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"_inlineSlideshowActive\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (zoomPresentation === 'inline' && _inlineSlideshowActive) {\n    <app-image-gallery-slideshow\n      class=\"inline-overlay\"\n      @fadeInOutAnimation\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [debug]=\"debug\"\n      [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [rotationEnabled]=\"_rotationEnabled\"\n      [cropEnabled]=\"_cropEnabled\"\n      [imageExportFormat]=\"imageExportFormat\"\n      [imageExportQuality]=\"imageExportQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeInlineSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n@if (zoomPresentation === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [rotationEnabled]=\"_rotationEnabled\"\n        [cropEnabled]=\"_cropEnabled\"\n        [imageExportFormat]=\"imageExportFormat\"\n        [imageExportQuality]=\"imageExportQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"zoomModal.dismiss()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "mouseZoomEnabled", "wheelZoomStep", "maxZoomRatio", "rotationEnabled", "cropEnabled", "imageExportFormat", "imageExportQuality", "imageSizeQueryParam", "modalImageSize"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container ion-padding-bottom {{ this.mode }}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\">\n      @let count = rows?.length || 0;\n      <!-- Counter  -->\n      <div class=\"top-left\">\n        <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        @if (!mobile) {\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n          </ion-fab-button>\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n          </ion-fab-button>\n        }\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n        <div class=\"side-buttons prev\" (click)=\"slidePrev(modalSwiper)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\" (click)=\"slideNext(modalSwiper)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <swiper-container\n        #modalSwiper\n        [modules]=\"swiperModules\"\n        [zoom]=\"true\"\n        (swiperslidechange)=\"onSlideChange(modalSwiper)\"\n        (swiperinit)=\"initModalSlides(modalSwiper)\"\n      >\n        @for (row of rows; track row.id; let last = $last) {\n          <swiper-slide>\n            @let image = row | propertyGet: 'currentData';\n            <div class=\"swiper-zoom-container\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams('modal')\" />\n              } @else {\n                <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n              }\n            </div>\n          </swiper-slide>\n        }\n      </swiper-container>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar color=\"light\">\n        <ion-row>\n          <ion-col size=\"4\" class=\"ion-text-start\">\n            <ion-button\n              *ngIf=\"!readOnly\"\n              (click)=\"deleteFromModal($event, modalSwiper)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\"></ion-col>\n          <ion-col size=\"4\" class=\"ion-text-end\">\n            <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n            <ng-template #desktop>\n              <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\">\n                {{ 'COMMON.BTN_CLOSE' | translate }}\n              </ion-button>\n            </ng-template>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal swiper-container{height:100%;background:#000}.zoom-modal ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}\n"] }]
+            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toolbar color=\"light\" class=\"gallery-toolbar\" *ngIf=\"showToolbar && !_inlineSlideshowActive\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"_inlineSlideshowActive\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"_inlineSlideshowActive\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (zoomPresentation === 'inline' && _inlineSlideshowActive) {\n    <app-image-gallery-slideshow\n      class=\"inline-overlay\"\n      @fadeInOutAnimation\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [debug]=\"debug\"\n      [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [rotationEnabled]=\"_rotationEnabled\"\n      [cropEnabled]=\"_cropEnabled\"\n      [imageExportFormat]=\"imageExportFormat\"\n      [imageExportQuality]=\"imageExportQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeInlineSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n@if (zoomPresentation === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [rotationEnabled]=\"_rotationEnabled\"\n        [cropEnabled]=\"_cropEnabled\"\n        [imageExportFormat]=\"imageExportFormat\"\n        [imageExportQuality]=\"imageExportQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"zoomModal.dismiss()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
         }], ctorParameters: () => [{ type: ImageService }, { type: i2$1.Platform }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Optional
                 }, {
@@ -28812,6 +29488,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], imageSizeQueryParam: [{
                 type: Input
+            }], enableMouseZoom: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], wheelZoomStep: [{
+                type: Input
+            }], maxZoomRatio: [{
+                type: Input
+            }], enableRotation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], enableCrop: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], imageExportFormat: [{
+                type: Input
+            }], imageExportQuality: [{
+                type: Input
+            }], zoomPresentation: [{
+                type: Input
+            }], inlineZoomHeight: [{
+                type: Input
             }], dataSource: [{
                 type: Input
             }], zoomModal: [{
@@ -28820,15 +29517,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], titlePopover: [{
                 type: ViewChild,
                 args: ['titlePopover']
-            }], swiperRef: [{
-                type: ViewChild,
-                args: ['modalSwiper']
             }], onBeforeDeleteRows: [{
                 type: Output
             }], onAfterAddRows: [{
                 type: Output
             }], onAfterEditRow: [{
                 type: Output
+            }], onAfterEditImage: [{
+                type: Output
             }], click: [{
                 type: Output
             }] } });
@@ -28837,7 +29533,8 @@ class ImageGalleryModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ImageGalleryModule, declarations: [
             // Components
-            AppImageGalleryComponent], imports: [CommonModule,
+            AppImageGalleryComponent,
+            AppImageGallerySlideshowComponent], imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedMaterialModule,
@@ -28845,7 +29542,8 @@ class ImageGalleryModule {
             SharedDirectivesModule, i1$1.TranslateModule, RxStateModule], exports: [IonicModule,
             TranslateModule,
             // Components
-            AppImageGalleryComponent] });
+            AppImageGalleryComponent,
+            AppImageGallerySlideshowComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageGalleryModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
@@ -28873,12 +29571,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     declarations: [
                         // Components
                         AppImageGalleryComponent,
+                        AppImageGallerySlideshowComponent,
                     ],
                     exports: [
                         IonicModule,
                         TranslateModule,
                         // Components
                         AppImageGalleryComponent,
+                        AppImageGallerySlideshowComponent,
                     ],
                 }]
         }] });
@@ -38679,7 +39379,7 @@ class AppPropertiesForm extends AppForm {
         return isNil(obj?.key) || isNil(obj.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppPropertiesForm, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: PropertyValidator }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppPropertiesForm, selector: "app-properties-form", inputs: { showToolbar: ["showToolbar", "showToolbar", booleanAttribute], formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth", canDownload: ["canDownload", "canDownload", booleanAttribute], canImport: ["canImport", "canImport", booleanAttribute], showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions", importPolicy: "importPolicy" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar>\n    <div class=\"toolbar-spacer\"></div>\n\n    <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n      <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n      <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n    </ion-item>\n\n    <!-- options sub menu -->\n    @if (canDownload || canImport) {\n      <button\n        slot=\"end\"\n        mat-icon-button\n        [matMenuTriggerFor]=\"optionsMenu\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Download as CSV -->\n  @if (canDownload) {\n    <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n    </button>\n  }\n\n  <!-- Import from file -->\n  @if (canImport) {\n    <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n      <mat-icon>upload</mat-icon>\n      <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n  <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n    <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n  <!-- import from file -->\n  <button mat-menu-item (click)=\"importFromCsv($event)\">\n    <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n  </button>\n\n  <!-- import policy -->\n  <mat-divider></mat-divider>\n  <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n    <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n  <ng-template matMenuContent>\n    <!-- header-->\n    <ion-row class=\"mat-menu-header ion-no-padding column\">\n      <ion-col>\n        <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n      </ion-col>\n    </ion-row>\n    @for (policy of _importPolicies; track policy) {\n      <button mat-menu-item (click)=\"importPolicy = policy\">\n        <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n  @if (loadingSubject | async) {\n    <ion-list [inset]=\"mobile\">\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    </ion-list>\n  } @else {\n    <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n      <!-- Show more options -->\n      @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n        <ion-item lines=\"none\">\n          <ion-button\n            color=\"light\"\n            [title]=\"!showTooltip ? (addButtonTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (addButtonTitle | translate) : ''\"\n            (click)=\"_helper.add()\"\n          >\n            <ion-label>{{ addButtonText | translate }}</ion-label>\n            <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n          </ion-button>\n        </ion-item>\n      }\n\n      @for (fieldForm of fieldForms; track i; let i = $index) {\n        <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n              @let definition = getDefinitionAt(i);\n\n              <!-- property key -->\n              @if (fieldForm | formGetControl: 'key'; as control) {\n                <ion-col\n                  size=\"12\"\n                  size-sm=\"6\"\n                  [title]=\"!showTooltip ? ((definition | propertyGet: 'label' | translate) || '') : ''\"\n                  [matTooltip]=\"showTooltip ? ((definition | propertyGet: 'label' | translate) || '') : ''\"\n                  class=\"ion-no-padding\"\n                >\n                  <mat-autocomplete-field\n                    floatLabel=\"auto\"\n                    [formControl]=\"control\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n                    (selectionChange)=\"updateDefinitionAt(i)\"\n                    [tabindex]=\"tabindex + i * 2\"\n                    [config]=\"_autocompleteConfig\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n                    [required]=\"true\"\n                    (focus)=\"_focusedControlIndex = i\"\n                    [readonly]=\"definition?.disabled\"\n                    [mobile]=\"mobile\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  >\n                    <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n                      @let keyValue = control.value;\n                      {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n                    </mat-hint>\n                  </mat-autocomplete-field>\n                </ion-col>\n              }\n\n              <!-- property value -->\n              <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n                @if (definition) {\n                  <app-form-field\n                    floatLabel=\"auto\"\n                    [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"subscriptSizing\"\n                    [definition]=\"definition\"\n                    [formControl]=\"fieldForm | formGetControl: 'value'\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                    [chipColor]=\"chipColor\"\n                    [required]=\"true\"\n                    [hideRequiredMarker]=\"true\"\n                    [tabindex]=\"tabindex + i * 2 + 1\"\n                    [readonly]=\"definition?.disabled\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  ></app-form-field>\n                } @else {\n                  <!-- unknown definition -->\n                  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n                    @if (mobile) {\n                      <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n                    }\n                    <input\n                      type=\"text\"\n                      matInput\n                      [formControl]=\"fieldForm | formGetControl: 'value'\"\n                      [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n                      [required]=\"true\"\n                      [tabindex]=\"20 + i * 2 + 1\"\n                    />\n                  </mat-form-field>\n                }\n              </ion-col>\n\n              <ion-col size=\"auto\" class=\"ion-no-padding\">\n                @if (_helper.isLast(i)) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    color=\"light\"\n                    [disabled]=\"\n                      disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n                    \"\n                    [title]=\"!showTooltip ? ('SETTINGS.BTN_ADD_PROPERTY' | translate) : ''\"\n                    [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_ADD_PROPERTY' | translate) : ''\"\n                    (click)=\"_helper.add()\"\n                    [tabindex]=\"20 + i * 2 + 2\"\n                  >\n                    <mat-icon>add</mat-icon>\n                  </button>\n                }\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  color=\"light\"\n                  [disabled]=\"definition?.disabled || disabled\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  (click)=\"removeAt(i)\"\n                  [tabindex]=\"-1\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-item>\n      }\n    </ion-list>\n  }\n</form>\n\n<ng-template #propertyRowSkeleton>\n  <ion-item lines=\"none\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n        <!-- property key -->\n        <ion-col size=\"6\" class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n            <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n          </mat-form-field>\n        </ion-col>\n        <!-- value -->\n        <ion-col class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n          </mat-form-field>\n        </ion-col>\n        <!-- buttons -->\n        <ion-col size=\"auto\">\n          <button type=\"button\" mat-icon-button color=\"light\" disabled>\n            <mat-icon>close</mat-icon>\n          </button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showListHeader", "showListFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppPropertiesForm, selector: "app-properties-form", inputs: { showToolbar: ["showToolbar", "showToolbar", booleanAttribute], formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth", canDownload: ["canDownload", "canDownload", booleanAttribute], canImport: ["canImport", "canImport", booleanAttribute], showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions", importPolicy: "importPolicy" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar>\n    <div class=\"toolbar-spacer\"></div>\n\n    <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n      <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n      <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n    </ion-item>\n\n    <!-- options sub menu -->\n    @if (canDownload || canImport) {\n      <button\n        slot=\"end\"\n        mat-icon-button\n        [matMenuTriggerFor]=\"optionsMenu\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Download as CSV -->\n  @if (canDownload) {\n    <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n    </button>\n  }\n\n  <!-- Import from file -->\n  @if (canImport) {\n    <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n      <mat-icon>upload</mat-icon>\n      <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n  <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n    <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n  <!-- import from file -->\n  <button mat-menu-item (click)=\"importFromCsv($event)\">\n    <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n  </button>\n\n  <!-- import policy -->\n  <mat-divider></mat-divider>\n  <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n    <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n  </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n  <ng-template matMenuContent>\n    <!-- header-->\n    <ion-row class=\"mat-menu-header ion-no-padding column\">\n      <ion-col>\n        <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n      </ion-col>\n    </ion-row>\n    @for (policy of _importPolicies; track policy) {\n      <button mat-menu-item (click)=\"importPolicy = policy\">\n        <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n  @if (loadingSubject | async) {\n    <ion-list [inset]=\"mobile\">\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    </ion-list>\n  } @else {\n    <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n      <!-- Show more options -->\n      @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n        <ion-item lines=\"none\">\n          <ion-button\n            color=\"light\"\n            [title]=\"!showTooltip ? (addButtonTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (addButtonTitle | translate) : ''\"\n            (click)=\"_helper.add()\"\n          >\n            <ion-label>{{ addButtonText | translate }}</ion-label>\n            <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n          </ion-button>\n        </ion-item>\n      }\n\n      @for (fieldForm of fieldForms; track i; let i = $index) {\n        <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n              @let definition = getDefinitionAt(i);\n\n              <!-- property key -->\n              @if (fieldForm | formGetControl: 'key'; as control) {\n                <ion-col\n                  size=\"12\"\n                  size-sm=\"6\"\n                  [title]=\"!showTooltip ? ((definition | propertyGet: 'label' | translate) || '') : ''\"\n                  [matTooltip]=\"showTooltip ? ((definition | propertyGet: 'label' | translate) || '') : ''\"\n                  class=\"ion-no-padding\"\n                >\n                  <mat-autocomplete-field\n                    floatLabel=\"auto\"\n                    [formControl]=\"control\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n                    (selectionChange)=\"updateDefinitionAt(i)\"\n                    [tabindex]=\"tabindex + i * 2\"\n                    [config]=\"_autocompleteConfig\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n                    [required]=\"true\"\n                    (focus)=\"_focusedControlIndex = i\"\n                    [readonly]=\"definition?.disabled\"\n                    [mobile]=\"mobile\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  >\n                    <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n                      @let keyValue = control.value;\n                      {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n                    </mat-hint>\n                  </mat-autocomplete-field>\n                </ion-col>\n              }\n\n              <!-- property value -->\n              <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n                @if (definition) {\n                  <app-form-field\n                    floatLabel=\"auto\"\n                    [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"subscriptSizing\"\n                    [definition]=\"definition\"\n                    [formControl]=\"fieldForm | formGetControl: 'value'\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                    [chipColor]=\"chipColor\"\n                    [required]=\"true\"\n                    [hideRequiredMarker]=\"true\"\n                    [tabindex]=\"tabindex + i * 2 + 1\"\n                    [readonly]=\"definition?.disabled\"\n                    [panelClass]=\"panelClass\"\n                    [panelWidth]=\"panelWidth\"\n                  ></app-form-field>\n                } @else {\n                  <!-- unknown definition -->\n                  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n                    @if (mobile) {\n                      <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n                    }\n                    <input\n                      type=\"text\"\n                      matInput\n                      [formControl]=\"fieldForm | formGetControl: 'value'\"\n                      [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n                      [required]=\"true\"\n                      [tabindex]=\"20 + i * 2 + 1\"\n                    />\n                  </mat-form-field>\n                }\n              </ion-col>\n\n              <ion-col size=\"auto\" class=\"ion-no-padding\">\n                @if (_helper.isLast(i)) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    color=\"light\"\n                    [disabled]=\"\n                      disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n                    \"\n                    [title]=\"!showTooltip ? ('SETTINGS.BTN_ADD_PROPERTY' | translate) : ''\"\n                    [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_ADD_PROPERTY' | translate) : ''\"\n                    (click)=\"_helper.add()\"\n                    [tabindex]=\"20 + i * 2 + 2\"\n                  >\n                    <mat-icon>add</mat-icon>\n                  </button>\n                }\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  color=\"light\"\n                  [disabled]=\"definition?.disabled || disabled\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  (click)=\"removeAt(i)\"\n                  [tabindex]=\"-1\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-item>\n      }\n    </ion-list>\n  }\n</form>\n\n<ng-template #propertyRowSkeleton>\n  <ion-item lines=\"none\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n        <!-- property key -->\n        <ion-col size=\"6\" class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n            <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n          </mat-form-field>\n        </ion-col>\n        <!-- value -->\n        <ion-col class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n          </mat-form-field>\n        </ion-col>\n        <!-- buttons -->\n        <ion-col size=\"auto\">\n          <button type=\"button\" mat-icon-button color=\"light\" disabled>\n            <mat-icon>close</mat-icon>\n          </button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showPanelHeader", "showPanelFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppPropertiesForm, decorators: [{
             type: Component,
@@ -49850,11 +50550,11 @@ class AutocompleteTestPage {
         return JSON.stringify(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <!-- Autocomplete medium panel class - see issue sumaris-app#943\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        class=\"min-width-medium\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  placeholder=\"With panel class\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  panelClass=\"min-width-medium\"\n                  [mobile]=\"false\"\n                  [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n                  [showAllOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- Autocomplete with button\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col> -->\n\n          <!--<ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- showAllOnFocus + required + NO searchbar\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"2\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\n                <mat-option value=\"entity-$items\">Observable</mat-option>\n                <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"1\" class=\"ion-no-padding\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <!-- using suggestFn (and favorites) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">suggestFn</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[], favoriteItems: 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                  [favoriteItems]=\"_favoriteItems\"\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          <!-- Far items (not in the first page) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [favoriteItems]=\"_favoriteFarItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far item (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\">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                  [placeholder]=\"'Item from observable'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-observable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                  [debug]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre></pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-filter]'\"\n                      ></mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items')\"\n                        [placeholder]=\"'Entity'\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <!-- Using suggestFn (and favorites) -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">suggestFn</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\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          <!-- Using service -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\n                  [config]=\"autocompleteFields.get('entity-items')\"\n                  [logPrefix]=\"'[combo-desktop-array-1]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [logPrefix]=\"'[combo-desktop-2]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Header & Footer</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>showHeaderList: false</pre></small>\n                    <small><pre>showFooterList: false</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [showListHeader]=\"false\"\n                  [showListFooter]=\"false\"\n                  [logPrefix]=\"'[combo-desktop-header]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Custom Header & Footer</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>ng-template #listHeaderTemplate</pre></small>\n                    <small><pre>ng-template #listFooterTemplate</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-header]'\"\n                >\n                  <ng-template #listHeaderTemplate let-itemCount=\"itemCount\">\n                    <ion-row\n                      class=\"mat-autocomplete-header column custom-list-header\"\n                      (mousedown)=\"$event.preventDefault()\"\n                    >\n                      <ion-col class=\"ion-padding-end\">\n                        @if (itemCount; as count) {\n                          <ion-text class=\"ion-float-start\">\n                            <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                          </ion-text>\n                        }\n                        <div class=\"ion-float-end div-toggle\">\n                          <span>Custom Header</span>\n                          <mat-slide-toggle\n                            class=\"autocomplete-toggle\"\n                            labelPosition=\"before\"\n                            [hideIcon]=\"true\"\n                          ></mat-slide-toggle>\n                        </div>\n                      </ion-col>\n                    </ion-row>\n                  </ng-template>\n                  <ng-template #listFooterTemplate>\n                    <div class=\"custom-footer-list\">\n                      <span>Custom Footer</span>\n                    </div>\n                  </ng-template>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-missing]'\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [panelClass]=\"'full-size'\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-disable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-readonly]'\"\n                  [readonly]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelWidth: string</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [placeholder]=\"'Filtered field'\"\n                        [mobile]=\"false\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", styles: [".custom-list-header{height:30px!important;display:flex;align-items:center}.div-toggle{color:#fff;font-family:Roboto,Helvetica,Arial,sans-serif;float:right;display:flex;align-items:center}.mat-mdc-slide-toggle.autocomplete-toggle{transform:scale(.8);--mdc-switch-selected-track-color: #fd96b9;--mdc-switch-selected-hover-track-color: #fd96b9;--mdc-switch-selected-focus-track-color: #fd96b9;--mdc-switch-selected-pressed-track-color: #fd96b9;--mdc-switch-unselected-track-color: #9b9b9b;--mdc-switch-unselected-hover-track-color: #9b9b9b;--mdc-switch-unselected-focus-track-color: #9b9b9b;--mdc-switch-unselected-pressed-track-color: #9b9b9b;--mdc-switch-selected-hover-handle-color: #ff4081;--mdc-switch-selected-pressed-handle-color: #ff4081;--mdc-switch-selected-handle-color: #ff4081;--mdc-switch-unselected-hover-handle-color: #ffffff;--mdc-switch-unselected-pressed-handle-color: #ffffff;--mdc-switch-unselected-handle-color: #ffffff}.custom-list-footer{color:#3a7be0;display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i12$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showListHeader", "showListFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <!-- Autocomplete medium panel class - see issue sumaris-app#943\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        class=\"min-width-medium\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  placeholder=\"With panel class\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  panelClass=\"min-width-medium\"\n                  [mobile]=\"false\"\n                  [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n                  [showAllOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- Autocomplete with button\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col> -->\n\n          <!--<ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- showAllOnFocus + required + NO searchbar\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"2\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\n                <mat-option value=\"entity-$items\">Observable</mat-option>\n                <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"1\" class=\"ion-no-padding\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <!-- using suggestFn (and favorites) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">suggestFn</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[], favoriteItems: 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                  [favoriteItems]=\"_favoriteItems\"\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          <!-- Far items (not in the first page) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [favoriteItems]=\"_favoriteFarItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far item (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\">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                  [placeholder]=\"'Item from observable'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-observable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                  [debug]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre></pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-filter]'\"\n                      ></mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items')\"\n                        [placeholder]=\"'Entity'\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <!-- Using suggestFn (and favorites) -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">suggestFn</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\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          <!-- Using service -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\n                  [config]=\"autocompleteFields.get('entity-items')\"\n                  [logPrefix]=\"'[combo-desktop-array-1]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [logPrefix]=\"'[combo-desktop-2]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Hide Header & ooter</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>showPanelHeader: false</pre></small>\n                    <small><pre>showPanelFooter: false</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [showPanelHeader]=\"false\"\n                  [showPanelFooter]=\"false\"\n                  [logPrefix]=\"'[combo-desktop-no-header]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Custom Header & Footer</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>ng-template panelHeader</pre></small>\n                    <small><pre>ng-template panelFooter</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-custom-header]'\"\n                  style=\"--header-column-top: 30px; --footer-bottom: 20px;\"\n                >\n                  <ng-template panelHeader let-itemCount=\"itemCount\">\n                    <ion-row\n                      class=\"mat-autocomplete-header sticky custom-header\"\n                      (mousedown)=\"$event.preventDefault()\"\n                    >\n                      <ion-col class=\"ion-padding-end\">\n                        @if (itemCount; as count) {\n                          <ion-text class=\"ion-float-start\">\n                            <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                          </ion-text>\n                        }\n                        <div class=\"ion-float-end div-toggle\">\n                          <span>Custom Header</span>\n\n                          <mat-slide-toggle\n                            class=\"autocomplete-toggle\"\n                            labelPosition=\"before\"\n                            [hideIcon]=\"true\"\n                          ></mat-slide-toggle>\n                        </div>\n                      </ion-col>\n                    </ion-row>\n                  </ng-template>\n                  <ng-template panelFooter>\n                    <ion-row class=\"mat-autocomplete-footer sticky custom-footer\">\n                      <ion-col>Custom Footer</ion-col>\n                    </ion-row>\n                  </ng-template>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-missing]'\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [panelClass]=\"'full-size'\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-disable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-readonly]'\"\n                  [readonly]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelWidth: string</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [placeholder]=\"'Filtered field'\"\n                        [mobile]=\"false\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", styles: [".div-toggle{color:#fff;font-family:Roboto,Helvetica,Arial,sans-serif;float:right;display:flex;align-items:center}.mat-mdc-slide-toggle.autocomplete-toggle{transform:scale(.8);--mdc-switch-selected-track-color: #fd96b9;--mdc-switch-selected-hover-track-color: #fd96b9;--mdc-switch-selected-focus-track-color: #fd96b9;--mdc-switch-selected-pressed-track-color: #fd96b9;--mdc-switch-unselected-track-color: #9b9b9b;--mdc-switch-unselected-hover-track-color: #9b9b9b;--mdc-switch-unselected-focus-track-color: #9b9b9b;--mdc-switch-unselected-pressed-track-color: #9b9b9b;--mdc-switch-selected-hover-handle-color: #ff4081;--mdc-switch-selected-pressed-handle-color: #ff4081;--mdc-switch-selected-handle-color: #ff4081;--mdc-switch-unselected-hover-handle-color: #ffffff;--mdc-switch-unselected-pressed-handle-color: #ffffff;--mdc-switch-unselected-handle-color: #ffffff}.custom-header{height:30px!important;display:flex;align-items:center;background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast);line-height:20px;font-size:12px;font-weight:500;border-bottom:1px solid rgba(var(--ion-text-color-rgb),.12)}.custom-footer{color:#3a7be0;display:flex;justify-content:center;--footer-bottom: 0}\n"], dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i12$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showPanelHeader", "showPanelFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "directive", type: MaterialAutocompleteHeaderDirective, selector: "ng-template[panelHeader]" }, { kind: "directive", type: MaterialAutocompleteFooterDirective, selector: "ng-template[panelFooter]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <!-- Autocomplete medium panel class - see issue sumaris-app#943\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        class=\"min-width-medium\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  placeholder=\"With panel class\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  panelClass=\"min-width-medium\"\n                  [mobile]=\"false\"\n                  [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n                  [showAllOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- Autocomplete with button\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col> -->\n\n          <!--<ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- showAllOnFocus + required + NO searchbar\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"2\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\n                <mat-option value=\"entity-$items\">Observable</mat-option>\n                <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"1\" class=\"ion-no-padding\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <!-- using suggestFn (and favorites) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">suggestFn</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[], favoriteItems: 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                  [favoriteItems]=\"_favoriteItems\"\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          <!-- Far items (not in the first page) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [favoriteItems]=\"_favoriteFarItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far item (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\">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                  [placeholder]=\"'Item from observable'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-observable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                  [debug]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre></pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-filter]'\"\n                      ></mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items')\"\n                        [placeholder]=\"'Entity'\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <!-- Using suggestFn (and favorites) -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">suggestFn</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\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          <!-- Using service -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\n                  [config]=\"autocompleteFields.get('entity-items')\"\n                  [logPrefix]=\"'[combo-desktop-array-1]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [logPrefix]=\"'[combo-desktop-2]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Header & Footer</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>showHeaderList: false</pre></small>\n                    <small><pre>showFooterList: false</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [showListHeader]=\"false\"\n                  [showListFooter]=\"false\"\n                  [logPrefix]=\"'[combo-desktop-header]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Custom Header & Footer</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>ng-template #listHeaderTemplate</pre></small>\n                    <small><pre>ng-template #listFooterTemplate</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-header]'\"\n                >\n                  <ng-template #listHeaderTemplate let-itemCount=\"itemCount\">\n                    <ion-row\n                      class=\"mat-autocomplete-header column custom-list-header\"\n                      (mousedown)=\"$event.preventDefault()\"\n                    >\n                      <ion-col class=\"ion-padding-end\">\n                        @if (itemCount; as count) {\n                          <ion-text class=\"ion-float-start\">\n                            <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                          </ion-text>\n                        }\n                        <div class=\"ion-float-end div-toggle\">\n                          <span>Custom Header</span>\n                          <mat-slide-toggle\n                            class=\"autocomplete-toggle\"\n                            labelPosition=\"before\"\n                            [hideIcon]=\"true\"\n                          ></mat-slide-toggle>\n                        </div>\n                      </ion-col>\n                    </ion-row>\n                  </ng-template>\n                  <ng-template #listFooterTemplate>\n                    <div class=\"custom-footer-list\">\n                      <span>Custom Footer</span>\n                    </div>\n                  </ng-template>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-missing]'\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [panelClass]=\"'full-size'\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-disable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-readonly]'\"\n                  [readonly]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelWidth: string</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [placeholder]=\"'Filtered field'\"\n                        [mobile]=\"false\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", styles: [".custom-list-header{height:30px!important;display:flex;align-items:center}.div-toggle{color:#fff;font-family:Roboto,Helvetica,Arial,sans-serif;float:right;display:flex;align-items:center}.mat-mdc-slide-toggle.autocomplete-toggle{transform:scale(.8);--mdc-switch-selected-track-color: #fd96b9;--mdc-switch-selected-hover-track-color: #fd96b9;--mdc-switch-selected-focus-track-color: #fd96b9;--mdc-switch-selected-pressed-track-color: #fd96b9;--mdc-switch-unselected-track-color: #9b9b9b;--mdc-switch-unselected-hover-track-color: #9b9b9b;--mdc-switch-unselected-focus-track-color: #9b9b9b;--mdc-switch-unselected-pressed-track-color: #9b9b9b;--mdc-switch-selected-hover-handle-color: #ff4081;--mdc-switch-selected-pressed-handle-color: #ff4081;--mdc-switch-selected-handle-color: #ff4081;--mdc-switch-unselected-hover-handle-color: #ffffff;--mdc-switch-unselected-pressed-handle-color: #ffffff;--mdc-switch-unselected-handle-color: #ffffff}.custom-list-footer{color:#3a7be0;display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'app-autocomplete-test', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'temp') {\n      <ion-grid>\n        <ion-row>\n          <!-- Autocomplete medium panel class - see issue sumaris-app#943\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        class=\"min-width-medium\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  placeholder=\"With panel class\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  panelClass=\"min-width-medium\"\n                  [mobile]=\"false\"\n                  [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n                  [showAllOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- Autocomplete with button\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  placeholder=\"With button\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-temp-with-button]'\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  [clearInvalidValueOnBlur]=\"true\"\n                  [reloadItemsOnFocus]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [selectInputContentOnFocus]=\"true\"\n                  [debug]=\"true\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col> -->\n\n          <!--<ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                >\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n\n          <!-- showAllOnFocus + required + NO searchbar\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [placeholder]=\"'Entity'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [debug]=\"true\"\n                  [mobile]=\"true\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                  showSearchBar=\"true\"\n                  [showAllOnFocus]=\"false\"\n                >\n                  <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>-->\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"2\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Items type</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-select\n                (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n                [value]=\"memoryAutocompleteFieldName\"\n              >\n                <mat-option value=\"entity-$items\">Observable</mat-option>\n                <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"1\" class=\"ion-no-padding\">\n            <mat-form-field floatLabel=\"always\">\n              <mat-label>Mobile ?</mat-label>\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col size=\"2\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n            }\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            @if (!memoryHide && memoryAutocompleteFieldName) {\n              <span>OK {{ memoryHide }}</span>\n              <mat-autocomplete-field\n                formControlName=\"entity\"\n                [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                [mobile]=\"memoryMobile\"\n                [equals]=\"equals\"\n                [logPrefix]=\"'[combo-memory-leak]'\"\n              ></mat-autocomplete-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <!-- using suggestFn (and favorites) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">suggestFn</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[], favoriteItems: 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                  [favoriteItems]=\"_favoriteItems\"\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          <!-- Far items (not in the first page) -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.farEntity.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"farEntity\"\n                  #farEntityField\n                  [config]=\"autocompleteFields.get('entity-far')\"\n                  [favoriteItems]=\"_favoriteFarItems\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-far]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"Far item (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\">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                  [placeholder]=\"'Item from observable'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-observable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  showSearchBar=\"false\"\n                  showAllOnFocus=\"true\"\n                  [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n                  [required]=\"true\"\n                  placeholder=\"No search bar\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                          suggest: (value, filter) => LoadResult&lt;any&gt;\n                          suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Entity'\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                  [required]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"true\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-multiple]'\"\n                  [debug]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-2]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">In modal</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n                <ion-modal>\n                  <ng-template>\n                    <ion-header>\n                      <ion-toolbar>\n                        <ion-title>Modal with embed auto complete field</ion-title>\n                        <ion-buttons slot=\"end\">\n                          <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                        </ion-buttons>\n                      </ion-toolbar>\n                    </ion-header>\n                    <ion-content class=\"ion-padding\">\n                      <div class=\"form-container\">\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [logPrefix]=\"'[combo-mobile-modal]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                        <ion-card>\n                          <ion-card-content>\n                            <mat-autocomplete-field\n                              formControlName=\"entity\"\n                              [tabindex]=\"10000\"\n                              [config]=\"autocompleteFields.get('entity-items-filter')\"\n                              [mobile]=\"true\"\n                              [equals]=\"equals\"\n                              [suggestLengthThreshold]=\"3\"\n                              [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                              [required]=\"true\"\n                              placeholder=\"Suggest field\"\n                            ></mat-autocomplete-field>\n                          </ion-card-content>\n                        </ion-card>\n                      </div>\n                    </ion-content>\n                  </ng-template>\n                </ion-modal>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Change filter</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre></pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n                        Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n                      </ion-button>\n                    </ion-col>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        formControlName=\"entity\"\n                        #filterChangeField\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-filter]'\"\n                      ></mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [panelWidth]=\"'500px'\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n                        >\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  [matAutocompletePosition]=\"'auto'\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items')\"\n                        [placeholder]=\"'Entity'\"\n                        [mobile]=\"true\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-mobile-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint matHint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                      or\n                      <pre>panelWidth: '100vw'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"true\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-mobile-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Autocomplete with button</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre style=\"white-space: normal !important\">\n                        value: {{ stringify(form.controls.withButton.value) }}</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"withButton\"\n                  [config]=\"autocompleteFields.get('entity-with-button')\"\n                  [mobile]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-mobile-with-button]'\"\n                  [debug]=\"true\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                  placeholder=\"With button\"\n                >\n                  <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n                    <mat-icon>filter_list_alt</mat-icon>\n                  </button>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <!-- Using suggestFn (and favorites) -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">suggestFn</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\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          <!-- Using service -->\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Service</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-service]'\"\n                  [debug]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"contract\"></ion-icon>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                            suggest: (value, filter) => LoadResult&lt;any&gt;\n                            suggestLengthThreshold: '3'</pre\n                      >\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"emptyEntity\"\n                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                  [placeholder]=\"'Filtered field'\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [suggestLengthThreshold]=\"3\"\n                  [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an array</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from array'\"\n                  [config]=\"autocompleteFields.get('entity-items')\"\n                  [logPrefix]=\"'[combo-desktop-array-1]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Items is an Observable</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Item from observable'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [logPrefix]=\"'[combo-desktop-2]'\"\n                  [equals]=\"equals\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Multiple value</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>multiple: true</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entities\"\n                  [config]=\"autocompleteFields.get('entities-items-filter')\"\n                  [placeholder]=\"'Multiple'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"true\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-multiple]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Hide Header & ooter</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>showPanelHeader: false</pre></small>\n                    <small><pre>showPanelFooter: false</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [showPanelHeader]=\"false\"\n                  [showPanelFooter]=\"false\"\n                  [logPrefix]=\"'[combo-desktop-no-header]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Custom Header & Footer</ion-text>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>ng-template panelHeader</pre></small>\n                    <small><pre>ng-template panelFooter</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('entities-items-filter')\"\n                  [placeholder]=\"'Header'\"\n                  [mobile]=\"false\"\n                  [multiple]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-custom-header]'\"\n                  style=\"--header-column-top: 30px; --footer-bottom: 20px;\"\n                >\n                  <ng-template panelHeader let-itemCount=\"itemCount\">\n                    <ion-row\n                      class=\"mat-autocomplete-header sticky custom-header\"\n                      (mousedown)=\"$event.preventDefault()\"\n                    >\n                      <ion-col class=\"ion-padding-end\">\n                        @if (itemCount; as count) {\n                          <ion-text class=\"ion-float-start\">\n                            <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>\n                          </ion-text>\n                        }\n                        <div class=\"ion-float-end div-toggle\">\n                          <span>Custom Header</span>\n\n                          <mat-slide-toggle\n                            class=\"autocomplete-toggle\"\n                            labelPosition=\"before\"\n                            [hideIcon]=\"true\"\n                          ></mat-slide-toggle>\n                        </div>\n                      </ion-col>\n                    </ion-row>\n                  </ng-template>\n                  <ng-template panelFooter>\n                    <ion-row class=\"mat-autocomplete-footer sticky custom-footer\">\n                      <ion-col>Custom Footer</ion-col>\n                    </ion-row>\n                  </ng-template>\n                </mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Control value if missing in items</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>items: Observable&lt;any[]&gt;</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"missingEntity\"\n                  [placeholder]=\"'Missing item'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-missing]'\"\n                  [mobile]=\"false\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size panel</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelClass: 'full-size'</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [panelClass]=\"'full-size'\"\n                  [matAutocompletePosition]=\"'above'\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                  [debug]=\"true\"\n                  [showAllOnFocus]=\"true\"\n                  [showPanelOnFocus]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disabled control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"disableEntity\"\n                  [placeholder]=\"'Disable field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-disable]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly control</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Readonly field'\"\n                  [config]=\"autocompleteFields.get('entity-$items')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-readonly]'\"\n                  [readonly]=\"true\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"9\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Full size combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass: 'full-size'</pre>\n                        or\n                        <pre>panelWidth: '100vw'</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Full size panel'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelClass=\"full-size\"\n                  panelWidth=\"100vw\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-full-size]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Large combo</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelWidth: string</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fixed panel width (500px)'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  panelWidth=\"500px\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-large]'\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"3\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Fit content</ion-label>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  formControlName=\"entity\"\n                  [placeholder]=\"'Fit content'\"\n                  [config]=\"autocompleteFields.get('entity-items-large')\"\n                  [mobile]=\"false\"\n                  [equals]=\"equals\"\n                  [logPrefix]=\"'[combo-desktop-panelClass]'\"\n                  panelClass=\"mat-select-panel-fit-content\"\n                ></mat-autocomplete-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col size=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-text color=\"primary\">Readonly toggle</ion-text>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"readonlyField.readonly = $event.checked\"\n                        [checked]=\"readonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-autocomplete-field\n                        #readonlyField\n                        formControlName=\"entity\"\n                        [config]=\"autocompleteFields.get('entity-items-filter')\"\n                        [placeholder]=\"'Filtered field'\"\n                        [mobile]=\"false\"\n                        [equals]=\"equals\"\n                        [logPrefix]=\"'[combo-desktop-readonly]'\"\n                        [readonly]=\"true\"\n                        [clearable]=\"!readonlyField.readonly\"\n                      >\n                        @if (showIcons2.checked) {\n                          <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                        }\n                        @if (showIcons2.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-autocomplete-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", styles: [".div-toggle{color:#fff;font-family:Roboto,Helvetica,Arial,sans-serif;float:right;display:flex;align-items:center}.mat-mdc-slide-toggle.autocomplete-toggle{transform:scale(.8);--mdc-switch-selected-track-color: #fd96b9;--mdc-switch-selected-hover-track-color: #fd96b9;--mdc-switch-selected-focus-track-color: #fd96b9;--mdc-switch-selected-pressed-track-color: #fd96b9;--mdc-switch-unselected-track-color: #9b9b9b;--mdc-switch-unselected-hover-track-color: #9b9b9b;--mdc-switch-unselected-focus-track-color: #9b9b9b;--mdc-switch-unselected-pressed-track-color: #9b9b9b;--mdc-switch-selected-hover-handle-color: #ff4081;--mdc-switch-selected-pressed-handle-color: #ff4081;--mdc-switch-selected-handle-color: #ff4081;--mdc-switch-unselected-hover-handle-color: #ffffff;--mdc-switch-unselected-pressed-handle-color: #ffffff;--mdc-switch-unselected-handle-color: #ffffff}.custom-header{height:30px!important;display:flex;align-items:center;background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast);line-height:20px;font-size:12px;font-weight:500;border-bottom:1px solid rgba(var(--ion-text-color-rgb),.12)}.custom-footer{color:#3a7be0;display:flex;justify-content:center;--footer-bottom: 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { farEntityField: [{
                 type: ViewChild,
                 args: ['farEntityField']
@@ -51144,16 +51844,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class GalleryTestPage {
     dataService;
+    route;
     _subscription = new Subscription();
     dataSource;
-    constructor(dataService) {
+    zoomPresentation = 'modal';
+    debug = false;
+    constructor(dataService, route) {
         this.dataService = dataService;
+        this.route = route;
         this.dataSource = new EntitiesTableDataSource(ImageAttachment, this.dataService, null, {
             saveBeforeDelete: true,
             saveOnlyDirtyRows: false,
         });
+        this.debug = this.route.snapshot.queryParamMap.get('debug') === 'true';
     }
     ngOnInit() {
+        this.zoomPresentation = this.route.snapshot.queryParamMap.get('zoomPresentation') || 'modal';
         this._subscription.add(this.dataSource.watchAll(0, 100, null, null, null).subscribe());
     }
     ngOnDestroy() {
@@ -51162,13 +51868,13 @@ class GalleryTestPage {
     save() {
         this.dataSource.save();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GalleryTestPage, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], 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>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  <app-debug title=\"Galley\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "imageSizes", "imageSizeQueryParam", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "click"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }, { token: i1$7.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GalleryTestPage, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], 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>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [zoomPresentation]=\"zoomPresentation\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "imageSizes", "imageSizeQueryParam", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotation", "enableCrop", "imageExportFormat", "imageExportQuality", "zoomPresentation", "inlineZoomHeight", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "click"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GalleryTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gallery-test-page', providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], 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>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  <app-debug title=\"Galley\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n  ></app-image-gallery>\n</ion-content>\n" }]
-        }], ctorParameters: () => [{ type: ImageAttachmentService }] });
+            args: [{ selector: 'app-gallery-test-page', providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], 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>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [zoomPresentation]=\"zoomPresentation\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n" }]
+        }], ctorParameters: () => [{ type: ImageAttachmentService }, { type: i1$7.ActivatedRoute }] });
 
 const routes$8 = [
     {
@@ -52127,7 +52833,7 @@ class Table2TestPage extends AppAsyncTable {
                 provide: APP_CELL_SELECTION_SERVICE_TOKEN,
                 useClass: CellSelectionService,
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n      appCellSelection\n      [appSelectableColumns]=\"selectableColumns\"\n      [appCellSelectionDisabled]=\"invalid\"\n      (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n      (appCellRightClick)=\"onCellRightClick($event)\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label\n              [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n            >\n              {{ 'TABLE.TESTING.NAME' | translate }}\n            </ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'name'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n        >\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:60px;width:60px}.table-container .mat-mdc-table .mat-column-id{width:90px;min-width:90px;max-width:90px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px;width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px;width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px;width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i13$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showListHeader", "showListFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "directive", type: CellSelectionDirective, selector: "[appCellSelection]", inputs: ["appSelectableColumns", "appCellSelectionDisabled"], outputs: ["appCellSelectionChange", "appCellRightClick"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n      appCellSelection\n      [appSelectableColumns]=\"selectableColumns\"\n      [appCellSelectionDisabled]=\"invalid\"\n      (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n      (appCellRightClick)=\"onCellRightClick($event)\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label\n              [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n            >\n              {{ 'TABLE.TESTING.NAME' | translate }}\n            </ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'name'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n        >\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:60px;width:60px}.table-container .mat-mdc-table .mat-column-id{width:90px;min-width:90px;max-width:90px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px;width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px;width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px;width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i13$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showPanelHeader", "showPanelFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "directive", type: CellSelectionDirective, selector: "[appCellSelection]", inputs: ["appSelectableColumns", "appCellSelectionDisabled"], outputs: ["appCellSelectionChange", "appCellRightClick"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Table2TestPage, decorators: [{
             type: Component,
@@ -52418,7 +53124,7 @@ class TableTestPage extends AppTable {
                 provide: APP_CELL_SELECTION_SERVICE_TOKEN,
                 useValue: null, // Disable cell selection if this table is nested (ex: NestedTableTestPage)
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'label'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'label' }\"\n        >\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTooltip>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [type]=\"'latitude'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{\n                row.validator\n                  | formGetValue: 'properties.latitude'\n                  | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' }\n              }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions column -->\n      <app-nav-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        [cellTemplate]=\"cellInjection\"\n        [showPending]=\"true\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-nav-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: "directive", type: i13$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showListHeader", "showListFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "class", "style", "hourMinWidth", "hourMaxWidth", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: ["appTable", "matColumnDef", "style", "stickyEnd", "showPending", "dirtyIcon", "optionsTitle", "class", "cellTemplate", "throttleTime"], outputs: ["optionsClick"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'label'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'label' }\"\n        >\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTooltip>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [type]=\"'latitude'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{\n                row.validator\n                  | formGetValue: 'properties.latitude'\n                  | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' }\n              }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions column -->\n      <app-nav-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        [cellTemplate]=\"cellInjection\"\n        [showPending]=\"true\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-nav-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.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: "directive", type: i13$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showPanelHeader", "showPanelFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "class", "style", "hourMinWidth", "hourMaxWidth", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: NavActionsColumnComponent, selector: "app-nav-actions-column", inputs: ["appTable", "matColumnDef", "style", "stickyEnd", "showPending", "dirtyIcon", "optionsTitle", "class", "cellTemplate", "throttleTime"], outputs: ["optionsClick"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -52677,7 +53383,7 @@ class NestedTableTestPage extends AppAsyncTable {
                 provide: APP_CELL_SELECTION_SERVICE_TOKEN,
                 useClass: CellSelectionService,
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-wrap: nowrap; width: 100%; height: 100%\">\n  <div style=\"flex: 0 0 50%; box-sizing: border-box\">\n    <app-toolbar\n      color=\"primary\"\n      [canGoBack]=\"true\"\n      [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n      (onValidate)=\"save()\"\n      [backHref]=\"'/testing'\"\n    >\n      <ion-title>Table with cell selection</ion-title>\n\n      <ion-buttons slot=\"end\">\n        @if (selection | isEmptySelection) {\n          <mat-label>\n            {{ showTable2 ? 'With 2nd table with cell selection' : 'With 2nd table without cell selection' }}\n          </mat-label>\n          <mat-checkbox [(ngModel)]=\"showTable2\"></mat-checkbox>\n\n          <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n          <!-- Add -->\n          <button\n            mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n            (click)=\"addRow()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- reset filter -->\n          <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n            <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n            <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n          </button>\n\n          <!-- show filter -->\n          <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n            <mat-icon\n              *ngIf=\"filterCriteriaCount; else emptyFilter\"\n              [matBadge]=\"filterCriteriaCount\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n              aria-hidden=\"false\"\n            >\n              filter_list_alt\n            </mat-icon>\n            <ng-template #emptyFilter>\n              <mat-icon>filter_list_alt</mat-icon>\n            </ng-template>\n          </button>\n\n          <!-- save -->\n          <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n            <mat-icon>save</mat-icon>\n          </button>\n        } @else {\n          <!-- if row selection -->\n          <!-- delete -->\n          <button\n            mat-icon-button\n            *ngIf=\"canEdit\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n            (click)=\"deleteSelection($event)\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n\n          <!-- duplicate -->\n          <button\n            mat-icon-button\n            *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n            (click)=\"duplicateRow($event, selection.selected[0])\"\n          >\n            <mat-icon>file_copy</mat-icon>\n          </button>\n        }\n      </ion-buttons>\n    </app-toolbar>\n    <ion-content class=\"ion-no-padding\">\n      <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n        <ion-refresher-content></ion-refresher-content>\n      </ion-refresher>\n\n      <!-- error -->\n      <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- search -->\n      <mat-expansion-panel\n        #filterExpansionPanel\n        class=\"filter-panel\"\n        [class.filter-panel-floating]=\"filterPanelFloating\"\n        [class.filter-panel-pinned]=\"!filterPanelFloating\"\n      >\n        <form\n          class=\"form-container ion-padding-top\"\n          [formGroup]=\"filterForm\"\n          (ngSubmit)=\"applyFilterAndClosePanel($event)\"\n        >\n          <ion-grid>\n            <ion-row>\n              <ion-col>\n                <!-- search text -->\n                <mat-form-field>\n                  <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n                  <ion-icon matPrefix name=\"search\"></ion-icon>\n                  <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    tabindex=\"-1\"\n                    type=\"button\"\n                    (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                    [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n                  >\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </mat-form-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </form>\n\n        <mat-action-row>\n          <!-- Counter  -->\n          <ion-label\n            [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n            [color]=\"empty && 'danger'\"\n            class=\"ion-padding\"\n          >\n            {{\n              (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n                | translate\n                  : {\n                      count: (totalRowCount | numberFormat),\n                    }\n            }}\n          </ion-label>\n\n          <div class=\"toolbar-spacer\"></div>\n\n          <button\n            mat-icon-button\n            color=\"accent\"\n            *ngIf=\"filterPanelFloating\"\n            (click)=\"toggleFilterPanelFloating()\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n            [matTooltip]=\"\n              showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n            </mat-icon>\n          </button>\n\n          <!-- Close panel -->\n          <ion-button\n            mat-button\n            fill=\"clear\"\n            color=\"dark\"\n            (click)=\"closeFilterPanel()\"\n            [disabled]=\"loadingSubject | async\"\n          >\n            <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n          </ion-button>\n\n          <!-- Search button -->\n          <ion-button\n            mat-button\n            [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n            [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n            (click)=\"applyFilterAndClosePanel($event)\"\n          >\n            <ion-text translate>COMMON.BTN_APPLY</ion-text>\n          </ion-button>\n        </mat-action-row>\n      </mat-expansion-panel>\n\n      <!-- table -->\n      <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n        <table\n          #table\n          mat-table\n          matSort\n          matSortDisableClear\n          [dataSource]=\"dataSource\"\n          [matSortActive]=\"defaultSortBy\"\n          [matSortDirection]=\"defaultSortDirection\"\n          [trackBy]=\"trackByFn\"\n          [style.--mat-row-height]=\"rowHeight + 'px'\"\n          appCellSelection\n          [appSelectableColumns]=\"selectableColumns\"\n          [appCellSelectionDisabled]=\"invalid\"\n          (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n          (appCellRightClick)=\"onCellRightClick($event)\"\n        >\n          <ng-container\n            matColumnDef=\"select\"\n            [sticky]=\"checkBoxSelection\"\n            [class.mat-column-sticky]=\"checkBoxSelection\"\n          >\n            <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n              @if (selection | isMultipleSelection) {\n                <mat-checkbox\n                  [checked]=\"this | isAllSelected\"\n                  [indeterminate]=\"this | isNotAllSelected\"\n                  (change)=\"$event ? masterToggle() : null\"\n                ></mat-checkbox>\n              }\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n              <mat-checkbox\n                [checked]=\"selection | isSelected: row\"\n                (click)=\"toggleSelectRow($event, row)\"\n              ></mat-checkbox>\n            </td>\n          </ng-container>\n\n          <!-- Id column -->\n          <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n            <th mat-header-cell *matHeaderCellDef>\n              <span mat-sort-header>\n                <ion-label title=\"Id\">#</ion-label>\n                <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n              <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  required\n                  [formControl]=\"row.validator | formGetControl: 'id'\"\n                  placeholder=\"Id\"\n                  [appAutofocus]=\"true\"\n                />\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n                  ERROR.FIELD_NOT_UNIQUE_ID\n                </mat-error>\n              </mat-form-field>\n\n              <ng-template #readOnlyId>\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <!-- Name column -->\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label\n                  [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n                >\n                  {{ 'TABLE.TESTING.NAME' | translate }}\n                </ion-label>\n                <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n              </span>\n            </th>\n            <td\n              mat-cell\n              *matCellDef=\"let row\"\n              (click)=\"focusColumn = 'name'\"\n              [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n            >\n              <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  [required]=\"true\"\n                  [formControl]=\"row.validator | formGetControl: 'name'\"\n                  [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                  [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n                />\n                <ng-content select=\"[suffix]\"></ng-content>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n                  ERROR.FIELD_MAX_LENGTH_COMPACT\n                </mat-error>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n                  ERROR.FIELD_MIN_LENGTH_COMPACT\n                </mat-error>\n              </mat-form-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <!-- Level column -->\n          <ng-container matColumnDef=\"levelId\">\n            <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n              <span mat-sort-header>\n                <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n                <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n              <mat-autocomplete-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                panelWidth=\"750px\"\n                [formControl]=\"row.validator | formGetControl: 'levelId'\"\n                [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n                floatLabel=\"never\"\n                [required]=\"true\"\n                [config]=\"autocompleteFields.level\"\n                [highlightAccent]=\"true\"\n              >\n                <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n                  ERROR.FIELD_INVALID\n                </mat-error>\n              </mat-autocomplete-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    autocompleteFields.level?.displayWith(\n                      (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    ) ||\n                      ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                        | referentialToString)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"boolean\">\n            <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label>Boolean</ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n              <mat-boolean-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                floatLabel=\"never\"\n                [style]=\"'checkbox'\"\n                [formControl]=\"\n                  (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n                \"\n                [compact]=\"true\"\n              ></mat-boolean-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                      ? ('COMMON.YES' | translate)\n                      : ('COMMON.NO' | translate)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"boolean2\">\n            <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label>Boolean 2</ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n              <mat-boolean-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                [floatLabel]=\"'never'\"\n                [style]=\"'radio'\"\n                [showRadio]=\"true\"\n                [formControl]=\"\n                  (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n                \"\n              ></mat-boolean-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                      ? ('COMMON.YES' | translate)\n                      : ('COMMON.NO' | translate)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"boolean3\">\n            <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label>Boolean 3</ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-boolean-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                floatLabel=\"never\"\n                [style]=\"'button'\"\n                [formControl]=\"\n                  (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n                \"\n              ></mat-boolean-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                      ? ('COMMON.YES' | translate)\n                      : ('COMMON.NO' | translate)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <!-- Actions buttons column -->\n          <app-actions-column\n            [stickyEnd]=\"stickyEnd\"\n            [canCancel]=\"false\"\n            [style]=\"'table'\"\n            (optionsClick)=\"openSelectColumnsModal($event)\"\n            (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n            (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n            (backward)=\"confirmAndBackward($event.event, $event.row)\"\n            (forward)=\"confirmAndForward($event.event, $event.row)\"\n            [cellTemplate]=\"cellInjection\"\n          >\n            <!-- cell injection-->\n            <ng-template #cellInjection let-row>\n              <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n            </ng-template>\n          </app-actions-column>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns\"\n            [class.mat-row-selected]=\"row.editing\"\n            [class.mat-row-error]=\"row.invalid\"\n            [class.mat-row-disabled]=\"!row.editing\"\n            [class.mat-row-dirty]=\"row.dirty\"\n            (click)=\"clickRow($event, row)\"\n            (keydown.escape)=\"escapeEditingRow($event)\"\n            [cdkTrapFocus]=\"row.invalid\"\n          ></tr>\n        </table>\n\n        <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n          <ion-item>\n            <ion-skeleton-text animated></ion-skeleton-text>\n          </ion-item>\n        </ng-container>\n\n        <ng-template #noResult>\n          <ion-item *ngIf=\"totalRowCount === 0\">\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        </ng-template>\n\n        <ion-infinite-scroll\n          *ngIf=\"enableInfiniteScroll\"\n          [threshold]=\"mobile ? '10%' : '2%'\"\n          position=\"bottom\"\n          (ionInfinite)=\"fetchMore($event)\"\n        >\n          <ion-infinite-scroll-content\n            loadingSpinner=\"circles\"\n            [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n          ></ion-infinite-scroll-content>\n        </ion-infinite-scroll>\n      </div>\n    </ion-content>\n    <ion-footer>\n      <!-- Paginator  -->\n      <mat-paginator\n        *ngIf=\"!enableInfiniteScroll\"\n        [length]=\"totalRowCount\"\n        [pageSize]=\"defaultPageSize\"\n        [pageSizeOptions]=\"defaultPageSizeOptions\"\n        showFirstLastButtons\n      ></mat-paginator>\n\n      <app-form-buttons-bar\n        *ngIf=\"canEdit && !mobile\"\n        (onCancel)=\"load()\"\n        (onSave)=\"save()\"\n        [disabled]=\"(loadingSubject | async) || !dirty\"\n      >\n        <!-- error -->\n        <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </app-form-buttons-bar>\n    </ion-footer>\n    <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n      <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n        <ion-icon name=\"add\"></ion-icon>\n      </ion-fab-button>\n    </ion-fab>\n  </div>\n  <div style=\"flex: 0 0 50%; box-sizing: border-box\">\n    @if (showTable2) {\n      <app-table2-testing></app-table2-testing>\n    } @else {\n      <app-table-testing></app-table-testing>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i13$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showListHeader", "showListFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "directive", type: CellSelectionDirective, selector: "[appCellSelection]", inputs: ["appSelectableColumns", "appCellSelectionDisabled"], outputs: ["appCellSelectionChange", "appCellRightClick"] }, { kind: "component", type: TableTestPage, selector: "app-table-testing", inputs: ["filterPanelFloating", "enableInfiniteScroll", "sticky", "stickyEnd"] }, { kind: "component", type: Table2TestPage, selector: "app-table2-testing", inputs: ["filterPanelFloating", "sticky", "stickyEnd"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-wrap: nowrap; width: 100%; height: 100%\">\n  <div style=\"flex: 0 0 50%; box-sizing: border-box\">\n    <app-toolbar\n      color=\"primary\"\n      [canGoBack]=\"true\"\n      [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n      (onValidate)=\"save()\"\n      [backHref]=\"'/testing'\"\n    >\n      <ion-title>Table with cell selection</ion-title>\n\n      <ion-buttons slot=\"end\">\n        @if (selection | isEmptySelection) {\n          <mat-label>\n            {{ showTable2 ? 'With 2nd table with cell selection' : 'With 2nd table without cell selection' }}\n          </mat-label>\n          <mat-checkbox [(ngModel)]=\"showTable2\"></mat-checkbox>\n\n          <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n          <!-- Add -->\n          <button\n            mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n            (click)=\"addRow()\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- reset filter -->\n          <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n            <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n            <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n          </button>\n\n          <!-- show filter -->\n          <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n            <mat-icon\n              *ngIf=\"filterCriteriaCount; else emptyFilter\"\n              [matBadge]=\"filterCriteriaCount\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n              aria-hidden=\"false\"\n            >\n              filter_list_alt\n            </mat-icon>\n            <ng-template #emptyFilter>\n              <mat-icon>filter_list_alt</mat-icon>\n            </ng-template>\n          </button>\n\n          <!-- save -->\n          <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n            <mat-icon>save</mat-icon>\n          </button>\n        } @else {\n          <!-- if row selection -->\n          <!-- delete -->\n          <button\n            mat-icon-button\n            *ngIf=\"canEdit\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n            (click)=\"deleteSelection($event)\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n\n          <!-- duplicate -->\n          <button\n            mat-icon-button\n            *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n            (click)=\"duplicateRow($event, selection.selected[0])\"\n          >\n            <mat-icon>file_copy</mat-icon>\n          </button>\n        }\n      </ion-buttons>\n    </app-toolbar>\n    <ion-content class=\"ion-no-padding\">\n      <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n        <ion-refresher-content></ion-refresher-content>\n      </ion-refresher>\n\n      <!-- error -->\n      <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- search -->\n      <mat-expansion-panel\n        #filterExpansionPanel\n        class=\"filter-panel\"\n        [class.filter-panel-floating]=\"filterPanelFloating\"\n        [class.filter-panel-pinned]=\"!filterPanelFloating\"\n      >\n        <form\n          class=\"form-container ion-padding-top\"\n          [formGroup]=\"filterForm\"\n          (ngSubmit)=\"applyFilterAndClosePanel($event)\"\n        >\n          <ion-grid>\n            <ion-row>\n              <ion-col>\n                <!-- search text -->\n                <mat-form-field>\n                  <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n                  <ion-icon matPrefix name=\"search\"></ion-icon>\n                  <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    tabindex=\"-1\"\n                    type=\"button\"\n                    (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                    [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n                  >\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </mat-form-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </form>\n\n        <mat-action-row>\n          <!-- Counter  -->\n          <ion-label\n            [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n            [color]=\"empty && 'danger'\"\n            class=\"ion-padding\"\n          >\n            {{\n              (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n                | translate\n                  : {\n                      count: (totalRowCount | numberFormat),\n                    }\n            }}\n          </ion-label>\n\n          <div class=\"toolbar-spacer\"></div>\n\n          <button\n            mat-icon-button\n            color=\"accent\"\n            *ngIf=\"filterPanelFloating\"\n            (click)=\"toggleFilterPanelFloating()\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n            [matTooltip]=\"\n              showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n            </mat-icon>\n          </button>\n\n          <!-- Close panel -->\n          <ion-button\n            mat-button\n            fill=\"clear\"\n            color=\"dark\"\n            (click)=\"closeFilterPanel()\"\n            [disabled]=\"loadingSubject | async\"\n          >\n            <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n          </ion-button>\n\n          <!-- Search button -->\n          <ion-button\n            mat-button\n            [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n            [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n            (click)=\"applyFilterAndClosePanel($event)\"\n          >\n            <ion-text translate>COMMON.BTN_APPLY</ion-text>\n          </ion-button>\n        </mat-action-row>\n      </mat-expansion-panel>\n\n      <!-- table -->\n      <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n        <table\n          #table\n          mat-table\n          matSort\n          matSortDisableClear\n          [dataSource]=\"dataSource\"\n          [matSortActive]=\"defaultSortBy\"\n          [matSortDirection]=\"defaultSortDirection\"\n          [trackBy]=\"trackByFn\"\n          [style.--mat-row-height]=\"rowHeight + 'px'\"\n          appCellSelection\n          [appSelectableColumns]=\"selectableColumns\"\n          [appCellSelectionDisabled]=\"invalid\"\n          (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n          (appCellRightClick)=\"onCellRightClick($event)\"\n        >\n          <ng-container\n            matColumnDef=\"select\"\n            [sticky]=\"checkBoxSelection\"\n            [class.mat-column-sticky]=\"checkBoxSelection\"\n          >\n            <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n              @if (selection | isMultipleSelection) {\n                <mat-checkbox\n                  [checked]=\"this | isAllSelected\"\n                  [indeterminate]=\"this | isNotAllSelected\"\n                  (change)=\"$event ? masterToggle() : null\"\n                ></mat-checkbox>\n              }\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n              <mat-checkbox\n                [checked]=\"selection | isSelected: row\"\n                (click)=\"toggleSelectRow($event, row)\"\n              ></mat-checkbox>\n            </td>\n          </ng-container>\n\n          <!-- Id column -->\n          <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n            <th mat-header-cell *matHeaderCellDef>\n              <span mat-sort-header>\n                <ion-label title=\"Id\">#</ion-label>\n                <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n              <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  required\n                  [formControl]=\"row.validator | formGetControl: 'id'\"\n                  placeholder=\"Id\"\n                  [appAutofocus]=\"true\"\n                />\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n                  ERROR.FIELD_NOT_UNIQUE_ID\n                </mat-error>\n              </mat-form-field>\n\n              <ng-template #readOnlyId>\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <!-- Name column -->\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label\n                  [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n                >\n                  {{ 'TABLE.TESTING.NAME' | translate }}\n                </ion-label>\n                <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n              </span>\n            </th>\n            <td\n              mat-cell\n              *matCellDef=\"let row\"\n              (click)=\"focusColumn = 'name'\"\n              [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n            >\n              <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  [required]=\"true\"\n                  [formControl]=\"row.validator | formGetControl: 'name'\"\n                  [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                  [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n                />\n                <ng-content select=\"[suffix]\"></ng-content>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n                  ERROR.FIELD_MAX_LENGTH_COMPACT\n                </mat-error>\n                <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n                  ERROR.FIELD_MIN_LENGTH_COMPACT\n                </mat-error>\n              </mat-form-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <!-- Level column -->\n          <ng-container matColumnDef=\"levelId\">\n            <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n              <span mat-sort-header>\n                <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n                <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n              <mat-autocomplete-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                panelWidth=\"750px\"\n                [formControl]=\"row.validator | formGetControl: 'levelId'\"\n                [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n                floatLabel=\"never\"\n                [required]=\"true\"\n                [config]=\"autocompleteFields.level\"\n                [highlightAccent]=\"true\"\n              >\n                <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n                  ERROR.FIELD_INVALID\n                </mat-error>\n              </mat-autocomplete-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    autocompleteFields.level?.displayWith(\n                      (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    ) ||\n                      ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                        | referentialToString)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"boolean\">\n            <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label>Boolean</ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n              <mat-boolean-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                floatLabel=\"never\"\n                [style]=\"'checkbox'\"\n                [formControl]=\"\n                  (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n                \"\n                [compact]=\"true\"\n              ></mat-boolean-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                      ? ('COMMON.YES' | translate)\n                      : ('COMMON.NO' | translate)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"boolean2\">\n            <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label>Boolean 2</ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n              <mat-boolean-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                [floatLabel]=\"'never'\"\n                [style]=\"'radio'\"\n                [showRadio]=\"true\"\n                [formControl]=\"\n                  (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n                \"\n              ></mat-boolean-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                      ? ('COMMON.YES' | translate)\n                      : ('COMMON.NO' | translate)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"boolean3\">\n            <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n              <!-- if sortable, wrap the header with a mat-sort-header -->\n              <span mat-sort-header>\n                <ion-label>Boolean 3</ion-label>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\">\n              <mat-boolean-field\n                *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n                floatLabel=\"never\"\n                [style]=\"'button'\"\n                [formControl]=\"\n                  (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n                \"\n              ></mat-boolean-field>\n              <ng-template #readOnlyTemplate>\n                <ion-label appAutoTooltip>\n                  {{\n                    (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                      ? ('COMMON.YES' | translate)\n                      : ('COMMON.NO' | translate)\n                  }}\n                </ion-label>\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <!-- Actions buttons column -->\n          <app-actions-column\n            [stickyEnd]=\"stickyEnd\"\n            [canCancel]=\"false\"\n            [style]=\"'table'\"\n            (optionsClick)=\"openSelectColumnsModal($event)\"\n            (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n            (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n            (backward)=\"confirmAndBackward($event.event, $event.row)\"\n            (forward)=\"confirmAndForward($event.event, $event.row)\"\n            [cellTemplate]=\"cellInjection\"\n          >\n            <!-- cell injection-->\n            <ng-template #cellInjection let-row>\n              <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n            </ng-template>\n          </app-actions-column>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns\"\n            [class.mat-row-selected]=\"row.editing\"\n            [class.mat-row-error]=\"row.invalid\"\n            [class.mat-row-disabled]=\"!row.editing\"\n            [class.mat-row-dirty]=\"row.dirty\"\n            (click)=\"clickRow($event, row)\"\n            (keydown.escape)=\"escapeEditingRow($event)\"\n            [cdkTrapFocus]=\"row.invalid\"\n          ></tr>\n        </table>\n\n        <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n          <ion-item>\n            <ion-skeleton-text animated></ion-skeleton-text>\n          </ion-item>\n        </ng-container>\n\n        <ng-template #noResult>\n          <ion-item *ngIf=\"totalRowCount === 0\">\n            <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n          </ion-item>\n        </ng-template>\n\n        <ion-infinite-scroll\n          *ngIf=\"enableInfiniteScroll\"\n          [threshold]=\"mobile ? '10%' : '2%'\"\n          position=\"bottom\"\n          (ionInfinite)=\"fetchMore($event)\"\n        >\n          <ion-infinite-scroll-content\n            loadingSpinner=\"circles\"\n            [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n          ></ion-infinite-scroll-content>\n        </ion-infinite-scroll>\n      </div>\n    </ion-content>\n    <ion-footer>\n      <!-- Paginator  -->\n      <mat-paginator\n        *ngIf=\"!enableInfiniteScroll\"\n        [length]=\"totalRowCount\"\n        [pageSize]=\"defaultPageSize\"\n        [pageSizeOptions]=\"defaultPageSizeOptions\"\n        showFirstLastButtons\n      ></mat-paginator>\n\n      <app-form-buttons-bar\n        *ngIf=\"canEdit && !mobile\"\n        (onCancel)=\"load()\"\n        (onSave)=\"save()\"\n        [disabled]=\"(loadingSubject | async) || !dirty\"\n      >\n        <!-- error -->\n        <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </app-form-buttons-bar>\n    </ion-footer>\n    <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n      <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n        <ion-icon name=\"add\"></ion-icon>\n      </ion-fab-button>\n    </ion-fab>\n  </div>\n  <div style=\"flex: 0 0 50%; box-sizing: border-box\">\n    @if (showTable2) {\n      <app-table2-testing></app-table2-testing>\n    } @else {\n      <app-table-testing></app-table-testing>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i13$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "showPanelHeader", "showPanelFooter", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "directive", type: CellSelectionDirective, selector: "[appCellSelection]", inputs: ["appSelectableColumns", "appCellSelectionDisabled"], outputs: ["appCellSelectionChange", "appCellRightClick"] }, { kind: "component", type: TableTestPage, selector: "app-table-testing", inputs: ["filterPanelFloating", "enableInfiniteScroll", "sticky", "stickyEnd"] }, { kind: "component", type: Table2TestPage, selector: "app-table2-testing", inputs: ["filterPanelFloating", "sticky", "stickyEnd"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NestedTableTestPage, decorators: [{
             type: Component,
@@ -53906,5 +54612,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSelectUsersModal, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextFormModule, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, UsersUtils, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, decorateWithTakeUntil, deepMergeSkipUndefined, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppImageGallerySlideshowComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSelectUsersModal, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextFormModule, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialAutocompleteFooterDirective, MaterialAutocompleteHeaderDirective, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, UsersUtils, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, decorateWithTakeUntil, deepMergeSkipUndefined, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map