@sumaris-net/ngx-components 21.4.4 → 21.4.6

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

@@ -4,10 +4,10 @@ import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isO
 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';
 import * as i2$3 from '@angular/common';
-import { CommonModule, Location, APP_BASE_HREF, LocationStrategy, NgIf, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule, Location, APP_BASE_HREF, LocationStrategy, DOCUMENT as DOCUMENT$1, NgIf, AsyncPipe, JsonPipe } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
 import * as i1$4 from '@angular/cdk/a11y';
-import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
+import { A11yModule, InteractivityChecker, FocusMonitor } from '@angular/cdk/a11y';
 import { OverlayModule, FullscreenOverlayContainer, OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2$1 from '@angular/material/core';
@@ -234,8 +234,10 @@ class Environment {
     changelogUrl;
     forumUrl; // TODO allow a map by locale ? ex: { [lang: string]: string };
     helpUrl; // TODO allow a map by locale ?
-    privacyPolicyUrl; // TODO allow a map by locale ?
-    termsOfUseUrl; // TODO allow a map by locale ?
+    // Legal URLs: either a single URL, or a map by locale (e.g. { 'fr': ..., 'en': ... }).
+    // Locale resolution is done by `resolveLocaleUrl()`, see src/app/shared/functions.ts
+    privacyPolicyUrl;
+    termsOfUseUrl;
     // Default authentication /!\ For DEV only
     // (see values in the test database - XML files in Pod's module)
     defaultAuthValues;
@@ -973,6 +975,42 @@ function capitalizeFirstLetter(value) {
         return value;
     return value.charAt(0).toUpperCase() + value.substring(1);
 }
+/**
+ * Resolve a value that can be defined either as a single string, or as a map by locale
+ * (e.g. `privacyPolicyUrl` in the environment).
+ *
+ * When a map is given, the resolution order is:
+ * 1. the exact locale key (e.g. `fr-FR`);
+ * 2. the language only, extracted from the locale (e.g. `fr`);
+ * 3. the given default locale.
+ *
+ * Blank values are ignored at each step. Returns `undefined` when nothing matches.
+ */
+function resolveLocaleUrl(value, locale, defaultLocale) {
+    if (!value)
+        return undefined;
+    // Simple value: no locale resolution needed
+    if (typeof value === 'string')
+        return isNotNilOrBlank(value) ? value.trim() : undefined;
+    // Build the ordered list of candidate keys
+    const candidateLocales = [];
+    const currentLocale = isNotNilOrBlank(locale) ? locale.trim() : undefined;
+    if (currentLocale) {
+        candidateLocales.push(currentLocale);
+        const language = currentLocale.split('-')[0];
+        if (language && !candidateLocales.includes(language))
+            candidateLocales.push(language);
+    }
+    const fallbackLocale = isNotNilOrBlank(defaultLocale) ? defaultLocale.trim() : undefined;
+    if (fallbackLocale && !candidateLocales.includes(fallbackLocale))
+        candidateLocales.push(fallbackLocale);
+    for (const candidate of candidateLocales) {
+        const url = value[candidate];
+        if (isNotNilOrBlank(url))
+            return url.trim();
+    }
+    return undefined;
+}
 function uncapitalizeFirstLetter(value) {
     if (!value || value.length === 0)
         return value;
@@ -10022,6 +10060,27 @@ class MatAutocompleteFieldUtils {
     static defaultEquals(o1, o2) {
         return isNotNil(o1?.id) && o1.id === o2?.id;
     }
+    /**
+     * Check if the given event target belongs to the open panel of the autocomplete, or hosts it.
+     *
+     * Used to ignore a blur event while the panel is open, because a click on an option may be in progress:
+     * - the target is inside the panel (e.g. a `<mat-option>`, or a content of an option);
+     * - or the target hosts the panel (e.g. the `<ion-modal>` element, with `tabindex="-1"`, which
+     *   becomes the nearest focusable ancestor when pressing a non focusable option).
+     *
+     * A target hosting the panel can also come from a click outside the panel (e.g. on an empty area
+     * of the modal): the caller must handle this blur event when the panel closes, if the input has not
+     * recovered the focus (see issue sumaris-app#2218).
+     */
+    static isPanelTarget(autocomplete, target) {
+        if (!autocomplete?.isOpen || !(target instanceof Node))
+            return false;
+        // Skip global containers: a blur to the body means the focus has been really lost
+        if (target === target.ownerDocument?.body || target === target.ownerDocument?.documentElement)
+            return false;
+        const panel = autocomplete.panel?.nativeElement;
+        return !!panel && (panel.contains(target) || target.contains(panel));
+    }
 }
 
 class MaterialAutocompleteHeaderDirective {
@@ -10099,6 +10158,7 @@ class MatAutocompleteField {
     _fetchMore$ = new EventEmitter();
     _defaultPanelWidth = null;
     _focused = false;
+    _ignoredBlurEvent = null; // Last blur event ignored while the panel was open
     _panelClosedAtTime;
     _classList;
     get searchText() {
@@ -10777,18 +10837,41 @@ class MatAutocompleteField {
             return;
         // DEBUG
         //if (this.debug) console.debug(this.logPrefix + ' filterInputTextBlurEvent', event);
-        // Ignore event from mat-option
+        // Ignore event from mat-option, or from the autocomplete panel
         if ((event.relatedTarget instanceof HTMLElement && event.relatedTarget.tagName === 'MAT-OPTION') ||
+            // Or from the autocomplete panel, or to an element which hosts the panel
+            // (see issue sumaris-app#2218)
+            MatAutocompleteFieldUtils.isPanelTarget(this.autocomplete, event.relatedTarget) ||
             // Or autocomplete panel is open because event.relatedTarget is null (cf. https://github.com/angular/components/issues/24182)
             (event.relatedTarget === null && this.autocomplete?.isOpen)) {
             event.preventDefault();
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
+            // Remember the event: the focus may have really left the field (see onAutocompleteClosed())
+            this._ignoredBlurEvent = event;
             // DEBUG
             //if (this.debug) console.debug(this.logPrefix + " Cancelling blur event");
             return;
         }
+        this._ignoredBlurEvent = null;
+        this.handleInputTextBlur(event);
+    }
+    /**
+     * A blur event may have been ignored while the panel was open, because a click on an option was possible.
+     * If the panel is now closed and the input has not recovered the focus, then the focus has really left the field
+     * (e.g. a click on an empty area of the modal, see issue sumaris-app#2218): handle the blur event now.
+     *
+     * When an option is selected, the input recovers the focus before the panel is closed: no blur is handled.
+     */
+    onAutocompleteClosed() {
+        const event = this._ignoredBlurEvent;
+        this._ignoredBlurEvent = null;
+        if (event && !hasFocusWithin(this.matInputText?.nativeElement)) {
+            this.handleInputTextBlur(event);
+        }
+    }
+    handleInputTextBlur(event) {
         // Already blurred: skip
         if (!this._focused)
             return;
@@ -11274,11 +11357,11 @@ class MatAutocompleteField {
         this.toggleFavorite.emit({ source: this.matSelect || this.autocomplete, value: value });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MatAutocompleteField, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$2.ModalController }, { token: i0.Renderer2 }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MatAutocompleteField, isStandalone: false, 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, APP_INPUT_FIELD_PROVIDER], 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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text><i>{{ 'COMMON.EMPTY_OPTION' | translate }}</i></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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                            <!-- /!\\ Ne PAS utiliser ion-label ici, car probl\u00E8me depuis Ionic 8 - cf issue -->\n                            <ion-text\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\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 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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</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-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: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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$3.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: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6$3.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i6.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: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MatAutocompleteField, isStandalone: false, 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, APP_INPUT_FIELD_PROVIDER], 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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text><i>{{ 'COMMON.EMPTY_OPTION' | translate }}</i></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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                            <!-- /!\\ Ne PAS utiliser ion-label ici, car probl\u00E8me depuis Ionic 8 - cf issue -->\n                            <ion-text\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\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 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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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); onAutocompleteClosed()\"\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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</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-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: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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$3.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: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6$3.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i6.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: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MatAutocompleteField, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-autocomplete-field', providers: [DEFAULT_VALUE_ACCESSOR$4, APP_INPUT_FIELD_PROVIDER], 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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text><i>{{ 'COMMON.EMPTY_OPTION' | translate }}</i></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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                            <!-- /!\\ Ne PAS utiliser ion-label ici, car probl\u00E8me depuis Ionic 8 - cf issue -->\n                            <ion-text\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\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 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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</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-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, APP_INPUT_FIELD_PROVIDER], 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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text><i>{{ 'COMMON.EMPTY_OPTION' | translate }}</i></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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                            <!-- /!\\ Ne PAS utiliser ion-label ici, car probl\u00E8me depuis Ionic 8 - cf issue -->\n                            <ion-text\n                              [innerHTML]=\"\n                                item\n                                  | propertyGet: path\n                                  | highlight: { search: ionSearchbar?.value, withAccent: highlightAccent }\n                              \"\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 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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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); onAutocompleteClosed()\"\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-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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-text>\n                      <i>{{ noResultMessage | translate }}</i>\n                    </ion-text>\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-text>\n                    {{ 'INFO.PLEASE_TYPE_MORE_CHARACTERS' | translate: { minLength: suggestLengthThreshold } }}\n                  </ion-text>\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>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n          }\n          @if (formControl?.hasError('entity')) {\n            <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</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-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$2.ModalController }, { type: i0.Renderer2 }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { equals: [{
@@ -13810,6 +13893,7 @@ class MatChipsField {
     _onTouchedCallback = noop$3;
     _onFetchMoreCallback;
     _implicitValue;
+    _ignoredBlurEvent = null; // Last blur event ignored while the panel was open
     _subscription = new Subscription();
     _itemsSubscription;
     _openedSubscription;
@@ -14301,6 +14385,32 @@ class MatChipsField {
     filterInputTextBlurEvent(event) {
         if (!event || event.defaultPrevented)
             return;
+        // Ignore event while the panel is open, if a click on an option may be in progress (see issue sumaris-app#2218):
+        // the focus moved to the panel, to an element which hosts the panel, or nowhere (cf. https://github.com/angular/components/issues/24182)
+        if (MatAutocompleteFieldUtils.isPanelTarget(this.autocomplete, event.relatedTarget) ||
+            (event.relatedTarget === null && this.autocomplete?.isOpen)) {
+            // Remember the event: the focus may have really left the field (see onAutocompleteClosed())
+            this._ignoredBlurEvent = event;
+            return;
+        }
+        this._ignoredBlurEvent = null;
+        this.handleInputTextBlur(event);
+    }
+    /**
+     * A blur event may have been ignored while the panel was open, because a click on an option was possible.
+     * If the panel is now closed and the input has not recovered the focus, then the focus has really left the field
+     * (e.g. a click on an empty area of the modal, see issue sumaris-app#2218): handle the blur event now.
+     *
+     * When an option is selected, the input recovers the focus before the panel is closed: no blur is handled.
+     */
+    onAutocompleteClosed() {
+        const event = this._ignoredBlurEvent;
+        this._ignoredBlurEvent = null;
+        if (event && !hasFocusWithin(this.matInputText?.nativeElement)) {
+            this.handleInputTextBlur(event);
+        }
+    }
+    handleInputTextBlur(event) {
         this.checkIfTouched();
         // Emit blur event
         this.blurred.emit(event);
@@ -14453,7 +14563,7 @@ class MatChipsField {
                 useExisting: forwardRef(() => MatChipsField),
             },
             { provide: APP_INPUT_FIELD, useExisting: forwardRef(() => MatChipsField) },
-        ], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"'dynamic'\"\n        [hideRequiredMarker]=\"hideRequiredMarker\"\n        [class.mat-form-field-disabled]=\"formControl.disabled\"\n        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n        class=\"material-chips\"\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\n        <mat-chip-grid\n          #chipList\n          (focus)=\"filterChipsFocusEvent($event)\"\n          [disabled]=\"!readonly && disabled\"\n          [required]=\"required\"\n          [errorStateMatcher]=\"_errorStateMatcher\"\n        >\n          @if (showChips) {\n            @for (item of value; track item) {\n              <mat-chip-row\n                class=\"ion-no-margin\"\n                [removable]=\"!disabled\"\n                (removed)=\"remove(item)\"\n                [color]=\"chipColor\"\n                [highlighted]=\"true\"\n              >\n                {{ item | toString: displayWith }}\n                @if (enabled) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          />\n        </mat-chip-grid>\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)=\"add($event.option.value)\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item?.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col\n                      [size]=\"displayColumnSizes[i]\"\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: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | 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 (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        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\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      <!-- Do the same as MatFormField since angular 15 (see component source)-->\n      <div\n        class=\"mat-mdc-form-field-subscript-wrapper\"\n        [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n        [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n      >\n        @if (formControl.touched && formControl.errors; as errors) {\n          <!-- errors -->\n          <div class=\"mat-mdc-form-field-error-wrapper\">\n            @if (errors | mapKeys | arrayFirst; as errorKey) {\n              @switch (errorKey) {\n                @case ('required') {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @case ('entity') {\n                  <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n                }\n                @default {\n                  <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\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  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"toggleShowPanel($event)\"\n    [class.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  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [class.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{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button.hidden{display:none;visibility:hidden}.mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$3.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: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$3.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: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i6.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: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"'dynamic'\"\n        [hideRequiredMarker]=\"hideRequiredMarker\"\n        [class.mat-form-field-disabled]=\"formControl.disabled\"\n        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n        class=\"material-chips\"\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\n        <mat-chip-grid\n          #chipList\n          (focus)=\"filterChipsFocusEvent($event)\"\n          [disabled]=\"!readonly && disabled\"\n          [required]=\"required\"\n          [errorStateMatcher]=\"_errorStateMatcher\"\n        >\n          @if (showChips) {\n            @for (item of value; track item) {\n              <mat-chip-row\n                class=\"ion-no-margin\"\n                [removable]=\"!disabled\"\n                (removed)=\"remove(item)\"\n                [color]=\"chipColor\"\n                [highlighted]=\"true\"\n              >\n                {{ item | toString: displayWith }}\n                @if (enabled) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          />\n        </mat-chip-grid>\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)=\"add($event.option.value)\"\n          (closed)=\"onAutocompleteClosed()\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item?.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col\n                      [size]=\"displayColumnSizes[i]\"\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: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | 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 (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        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\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      <!-- Do the same as MatFormField since angular 15 (see component source)-->\n      <div\n        class=\"mat-mdc-form-field-subscript-wrapper\"\n        [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n        [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n      >\n        @if (formControl.touched && formControl.errors; as errors) {\n          <!-- errors -->\n          <div class=\"mat-mdc-form-field-error-wrapper\">\n            @if (errors | mapKeys | arrayFirst; as errorKey) {\n              @switch (errorKey) {\n                @case ('required') {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @case ('entity') {\n                  <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n                }\n                @default {\n                  <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\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  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"toggleShowPanel($event)\"\n    [class.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  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [class.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{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button.hidden{display:none;visibility:hidden}.mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$3.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: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$3.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: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i11$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i6.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: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: ToStringPipe, name: "toString" }, { kind: "pipe", type: StrLengthPipe, name: "strLength" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MatChipsField, decorators: [{
             type: Component,
@@ -14464,7 +14574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                             useExisting: forwardRef(() => MatChipsField),
                         },
                         { provide: APP_INPUT_FIELD, useExisting: forwardRef(() => MatChipsField) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"'dynamic'\"\n        [hideRequiredMarker]=\"hideRequiredMarker\"\n        [class.mat-form-field-disabled]=\"formControl.disabled\"\n        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n        class=\"material-chips\"\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\n        <mat-chip-grid\n          #chipList\n          (focus)=\"filterChipsFocusEvent($event)\"\n          [disabled]=\"!readonly && disabled\"\n          [required]=\"required\"\n          [errorStateMatcher]=\"_errorStateMatcher\"\n        >\n          @if (showChips) {\n            @for (item of value; track item) {\n              <mat-chip-row\n                class=\"ion-no-margin\"\n                [removable]=\"!disabled\"\n                (removed)=\"remove(item)\"\n                [color]=\"chipColor\"\n                [highlighted]=\"true\"\n              >\n                {{ item | toString: displayWith }}\n                @if (enabled) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          />\n        </mat-chip-grid>\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)=\"add($event.option.value)\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item?.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col\n                      [size]=\"displayColumnSizes[i]\"\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: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | 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 (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        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\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      <!-- Do the same as MatFormField since angular 15 (see component source)-->\n      <div\n        class=\"mat-mdc-form-field-subscript-wrapper\"\n        [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n        [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n      >\n        @if (formControl.touched && formControl.errors; as errors) {\n          <!-- errors -->\n          <div class=\"mat-mdc-form-field-error-wrapper\">\n            @if (errors | mapKeys | arrayFirst; as errorKey) {\n              @switch (errorKey) {\n                @case ('required') {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @case ('entity') {\n                  <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n                }\n                @default {\n                  <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\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  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"toggleShowPanel($event)\"\n    [class.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  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [class.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{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button.hidden{display:none;visibility:hidden}.mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col [size]=\"colSizes?.[0]\" class=\"ion-no-padding\">\n      <mat-form-field\n        [floatLabel]=\"floatLabel | asFloatLabelType\"\n        [appearance]=\"appearance\"\n        [subscriptSizing]=\"'dynamic'\"\n        [hideRequiredMarker]=\"hideRequiredMarker\"\n        [class.mat-form-field-disabled]=\"formControl.disabled\"\n        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n        class=\"material-chips\"\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\n        <mat-chip-grid\n          #chipList\n          (focus)=\"filterChipsFocusEvent($event)\"\n          [disabled]=\"!readonly && disabled\"\n          [required]=\"required\"\n          [errorStateMatcher]=\"_errorStateMatcher\"\n        >\n          @if (showChips) {\n            @for (item of value; track item) {\n              <mat-chip-row\n                class=\"ion-no-margin\"\n                [removable]=\"!disabled\"\n                (removed)=\"remove(item)\"\n                [color]=\"chipColor\"\n                [highlighted]=\"true\"\n              >\n                {{ item | toString: displayWith }}\n                @if (enabled) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n          <input\n            #matInputText\n            type=\"text\"\n            [matAutocomplete]=\"autocomplete\"\n            [matAutocompletePosition]=\"matAutocompletePosition\"\n            [formControl]=\"_inputControl\"\n            [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n            [appAutofocus]=\"autofocus\"\n            [tabindex]=\"_tabindex\"\n            [readonly]=\"readonly\"\n            [hidden]=\"disabled\"\n            (click)=\"clicked.emit($event)\"\n            (focus)=\"filterInputTextFocusEvent($event)\"\n            (blur)=\"filterInputTextBlurEvent($event)\"\n            (keydown.escape)=\"keydownEscape.emit($event)\"\n            (keyup.enter)=\"keyupEnter.emit($event)\"\n            (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          />\n        </mat-chip-grid>\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)=\"add($event.option.value)\"\n          (closed)=\"onAutocompleteClosed()\"\n        >\n          <!-- Headers -->\n          <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n            @for (attr of displayAttributes; track attr; let i = $index) {\n              <ion-col [size]=\"displayColumnSizes[i]\">\n                <ion-text [innerHTML]=\"displayColumnNames[i] | translate\"></ion-text>\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            }\n\n            <!-- Options -->\n            @for (item of items; track $index) {\n              <mat-option [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item?.classList || ''\">\n                  @for (path of displayAttributes; track path; let i = $index) {\n                    <ion-col\n                      [size]=\"displayColumnSizes[i]\"\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: { search: matInputText.value, withAccent: highlightAccent }\n                          \"\n                        ></span>\n                      </ion-text>\n                    </ion-col>\n                  }\n                </ion-row>\n              </mat-option>\n            }\n            <!-- More item -->\n            @if (_moreItemsCount) {\n              <mat-option (ngInit)=\"_initAutocompleteInfiniteScroll()\" class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            }\n          } @else if ((matInputText.value | 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 (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        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\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      <!-- Do the same as MatFormField since angular 15 (see component source)-->\n      <div\n        class=\"mat-mdc-form-field-subscript-wrapper\"\n        [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n        [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n      >\n        @if (formControl.touched && formControl.errors; as errors) {\n          <!-- errors -->\n          <div class=\"mat-mdc-form-field-error-wrapper\">\n            @if (errors | mapKeys | arrayFirst; as errorKey) {\n              @switch (errorKey) {\n                @case ('required') {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @case ('entity') {\n                  <mat-error>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n                }\n                @default {\n                  <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\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  <button\n    matSuffix\n    mat-icon-button\n    tabindex=\"-1\"\n    type=\"button\"\n    (click)=\"toggleShowPanel($event)\"\n    [class.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  @if (clearable) {\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"clearValue($event)\"\n      [class.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{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button.hidden{display:none;visibility:hidden}.mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 23px;margin:1px 0 0 8px!important;min-height:calc(31px - .5em)}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action{padding-right:4px;padding-left:4px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action{padding:0 2px}.mat-mdc-chip.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action mat-icon{color:inherit}.mat-mdc-chip.mat-mdc-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-mdc-chip.mat-mdc-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}mat-form-field.mat-form-field-invalid ::ng-deep .mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{color:var(--mat-form-field-filled-error-label-text-color, var(--mat-app-error))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -15153,14 +15263,14 @@ class MatLatLongFieldInput {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MatLatLongFieldInput, deps: [{ token: i0.ElementRef }, { token: MAT_FORM_FIELD, optional: true }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MatLatLongFieldInput, isStandalone: false, selector: "mat-latlong-input", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], value: "value", defaultSign: "defaultSign", type: "type", pattern: ["latLongPattern", "pattern"], maxDecimals: "maxDecimals", readonly: "readonly" }, host: { properties: { "class.label-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], viewQueries: [{ propertyName: "degreesInput", first: true, predicate: ["degrees"], descendants: true, read: ElementRef }, { propertyName: "minutesInput", first: true, predicate: ["minutes"], descendants: true, read: ElementRef }, { propertyName: "secondsInput", first: true, predicate: ["seconds"], descendants: true, read: ElementRef }, { propertyName: "signInput", first: true, predicate: ["sign"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (readonly) {\n  <ion-text>\n    {{\n      ngControl.value\n        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n    }}\n  </ion-text>\n} @else {\n  <div\n    role=\"group\"\n    class=\"mat-latlong-input-container\"\n    [formGroup]=\"formGroup\"\n    [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n    (focusin)=\"onFocusIn($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <input\n      matInput\n      #degrees\n      aria-label=\"Degrees\"\n      [class.degrees-only]=\"pattern === 'DD'\"\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.latitude]=\"type === 'latitude'\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      formControlName=\"degrees\"\n      [maskito]=\"degreesMask\"\n      (input)=\"handleInput('degrees', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        matInput\n        #minutes\n        aria-label=\"Minutes\"\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        formControlName=\"minutes\"\n        [maskito]=\"minutesMask\"\n        (input)=\"handleInput('minutes', 'seconds')\"\n        (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        matInput\n        #seconds\n        aria-label=\"Seconds\"\n        class=\"seconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        formControlName=\"seconds\"\n        [maskito]=\"secondsMask\"\n        (input)=\"handleInput('seconds', 'sign')\"\n        (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSign) {\n      <span class=\"sign-spacer\"></span>\n      <mat-select\n        #sign\n        hideSingleSelectionIndicator\n        disableOptionCentering\n        aria-label=\"Sign\"\n        class=\"sign\"\n        formControlName=\"sign\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        (focusin)=\"sign.open()\"\n        (selectionChange)=\"handleInput('sign')\"\n      >\n        <mat-option [value]=\"1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n\n      </mat-select>\n\n    }\n\n  </div>\n}\n", styles: [".mat-latlong-input-container{display:inline-flex;width:100%;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right;color:var(--mat-form-field-filled-input-text-color, var(--ion-text-color))}input::placeholder{letter-spacing:-.05em;color:var(--mat-form-field-filled-input-text-placeholder-color, var(--app-form-field-label-color))}input.degrees-only{width:calc(100% - .5em)}input.degrees{width:2em}input.degrees.latitude{width:1.5em}input.minutes{width:1.7em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.8em}::ng-deep .mat-mdc-option{padding:0 16px!important}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"], dependencies: [{ kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: LatLongFormatPipe, name: "latLongFormat" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MatLatLongFieldInput, isStandalone: false, selector: "mat-latlong-input", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], value: "value", defaultSign: "defaultSign", type: "type", pattern: ["latLongPattern", "pattern"], maxDecimals: "maxDecimals", readonly: "readonly" }, host: { properties: { "class.label-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], viewQueries: [{ propertyName: "degreesInput", first: true, predicate: ["degrees"], descendants: true, read: ElementRef }, { propertyName: "minutesInput", first: true, predicate: ["minutes"], descendants: true, read: ElementRef }, { propertyName: "secondsInput", first: true, predicate: ["seconds"], descendants: true, read: ElementRef }, { propertyName: "signInput", first: true, predicate: ["sign"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (readonly) {\n  <ion-text>\n    {{\n      ngControl.value\n        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n    }}\n  </ion-text>\n} @else {\n  <div\n    role=\"group\"\n    class=\"mat-latlong-input-container\"\n    [formGroup]=\"formGroup\"\n    [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n    (focusin)=\"onFocusIn($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <input\n      matInput\n      #degrees\n      aria-label=\"Degrees\"\n      [class.degrees-only]=\"pattern === 'DD'\"\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.latitude]=\"type === 'latitude'\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      formControlName=\"degrees\"\n      [maskito]=\"degreesMask\"\n      (input)=\"handleInput('degrees', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        matInput\n        #minutes\n        aria-label=\"Minutes\"\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        formControlName=\"minutes\"\n        [maskito]=\"minutesMask\"\n        (input)=\"handleInput('minutes', 'seconds')\"\n        (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        matInput\n        #seconds\n        aria-label=\"Seconds\"\n        class=\"seconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        formControlName=\"seconds\"\n        [maskito]=\"secondsMask\"\n        (input)=\"handleInput('seconds', 'sign')\"\n        (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSign) {\n      <span class=\"sign-spacer\"></span>\n      <mat-select\n        #sign\n        hideSingleSelectionIndicator\n        disableOptionCentering\n        aria-label=\"Sign\"\n        class=\"sign\"\n        formControlName=\"sign\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        (focusin)=\"sign.open()\"\n        (selectionChange)=\"handleInput('sign')\"\n      >\n        <mat-option [value]=\"1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n\n      </mat-select>\n\n    }\n\n  </div>\n}\n", styles: [".mat-latlong-input-container{display:inline-flex;width:100%;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right;color:var(--mat-form-field-filled-input-text-color, var(--ion-text-color))}input::placeholder{letter-spacing:-.05em;color:var(--mat-form-field-filled-input-text-placeholder-color, var(--app-form-field-label-color))}input.degrees-only{width:calc(100% - .5em)}input.degrees{width:2em}input.degrees.latitude{width:1.5em}input.minutes{width:1.7em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.8em}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"], dependencies: [{ kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: LatLongFormatPipe, name: "latLongFormat" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MatLatLongFieldInput, decorators: [{
             type: Component,
             args: [{ selector: 'mat-latlong-input', providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], host: {
                         '[class.label-floating]': 'shouldLabelFloat',
                         '[id]': 'id',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (readonly) {\n  <ion-text>\n    {{\n      ngControl.value\n        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n    }}\n  </ion-text>\n} @else {\n  <div\n    role=\"group\"\n    class=\"mat-latlong-input-container\"\n    [formGroup]=\"formGroup\"\n    [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n    (focusin)=\"onFocusIn($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <input\n      matInput\n      #degrees\n      aria-label=\"Degrees\"\n      [class.degrees-only]=\"pattern === 'DD'\"\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.latitude]=\"type === 'latitude'\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      formControlName=\"degrees\"\n      [maskito]=\"degreesMask\"\n      (input)=\"handleInput('degrees', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        matInput\n        #minutes\n        aria-label=\"Minutes\"\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        formControlName=\"minutes\"\n        [maskito]=\"minutesMask\"\n        (input)=\"handleInput('minutes', 'seconds')\"\n        (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        matInput\n        #seconds\n        aria-label=\"Seconds\"\n        class=\"seconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        formControlName=\"seconds\"\n        [maskito]=\"secondsMask\"\n        (input)=\"handleInput('seconds', 'sign')\"\n        (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSign) {\n      <span class=\"sign-spacer\"></span>\n      <mat-select\n        #sign\n        hideSingleSelectionIndicator\n        disableOptionCentering\n        aria-label=\"Sign\"\n        class=\"sign\"\n        formControlName=\"sign\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        (focusin)=\"sign.open()\"\n        (selectionChange)=\"handleInput('sign')\"\n      >\n        <mat-option [value]=\"1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n\n      </mat-select>\n\n    }\n\n  </div>\n}\n", styles: [".mat-latlong-input-container{display:inline-flex;width:100%;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right;color:var(--mat-form-field-filled-input-text-color, var(--ion-text-color))}input::placeholder{letter-spacing:-.05em;color:var(--mat-form-field-filled-input-text-placeholder-color, var(--app-form-field-label-color))}input.degrees-only{width:calc(100% - .5em)}input.degrees{width:2em}input.degrees.latitude{width:1.5em}input.minutes{width:1.7em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.8em}::ng-deep .mat-mdc-option{padding:0 16px!important}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (readonly) {\n  <ion-text>\n    {{\n      ngControl.value\n        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n    }}\n  </ion-text>\n} @else {\n  <div\n    role=\"group\"\n    class=\"mat-latlong-input-container\"\n    [formGroup]=\"formGroup\"\n    [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n    (focusin)=\"onFocusIn($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <input\n      matInput\n      #degrees\n      aria-label=\"Degrees\"\n      [class.degrees-only]=\"pattern === 'DD'\"\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.latitude]=\"type === 'latitude'\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      formControlName=\"degrees\"\n      [maskito]=\"degreesMask\"\n      (input)=\"handleInput('degrees', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        matInput\n        #minutes\n        aria-label=\"Minutes\"\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        formControlName=\"minutes\"\n        [maskito]=\"minutesMask\"\n        (input)=\"handleInput('minutes', 'seconds')\"\n        (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        matInput\n        #seconds\n        aria-label=\"Seconds\"\n        class=\"seconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        formControlName=\"seconds\"\n        [maskito]=\"secondsMask\"\n        (input)=\"handleInput('seconds', 'sign')\"\n        (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSign) {\n      <span class=\"sign-spacer\"></span>\n      <mat-select\n        #sign\n        hideSingleSelectionIndicator\n        disableOptionCentering\n        aria-label=\"Sign\"\n        class=\"sign\"\n        formControlName=\"sign\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        (focusin)=\"sign.open()\"\n        (selectionChange)=\"handleInput('sign')\"\n      >\n        <mat-option [value]=\"1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n\n      </mat-select>\n\n    }\n\n  </div>\n}\n", styles: [".mat-latlong-input-container{display:inline-flex;width:100%;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right;color:var(--mat-form-field-filled-input-text-color, var(--ion-text-color))}input::placeholder{letter-spacing:-.05em;color:var(--mat-form-field-filled-input-text-placeholder-color, var(--app-form-field-label-color))}input.degrees-only{width:calc(100% - .5em)}input.degrees{width:2em}input.degrees.latitude{width:1.5em}input.minutes{width:1.7em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.8em}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3.MatFormField, decorators: [{
                     type: Optional
                 }, {
@@ -38314,7 +38424,8 @@ class RegisterModal {
         const data = this.form.value;
         this.form.disable();
         try {
-            console.debug('[register] Sending registration to server...', data);
+            // Never log the payload here: it contains the password in clear (see #17)
+            console.debug('[register] Sending registration to server...');
             const res = await this.accountService.register(data);
             console.debug('[register] Account registered!');
             await this.viewCtrl.dismiss();
@@ -42051,15 +42162,17 @@ class HomePage extends RxState {
             config.getPropertyAsInt(CORE_CONFIG_OPTIONS.HOME_FEED_MAX_AGE_IN_MONTHS) ?? this.environment?.feed?.maxAgeInMonths ?? -1;
         this.feedMaxContentLength =
             config.getPropertyAsInt(CORE_CONFIG_OPTIONS.HOME_FEED_MAX_CONTENT_LENGTH) ?? this.environment?.feed?.maxContentLength ?? -1;
-        // Legal information
+        // Legal information (server config has priority over the environment)
         this.legalInformation = [
             {
                 title: 'HOME.PRIVACY_POLICY',
-                path: this._config.getProperty(CORE_CONFIG_OPTIONS.PRIVACY_POLICY_URL) ?? this.environment.privacyPolicyUrl,
+                path: this._config.getProperty(CORE_CONFIG_OPTIONS.PRIVACY_POLICY_URL) ??
+                    resolveLocaleUrl(this.environment.privacyPolicyUrl, locale, this.environment.defaultLocale),
             },
             {
                 title: 'HOME.TERMS_OF_USE',
-                path: this._config.getProperty(CORE_CONFIG_OPTIONS.TERMS_OF_USE_URL) ?? this.environment.termsOfUseUrl,
+                path: this._config.getProperty(CORE_CONFIG_OPTIONS.TERMS_OF_USE_URL) ??
+                    resolveLocaleUrl(this.environment.termsOfUseUrl, locale, this.environment.defaultLocale),
             },
         ].filter((item) => isNotNilOrBlank(item.path));
         this.showLegalInformation = isNotEmptyArray(this.legalInformation);
@@ -42970,6 +43083,7 @@ class AppTable {
     previouslyEditedRowId;
     formErrorAdapter;
     destroySubject = new Subject();
+    logPrefix = '[table]';
     excludesColumns = [];
     displayedColumns;
     errorTranslateOptions;
@@ -43040,11 +43154,17 @@ class AppTable {
     defaultPageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS;
     // Focus manager
     focusColumn;
+    get reservedStartColumns() {
+        return RESERVED_START_COLUMNS;
+    }
+    get reservedEndColumns() {
+        return RESERVED_END_COLUMNS;
+    }
     get firstUserColumn() {
-        return this.displayedColumns[RESERVED_START_COLUMNS.length];
+        return this.displayedColumns[this.reservedStartColumns.length];
     }
     get lastUserColumn() {
-        return this.displayedColumns[this.displayedColumns.length - RESERVED_END_COLUMNS.length - 1];
+        return this.displayedColumns[this.displayedColumns.length - this.reservedEndColumns.length - 1];
     }
     set dataSource(value) {
         this.setDatasource(value);
@@ -43158,7 +43278,8 @@ class AppTable {
         }
         if (this.dirty || (this.editedRow && this.editedRow.id !== this.previouslyEditedRowId)) {
             // Cancel the current editing row only if editing and if it was not previously saved
-            if (this.editedRow?.editing) {
+            // Skip a row that is not in the data source anymore (e.g. after a reload): deleting the row -1 would delete the last row instead
+            if (this.editedRow?.editing && this.dataSource.getRows().includes(this.editedRow)) {
                 // Cancel the current editing row only if editing and if it was not previously saved
                 if (this.editedRow.id === -1) {
                     this.dataSource.delete(-1);
@@ -43358,14 +43479,14 @@ class AppTable {
             }
             if (!this._dataSource) {
                 if (this.debug)
-                    console.debug('[table] Skipping data load: no dataSource defined');
+                    console.debug(`${this.logPrefix} Skipping data load: no dataSource defined`);
                 return of(undefined);
             }
             if (this.debug)
-                console.debug('[table] Calling dataSource.watchAll()...');
+                console.debug(`${this.logPrefix} Calling dataSource.watchAll()...`);
             return this._dataSource.watchAll(this.pageOffset, this.pageSize, this.sortActive, this.sortDirection, this._filter).pipe(takeUntil(this.onRefresh), catchError((err) => {
                 if (this.debug)
-                    console.error(err);
+                    console.error(this.logPrefix, err);
                 this.setError((err && err.message) || err);
                 return of(undefined); // Continue
             }), tap$1((res) => this.updateView(res, opts)));
@@ -43381,7 +43502,7 @@ class AppTable {
     ngAfterViewInit() {
         // Detect when parent ngOnInit() not call
         if (this.debug && !this.displayedColumns)
-            console.warn(`[table] Missing 'displayedColumns'. Did you call parent ngOnInit() in component ${this.constructor.name} ?`);
+            console.warn(`${this.logPrefix} Missing 'displayedColumns'. Did you call parent ngOnInit() in component ${this.constructor.name} ?`);
         // Start listening sort and paginator events
         // noinspection JSIgnoredPromiseFromCall
         this.listenSortAndPaginationEvents();
@@ -43421,10 +43542,10 @@ class AppTable {
                 ? res.total
                 : ((this.paginator && this.paginator.pageIndex * (this.paginator.pageSize || DEFAULT_PAGE_SIZE)) || 0) + this.visibleRowCount;
             if (this.debug)
-                console.debug(`[table] ${res.data.length} rows loaded`);
+                console.debug(`${this.logPrefix} ${res.data.length} rows loaded`);
         }
         else {
-            //if (this.debug) console.debug('[table] NO rows loaded');
+            //if (this.debug) console.debug(`${this.logPrefix} NO rows loaded`);
             this.totalRowCount = 0;
             this.visibleRowCount = 0;
         }
@@ -43437,7 +43558,7 @@ class AppTable {
     }
     setDatasource(datasource) {
         if (this._dataSource)
-            throw new Error('[table] dataSource already set !');
+            throw new Error(`${this.logPrefix} dataSource already set !`);
         if (datasource && this._dataSource !== datasource) {
             this._dataSource = datasource;
             if (this._initialized)
@@ -43483,9 +43604,10 @@ class AppTable {
         }
     }
     async confirmAndAdd(event, row, opts) {
+        row = row || this.editedRow;
         if (!this.confirmEditCreate(event, row)) {
             // If pending: Wait end of validation, then loop
-            if (row.validator?.pending) {
+            if (row?.validator?.pending) {
                 return (AppFormUtils.waitWhilePending(row.validator, { stop: this.destroySubject })
                     // Loop after validation completed
                     .then(() => this.confirmAndAdd(event, row, opts)));
@@ -43537,6 +43659,8 @@ class AppTable {
         if (!this.inlineEdition)
             return false;
         row = row || this.editedRow;
+        if (!row)
+            return false;
         const focusColumn = opts?.focusColumn ?? this.firstUserColumn;
         event?.stopPropagation();
         // If not confirmed
@@ -43557,6 +43681,56 @@ class AppTable {
         this.editOrAddRowById(event, nextRowId, { focusColumn });
         return true;
     }
+    /**
+     * Confirms the current row and moves the focus to the upper row.
+     * Typical usage is inside a <input type="number">, with `(keyup.arrowUp)="confirmAndUp(event, row, {focusColumn: columnName})"`
+     * Same as confirmAndBackward, but on the current row.
+     *
+     * @param {Event} [event] - The event associated with the confirmation and update action.
+     * @param {TableElement} [row] - The current row object (defaults to the edited row).
+     * @param {Object} [opts] - Options.
+     * @param {string} [opts.focusColumn] - The column to focus on the upper row; defaults to the current focus column
+     * @return `true` if the navigation has been done, or a promise of it if the row validation is pending
+     */
+    confirmAndUp(event, row, opts) {
+        if (!this.inlineEdition)
+            return false;
+        const previousRow = this.editedRow;
+        row = row || previousRow;
+        if (!row)
+            return false;
+        const focusColumn = opts?.focusColumn ?? this.focusColumn;
+        event?.stopPropagation();
+        // No edited row: edit the given row
+        if (!previousRow)
+            return this.editRow(event, row, { focusColumn });
+        // Previous row was a new row AND invalid: delete it
+        if (previousRow.id === -1 && previousRow.validator?.invalid && !previousRow.validator?.dirty) {
+            this.deleteNewRow(event, previousRow);
+            // Wait deletion is done, then edit upper row (by id, because of reloading)
+            this.waitIdle().then(() => this.editOrAddRowById(event, row.id - 1, { focusColumn }));
+            return true;
+        }
+        // No upper row: stay on the current row
+        if (row.id < 1)
+            return false;
+        // If cannot confirm previous row
+        if (!this.confirmEditCreate(event, previousRow)) {
+            // If pending: Wait end of validation, then loop
+            if (previousRow.validator?.pending) {
+                return (AppFormUtils.waitWhilePending(previousRow.validator, { stop: this.destroySubject })
+                    // Wait end of validation and loop
+                    .then(() => this.confirmAndUp(event, row, { focusColumn })));
+            }
+            // Go back to the focus column
+            this.focusColumn = focusColumn;
+            this.markForCheck();
+            return false;
+        }
+        // Edit upper row
+        this.editOrAddRowById(event, row.id - 1, { focusColumn });
+        return true;
+    }
     /**
      * Confirm the creation of the given row, or if not specified the currently edited row
      *
@@ -43596,8 +43770,8 @@ class AppTable {
             }
             // NOT confirmed = row has error
             if (this.debug) {
-                console.warn('[table] Cannot confirm row, because invalid');
-                AppFormUtils.logFormErrors(row.validator, '[table] ');
+                console.warn(`${this.logPrefix} Cannot confirm row, because invalid`);
+                AppFormUtils.logFormErrors(row.validator, this.logPrefix);
             }
             // fix: mark all controls as touched to show errors
             row.validator.markAllAsTouched();
@@ -43626,7 +43800,7 @@ class AppTable {
     }
     async addRow(event, insertAt, opts) {
         if (this.debug)
-            console.debug('[table] Asking for new row...');
+            console.debug(`${this.logPrefix} Asking for new row...`);
         if (!this._enabled)
             return false;
         // Use modal if inline edition is disabled
@@ -43642,6 +43816,14 @@ class AppTable {
         const row = await this.addRowToTable(insertAt, opts);
         return !!row;
     }
+    /**
+     * Save the table
+     *
+     * @param opts.keepEditing if true, the edited row will be kept after save (defaulting to this.keepEditedRowOnSave)
+     * @param opts.keepSelection if true, the selected row will be kept after save (no effect if opts.keepEditing is true)
+     * @param opts.confirmRow if true or not provided, the edited row will be confirmed before save
+     * @param opts.throwIfNotConfirmed if true or not provided, an error will be thrown if the edited row is not confirmed
+     */
     async save(opts) {
         opts = {
             keepEditing: this.keepEditedRowOnSave,
@@ -43653,21 +43835,28 @@ class AppTable {
         this.resetError();
         // Keep edited row id (should be done BEFORE confirmEditCreate() )
         this.previouslyEditedRowId = opts.keepEditing
-            ? (this.editedRow?.editing ? this.editedRow.id : undefined) || this.singleSelectedRow?.id
+            ? ((this.editedRow?.editing ? this.editedRow.id : undefined) ?? this.singleSelectedRow?.id)
             : undefined;
         const previouslyEditedRowId = this.previouslyEditedRowId;
         const previouslyEditedData = opts.keepEditing
-            ? (isNotNil(previouslyEditedRowId) && this.editedRow?.currentData) || this.singleSelectedRow?.currentData
+            ? ((isNotNil(previouslyEditedRowId) && this.editedRow?.currentData) ?? this.singleSelectedRow?.currentData)
             : undefined;
-        if (!this.confirmEditCreate()) {
-            throw { code: ErrorCodes.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
+        const previouslySelectedRowIds = !opts.keepEditing && opts.keepSelection && this.selection.hasValue() ? this.selection.selected.map((row) => row.id) : undefined;
+        if (opts.confirmRow !== false && !this.confirmEditCreate()) {
+            if (opts.throwIfNotConfirmed !== false) {
+                throw { code: ErrorCodes.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
+            }
+            else {
+                // Return false if confirmRow is true and throwIfNotConfirmed is false
+                return false;
+            }
         }
         // Mark as saving
         this.markAsSaving();
         try {
             // Calling service save()
             if (this.debug)
-                console.debug('[table] Calling dataSource.save()...');
+                console.debug(`${this.logPrefix} Calling dataSource.save()...`);
             const isOK = await this._dataSource.save();
             if (isOK)
                 this.markAsPristine();
@@ -43683,8 +43872,15 @@ class AppTable {
             if (isNotNil(previouslyEditedRowId)) {
                 await this.selectRowByIdOrData(previouslyEditedRowId, previouslyEditedData);
             }
+            else if (isNotEmptyArray(previouslySelectedRowIds)) {
+                await this.selectRowsByIds(previouslySelectedRowIds);
+            }
         }
     }
+    async selectRowsByIds(rowIds) {
+        await this.waitIdle();
+        this.selection.setSelection(...(this.dataSource?.getRows() ?? []).filter((row) => rowIds.includes(row.id)));
+    }
     cancel(event, opts) {
         // Check confirmation
         if ((!opts || opts.interactive !== false) && this.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observed)) {
@@ -43799,7 +43995,7 @@ class AppTable {
         if (!this._enabled || isEmptyArray(rows))
             return 0; // Skip is disabled, or no rows to delete
         if (this.loading && (!opts || opts.interactive !== false)) {
-            console.warn('[app-table] Skip deleteRows() because table is busy (loading). Use opts.interactive = false to force deletion');
+            console.warn(`${this.logPrefix} Skip deleteRows() because table is busy (loading). Use opts.interactive = false to force deletion`);
             return 0; // Skip if loading
         }
         // Make sure to keep newly created row
@@ -43826,7 +44022,7 @@ class AppTable {
                 // - or if invalid and not editing (= not cancellable)
                 if (row.id === -1 || (!row.editing && row.invalid) /*do not use !valid because if row is disabled, it will be always !valid */) {
                     if (this.debug)
-                        console.debug(`[table] Delete row #${row.id}`);
+                        console.debug(`${this.logPrefix} Delete row #${row.id}`);
                     this.selection.deselect(row);
                     row.delete();
                     this.visibleRowCount--;
@@ -43862,7 +44058,7 @@ class AppTable {
             // If no more rows to delete, continue anyway to clear editedRow and selection (issue IMAGINE-669)
             if (tempRows.length) {
                 if (this.debug)
-                    console.debug(`[table] Delete ${tempRows.length} rows...`);
+                    console.debug(`${this.logPrefix} Delete ${tempRows.length} rows...`);
                 await this._dataSource.deleteAll(tempRows);
             }
             // DO not update manually, because watchALl().subscribe() will update this count
@@ -43914,16 +44110,16 @@ class AppTable {
         if (this.loading) {
             // Wait while loading, and loop
             if (this.debug)
-                console.debug('[table] Waiting before apply clickRow() (datasource is busy)...');
+                console.debug(`${this.logPrefix} Waiting before apply clickRow() (datasource is busy)...`);
             this.waitIdle({ timeout: 2000 }).then(() => this.clickRow(event, row));
             return false;
         }
         // DEBUG
-        //console.debug('[table] Detect click on row');
+        //console.debug(`${this.logPrefix} Detect click on row`);
         // Cancelled by event
         if (event?.defaultPrevented) {
             if (this.debug)
-                console.debug('[table] clickRow event is defaultPrevented');
+                console.debug(`${this.logPrefix} clickRow event is defaultPrevented`);
             return false;
         }
         // Call onClickRow if observed
@@ -43942,7 +44138,7 @@ class AppTable {
             this._openingRow = true; // Prevent double click
             this.markAsLoading();
             this.openRow(row.currentData.id, row)
-                .catch((err) => console.error('Failed to open row', err)) // Continue
+                .catch((err) => console.error(`${this.logPrefix} Failed to open row`, err)) // Continue
                 .then(() => {
                 this.markAsLoaded();
                 // Prevent double click (use an open throttle time)
@@ -43989,7 +44185,7 @@ class AppTable {
             return; // CANCELLED
         // Apply columns
         const userColumns = (data || []).filter((c) => c.canHide === false || c.visible).map((c) => c.name) || [];
-        this.displayedColumns = RESERVED_START_COLUMNS.concat(userColumns).concat(RESERVED_END_COLUMNS);
+        this.displayedColumns = this.reservedStartColumns.concat(userColumns).concat(this.reservedEndColumns);
         this.markForCheck();
         // Update user settings
         await this.savePageSettings(userColumns, SETTINGS_DISPLAY_COLUMNS);
@@ -44008,10 +44204,10 @@ class AppTable {
         }
     }
     getCurrentColumns() {
-        const hiddenColumns = this.columns.slice(RESERVED_START_COLUMNS.length).filter((name) => this.displayedColumns.indexOf(name) === -1);
+        const hiddenColumns = this.columns.slice(this.reservedStartColumns.length).filter((name) => this.displayedColumns.indexOf(name) === -1);
         return this.displayedColumns
             .concat(hiddenColumns)
-            .filter((name) => !RESERVED_START_COLUMNS.includes(name) && !RESERVED_END_COLUMNS.includes(name) && !this.excludesColumns.includes(name))
+            .filter((name) => !this.reservedStartColumns.includes(name) && !this.reservedEndColumns.includes(name) && !this.excludesColumns.includes(name))
             .map((name) => ({
             name,
             label: this.getI18nColumnName(name),
@@ -44024,7 +44220,7 @@ class AppTable {
         if (!row || !row.editing)
             return;
         // DEBUG
-        //console.debug('[app-table] Cancel the row (keydown.escape)');
+        //console.debug(`${this.logPrefix} Cancel the row (keydown.escape)`);
         if (event) {
             // Avoid to cancel the editor
             event.preventDefault();
@@ -44101,20 +44297,20 @@ class AppTable {
                 done = await this.selectRowById(id);
                 if (done)
                     return true;
-                console.warn('[app-table] Save: Cannot reselect row by row.id: ', id);
+                console.warn(`${this.logPrefix} Save: Cannot reselect row by row.id: `, id);
             }
             // Try by data
             if (data) {
                 done = await this.selectRowByData(data);
                 if (done)
                     return true;
-                console.warn('[app-table] Save: Cannot reselect row by data: ', data);
+                console.warn(`${this.logPrefix} Save: Cannot reselect row by data: `, data);
             }
             return false;
         }
         catch (err) {
             // Log, but continue
-            console.error((err && err.message) || err);
+            console.error(`${this.logPrefix} Save error: `, (err && err.message) || err);
             return false;
         }
     }
@@ -44137,7 +44333,7 @@ class AppTable {
             catch (err) {
                 if (err === 'CANCELLED')
                     return false; // User cancel
-                console.error('Error while checking if can delete rows', err);
+                console.error(`${this.logPrefix} Error while checking if can delete rows`, err);
                 throw err;
             }
         }
@@ -44164,13 +44360,13 @@ class AppTable {
             catch (err) {
                 if (err === 'CANCELLED')
                     return false; // User cancel
-                console.error('Error while checking if can cancel rows', err);
+                console.error(`${this.logPrefix} Error while checking if can cancel rows`, err);
                 throw err;
             }
         }
         // Ask user confirmation
-        if (this.confirmBeforeCancel && (!opts || opts.interactive !== false)) {
-            return this.askCancelConfirmation(null, rows);
+        if (this.confirmBeforeCancel && opts?.interactive !== false) {
+            return this.askCancelConfirmation(null, rows, opts);
         }
         return true;
     }
@@ -44208,7 +44404,7 @@ class AppTable {
                 catch (err) {
                     if (err === 'CANCELLED')
                         return false; // User cancel
-                    console.error('Error while checking if can delete rows', err);
+                    console.error(`${this.logPrefix} Error while checking if can delete rows`, err);
                     throw err;
                 }
             }
@@ -44235,7 +44431,7 @@ class AppTable {
     async openRow(id, row) {
         if (this.allowRowDetail) {
             if (this.debug && this.dirty) {
-                console.warn('[table] Opening row details, but table has unsaved changes!');
+                console.warn(`${this.logPrefix} Opening row details, but table has unsaved changes!`);
             }
             if (this.onOpenRow.observed) {
                 // Clear selection (because next route can change the current table content)
@@ -44245,7 +44441,7 @@ class AppTable {
             }
             // No ID defined: unable to open details
             if (isNil(id)) {
-                console.warn('[table] Opening row details, but data has no id!');
+                console.warn(`${this.logPrefix} Opening row details, but data has no id!`);
                 return false;
             }
             // Clear selection (because next route can change the current table content)
@@ -44301,9 +44497,9 @@ class AppTable {
             return this.columns.filter((column) => !this.excludesColumns.includes(column));
         }
         // Get fixed start columns
-        const fixedStartColumns = this.columns.filter((c) => RESERVED_START_COLUMNS.includes(c));
+        const fixedStartColumns = this.columns.filter((c) => this.reservedStartColumns.includes(c));
         // Remove end columns
-        const fixedEndColumns = this.columns.filter((c) => RESERVED_END_COLUMNS.includes(c));
+        const fixedEndColumns = this.columns.filter((c) => this.reservedEndColumns.includes(c));
         // Remove fixed columns from user columns
         userColumns = userColumns.filter((c) => !fixedStartColumns.includes(c) && !fixedEndColumns.includes(c) && this.columns.includes(c));
         // Add required columns if missing
@@ -44347,13 +44543,13 @@ class AppTable {
             .replace(/\/\d+/g, '_id') +
             '_' +
             componentId;
-        //if (this.debug) console.debug('[table] id = ' + id);
+        //if (this.debug) console.debug(`${this.logPrefix} id = ` + id);
         return id;
     }
     async addRowToTable(insertAt, opts) {
         // Try to finish edited row first
         if (!this.confirmEditCreate()) {
-            console.warn('[table] Cannot add new row, because the previous edited row cannot be confirmed');
+            console.warn(`${this.logPrefix} Cannot add new row, because the previous edited row cannot be confirmed`);
             return undefined;
         }
         const editing = this.inlineEdition && opts?.editing !== false; // true by default, if inlineEdition
@@ -44386,7 +44582,7 @@ class AppTable {
         // Not exists: register new definition
         if (!def) {
             if (this.debug)
-                console.debug(`[table] New listener {${name}} for value changes on path ${formPath}`);
+                console.debug(`${this.logPrefix} New listener {${name}} for value changes on path ${formPath}`);
             def = {
                 subject: new Subject(),
                 subscription: null,
@@ -44545,7 +44741,7 @@ class AppTable {
             // DEBUG only -- alert user that table not found in template
             if (this.debug) {
                 setTimeout(() => !this.table &&
-                    console.warn(`[table] Missing <mat-table> in the HTML template (after waiting 500ms)! Component: ${this.constructor.name}`), 500);
+                    console.warn(`${this.logPrefix} Missing <mat-table> in the HTML template (after waiting 500ms)! Component: ${this.constructor.name}`), 500);
             }
             // Make sure to wait the table
             await waitFor(() => !!this.table, { stop: this.destroySubject, stopError: false /*avoid error when destorying the table*/ });
@@ -44621,14 +44817,14 @@ class AppTable {
         // Make sure row will be cancelled, and NOT deleted
         if (row.id === -1 || !row.editing)
             throw new Error('Row cannot be canceling, but only deleting');
-        const confirmed = !opts || opts.interactive !== false;
+        const askConfirmation = !opts || opts.interactive !== false;
         // Ask user confirmation, if cancel
-        if (!confirmed && row.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observed)) {
+        if (askConfirmation && row.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observed)) {
             event?.stopPropagation();
             this.canCancelRows([row], opts).then((confirm) => {
                 // If confirmed, loop
                 if (confirm)
-                    this.cancelExistingRow(event, row, { interactive: false });
+                    this.cancelExistingRow(event, row, { ...opts, interactive: false });
             });
             return;
         }
@@ -44664,7 +44860,7 @@ class AppTable {
     }
     applyFilter(filter, opts) {
         if (this.debug)
-            console.debug('[table] Applying filter', filter);
+            console.debug(`${this.logPrefix} Applying filter`, filter);
         this._filter = filter;
         if (opts && opts.emitEvent) {
             if (this.paginator && this.paginator.pageIndex > 0) {
@@ -44675,11 +44871,11 @@ class AppTable {
     }
     listenDataSourceLoading(dataSource) {
         if (!dataSource)
-            throw new Error('[table] dataSource not set !');
+            throw new Error(`${this.logPrefix} dataSource not set !`);
         // Cleaning previous subscription on datasource
         if (isNotNil(this._dataSourceLoadingSubscription)) {
             if (this.debug)
-                console.debug('[table] Many call to listenDatasource(): Cleaning previous subscriptions...');
+                console.debug(`${this.logPrefix} Many call to listenDatasource(): Cleaning previous subscriptions...`);
             this._dataSourceLoadingSubscription.unsubscribe();
             this.unregisterSubscription(this._dataSourceLoadingSubscription);
         }
@@ -44697,7 +44893,7 @@ class AppTable {
     startCellValueChanges(name, row) {
         const def = this._cellValueChangesDefs[name];
         if (!def) {
-            console.warn(`[table] Listener with name {${name} not registered! Please call registerCellValueChanges() before`);
+            console.warn(`${this.logPrefix} Listener with name {${name} not registered! Please call registerCellValueChanges() before`);
             return;
         }
         // Stop previous subscription
@@ -44707,7 +44903,7 @@ class AppTable {
         }
         else {
             if (this.debug)
-                console.debug(`[table] Start values changes on row path {${def.formPath}}`);
+                console.debug(`${this.logPrefix} Start values changes on row path {${def.formPath}}`);
         }
         const control = getControlFromPath(row.validator, def.formPath);
         // Emit the actual value
@@ -44716,7 +44912,7 @@ class AppTable {
         }
         if (!control) {
             if (this.debug)
-                console.warn(`[table] Could not listen cell changes: no validator or invalid form path {${def.formPath}}`);
+                console.warn(`${this.logPrefix} Could not listen cell changes: no validator or invalid form path {${def.formPath}}`);
         }
         else {
             // Listen value changes, and redirect to event emitter
@@ -44733,7 +44929,7 @@ class AppTable {
             return;
         if (def.subscription) {
             if (this.debug)
-                console.debug('[table] Stop value changes on row path {' + def.formPath + '}');
+                console.debug(`${this.logPrefix} Stop value changes on row path {${def.formPath}}`);
             def.subscription.unsubscribe();
             def.subscription = null;
         }
@@ -44944,9 +45140,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Output
             }] } });
 
+// This code is under a free license (GPL version 3)
+const NAVIGATION_BUTTON_SELECTOR = '.mat-row-action-button-navigation';
+const ROW_SELECTOR = 'tr, mat-row';
+const FIELD_SELECTOR = 'input, select, textarea, mat-select, button';
+const ROW_NAVIGATION_DEFAULT_TIMEOUT = 300;
+/**
+ * Manages the focus during a navigation triggered by an invisible button of an actions column.
+ * The focus must never stay on these buttons:
+ * - While the focus has not reached a cell, the Tab key is locked. Otherwise (e.g. key held down), the next Tab
+ *   would reach the invisible buttons of other rows, and then leave the table;
+ * - If the row cannot be left (the action resolved to `false`), the focus goes back into this row;
+ * - If nothing took the focus when the lock ends (e.g. a column without autofocus), it is given to the target row,
+ *   or else to the row it came from.
+ *
+ * Must be created in an injection context.
+ */
+class RowNavigationFocus {
+    document = inject(DOCUMENT$1);
+    interactivityChecker = inject(InteractivityChecker);
+    _release;
+    /**
+     * @param event the focus event of the invisible button
+     * @param direction Forward: the target is the next row (first field). Backward: the target is the button's row (last field)
+     * @param action runs the navigation. Can return `false` (or a promise of it) if the row cannot be left
+     * @param timeout max duration (in ms) of the Tab key lock
+     */
+    navigate(event, direction, action, timeout = ROW_NAVIGATION_DEFAULT_TIMEOUT) {
+        if (this._release)
+            return; // Already navigating
+        const position = direction === 'forward' ? 'first' : 'last';
+        const buttonRow = this.getRow(event.target);
+        const sourceRow = this.getRow(event.relatedTarget) ?? buttonRow;
+        this.lockTabKey(timeout, () => {
+            if (!this.isFocusLost())
+                return;
+            const targetRow = direction === 'forward' ? this.getNextRow(buttonRow) : buttonRow;
+            if (!this.focusField(targetRow, position))
+                this.focusField(sourceRow, position);
+        });
+        new Promise((resolve) => resolve(action()))
+            .then((done) => {
+            if (done === false)
+                this.focusField(sourceRow, position);
+        })
+            .catch((err) => console.error('[row-navigation-focus] Failed to navigate', err));
+    }
+    /**
+     * Releases the Tab key (should be called when destroying the component)
+     */
+    release() {
+        this._release?.();
+    }
+    lockTabKey(timeout, onTimeout) {
+        const onKeyDown = (event) => {
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        const onFocusIn = (event) => {
+            if (!event.target.matches?.(NAVIGATION_BUTTON_SELECTOR))
+                this.release();
+        };
+        const timer = setTimeout(() => {
+            this.release();
+            onTimeout();
+        }, timeout);
+        // Listen on the document, because the focus is lost when the focused button is removed
+        this.document.addEventListener('keydown', onKeyDown, true);
+        this.document.addEventListener('focusin', onFocusIn, true);
+        this._release = () => {
+            this._release = null;
+            clearTimeout(timer);
+            this.document.removeEventListener('keydown', onKeyDown, true);
+            this.document.removeEventListener('focusin', onFocusIn, true);
+        };
+    }
+    isFocusLost() {
+        const active = this.document.activeElement;
+        return !active || active === this.document.body || active.matches(NAVIGATION_BUTTON_SELECTOR);
+    }
+    getRow(target) {
+        return target?.closest?.(ROW_SELECTOR);
+    }
+    getNextRow(row) {
+        // Skip other elements (e.g. the anchors of a focus trap)
+        let next = row?.nextElementSibling;
+        while (next && !next.matches(ROW_SELECTOR))
+            next = next.nextElementSibling;
+        return next;
+    }
+    focusField(row, position) {
+        if (!row)
+            return false;
+        const fields = Array.from(row.querySelectorAll(FIELD_SELECTOR)).filter((field) => !field.matches(NAVIGATION_BUTTON_SELECTOR) && this.interactivityChecker.isFocusable(field) && this.interactivityChecker.isTabbable(field));
+        const field = fields[position === 'first' ? 0 : fields.length - 1];
+        field?.focus();
+        return !!field;
+    }
+}
+
 class ActionsColumnComponent {
     table;
     cd;
+    navigationFocus = new RowNavigationFocus();
     columnDef;
     matMenuTrigger;
     matColumnDef = 'actions';
@@ -44965,6 +45263,8 @@ class ActionsColumnComponent {
     classList;
     cellTemplateStart;
     cellTemplate;
+    /** Max duration (in ms) of the Tab key lock, if the focus never reaches a cell after a navigation */
+    navigationTimeout = ROW_NAVIGATION_DEFAULT_TIMEOUT;
     optionsClick = new EventEmitter();
     cancelOrDeleteClick = new EventEmitter();
     confirmEditCreateClick = new EventEmitter();
@@ -44992,6 +45292,7 @@ class ActionsColumnComponent {
         this.dirtyIcon = this.dirtyIcon === true ? 'star' : this.dirtyIcon === false ? null : (this.dirtyIcon ?? 'star');
     }
     ngOnDestroy() {
+        this.navigationFocus.release();
         this.table.removeColumnDef(this.columnDef);
         this.optionsClick.complete();
         this.optionsClick.unsubscribe();
@@ -45004,12 +45305,18 @@ class ActionsColumnComponent {
         this.forward.complete();
         this.forward.unsubscribe();
     }
+    emitForward(event, row) {
+        this.navigationFocus.navigate(event, 'forward', () => this.forward.emit({ event, row }), this.navigationTimeout);
+    }
+    emitBackward(event, row) {
+        this.navigationFocus.navigate(event, 'backward', () => this.backward.emit({ event, row }), this.navigationTimeout);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ActionsColumnComponent, deps: [{ token: i5$1.MatTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ActionsColumnComponent, isStandalone: false, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", showPendingSpinner: ["showPendingSpinner", "showPendingSpinner", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canCancel: ["canCancel", "canCancel", booleanAttribute], canConfirm: ["canConfirm", "canConfirm", booleanAttribute], canDelete: ["canDelete", "canDelete", booleanAttribute], canBackward: ["canBackward", "canBackward", booleanAttribute], canForward: ["canForward", "canForward", booleanAttribute], canConfirmAndAdd: ["canConfirmAndAdd", "canConfirmAndAdd", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplateStart: "cellTemplateStart", cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending && showPendingSpinner) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"backward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && row.validator?.invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button\n              class=\"mat-row-action-button-navigation\"\n              (focus)=\"backward.emit({ event: $event, row: row })\"\n            ></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ActionsColumnComponent, isStandalone: false, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", showPendingSpinner: ["showPendingSpinner", "showPendingSpinner", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canCancel: ["canCancel", "canCancel", booleanAttribute], canConfirm: ["canConfirm", "canConfirm", booleanAttribute], canDelete: ["canDelete", "canDelete", booleanAttribute], canBackward: ["canBackward", "canBackward", booleanAttribute], canForward: ["canForward", "canForward", booleanAttribute], canConfirmAndAdd: ["canConfirmAndAdd", "canConfirmAndAdd", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplateStart: "cellTemplateStart", cellTemplate: "cellTemplate", navigationTimeout: "navigationTimeout" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending && showPendingSpinner) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"emitForward($event, row)\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"emitBackward($event, row)\"></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && row.validator?.invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button class=\"mat-row-action-button-navigation\" (focus)=\"emitForward($event, row)\"></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button class=\"mat-row-action-button-navigation\" (focus)=\"emitForward($event, row)\"></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button class=\"mat-row-action-button-navigation\" (focus)=\"emitBackward($event, row)\"></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ActionsColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-actions-column', standalone: false, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending && showPendingSpinner) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"backward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && row.validator?.invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button\n              class=\"mat-row-action-button-navigation\"\n              (focus)=\"backward.emit({ event: $event, row: row })\"\n            ></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"] }]
+            args: [{ selector: 'app-actions-column', standalone: false, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending && showPendingSpinner) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"emitForward($event, row)\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"emitBackward($event, row)\"></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_APPLY' | translate) : ''\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && row.validator?.invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button class=\"mat-row-action-button-navigation\" (focus)=\"emitForward($event, row)\"></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_UNDO' | translate) : ''\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button class=\"mat-row-action-button-navigation\" (focus)=\"emitForward($event, row)\"></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button class=\"mat-row-action-button-navigation\" (focus)=\"emitBackward($event, row)\"></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"] }]
         }], ctorParameters: () => [{ type: i5$1.MatTable }, { type: i0.ChangeDetectorRef }], propDecorators: { columnDef: [{
                 type: ViewChild,
                 args: [MatColumnDef]
@@ -45055,6 +45362,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], cellTemplate: [{
                 type: Input
+            }], navigationTimeout: [{
+                type: Input
             }], optionsClick: [{
                 type: Output
             }], cancelOrDeleteClick: [{
@@ -45545,7 +45854,7 @@ class UsersPage extends AppTable {
     getDisplayValueFn = FormFieldDefinitionUtils.getDisplayValueFn;
     isNotNilOrBlank = isNotNilOrBlank;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UsersPage, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: i3$5.ValidatorService }, { token: ConfigService }, { token: APP_PERSON_SERVICE }, { token: MessageService }, { token: MenuService }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UsersPage, isStandalone: false, selector: "app-users-table", inputs: { showSelectColumn: "showSelectColumn", showIdColumn: "showIdColumn", showUsernameColumn: "showUsernameColumn", showUsernameExtranetColumn: "showUsernameExtranetColumn", showEmailColumn: "showEmailColumn", showPubkeyColumn: "showPubkeyColumn", showCreationDateColumn: "showCreationDateColumn", showUpdateDateColumn: "showUpdateDateColumn", title: "title", toolbarColor: "toolbarColor", canSendMessage: ["canSendMessage", "canSendMessage", booleanAttribute], canEdit: ["canEdit", "canEdit", booleanAttribute], compact: ["compact", "compact", booleanAttribute], usePageSettings: ["usePageSettings", "usePageSettings", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canDownload: ["canDownload", "canDownload", booleanAttribute], inModal: ["inModal", "inModal", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute] }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "filterAutocompleteFields", predicate: ["filterAutocompleteFields"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"title || 'USER.LIST.TITLE' | translate\"\n  [color]=\"toolbarColor\"\n  [canGoBack]=\"false\"\n  [class.cdk-visible-hidden]=\"!showToolbar\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- Compose message -->\n    @if (canSendMessage) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('USER.LIST.BTN_SEND_MESSAGE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('USER.LIST.BTN_SEND_MESSAGE' | translate) : ''\"\n        (click)=\"openComposeMessageModal($event)\"\n      >\n        <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n      </button>\n    }\n\n    @if (!canEdit || (selection | isEmptySelection)) {\n      @if (canEdit && !mobile) {\n        <!-- Add -->\n        <button\n          mat-icon-button\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\n      <!-- Refresh -->\n      @if (!mobile) {\n        <button\n          mat-icon-button\n          [title]=\"!showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n          (click)=\"emitRefresh()\"\n        >\n          <mat-icon>refresh</mat-icon>\n        </button>\n      }\n      <!-- reset filter -->\n      @if (filterCriteriaCount) {\n        <button mat-icon-button (click)=\"resetFilter()\">\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\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        @if (filterCriteriaCount) {\n          <mat-icon\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        } @else {\n          <mat-icon>filter_list_alt</mat-icon>\n        }\n      </button>\n    } @else if (canEdit) {\n      <!-- delete -->\n      <button\n        mat-icon-button\n        class=\"hidden-xs hidden-sm\"\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\n    @if (!mobile && (canDownload || canDebug)) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n        [matMenuTriggerFor]=\"toolbarOptionsMenu\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Toolbar option menu -->\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <!-- export button -->\n    @if (canDownload) {\n      <button mat-menu-item (click)=\"exportToCsv($event)\">\n        <mat-icon>download</mat-icon>\n        <ion-text>{{ 'FILE.CSV.BTN_DOWNLOAD_HELP' | translate }}</ion-text>\n      </button>\n    }\n\n    <!-- Debug only: Test select users modal -->\n    @if (canDebug) {\n      <mat-divider></mat-divider>\n\n      <button\n        mat-menu-item\n        #menuTrigger=\"matMenuTrigger\"\n        (mouseenter)=\"menuTrigger.openMenu()\"\n        [matMenuTriggerFor]=\"debugMenu\"\n      >\n        <mat-icon>\n          <ion-icon name=\"bug\"></ion-icon>\n        </mat-icon>\n        <ion-text>{{ 'COMMON.DEBUG.BTN_DEBUG_DOTS' | translate }}</ion-text>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- debug menu -->\n<mat-menu #debugMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"devToggleDebug()\">\n      <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-text>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-text>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- error -->\n  @let error = errorSubject | async;\n  @if (mobile && (errorSubject | async)) {\n    <ion-item lines=\"none\" class=\"hidden-sm hidden-xs hidden-mobile\" @slideUpDownAnimation>\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n    </ion-item>\n  }\n  <!-- debug -->\n  @if (debug) {\n    <app-debug>\n      <ion-grid class=\"ion-no-padding\">\n        <ion-row>\n          <ion-col>\n            focusColumn: {{ focusColumn }}\n            <br />\n            loadingSubject: {{ loading }}\n            <br />\n            toolbarColor: {{ toolbarColor }}\n          </ion-col>\n          <ion-col>\n            showPubkeyColumn: {{ showPubkeyColumn }}\n            <br />\n            <br />\n            excludesColumns : {{ excludesColumns }}\n            <br />\n            displayedColumns: {{ displayedColumns }}\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterForm($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\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\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.STATUS' | translate }}</mat-label>\n              <mat-select formControlName=\"statusId\">\n                <mat-option [value]=\"null\">\n                  <i>\n                    <span>{{ 'COMMON.EMPTY_OPTION' | translate }}</span>\n                  </i>\n                </mat-option>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <ion-icon [name]=\"item.icon\"></ion-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                [hidden]=\"filterForm.controls.statusId.disabled || filterForm.controls.statusId.value == null\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- user profiles -->\n            <mat-chips-field\n              formControlName=\"userProfiles\"\n              [placeholder]=\"'USER.PROFILES' | translate\"\n              chipColor=\"accent\"\n              [items]=\"userProfileList\"\n              [displayAttributes]=\"['name']\"\n              [clearable]=\"true\"\n            ></mat-chips-field>\n          </ion-col>\n        </ion-row>\n\n        <!-- Additional fields filters -->\n        @if (additionalFilterFields | isNotEmptyArray) {\n          <ion-row>\n            @for (field of additionalFilterFields; track field.key) {\n              <ion-col size=\"12\" size-md=\"6\" size-lg=\"4\">\n                <app-form-field\n                  #filterAutocompleteFields\n                  [definition]=\"field\"\n                  [formControlName]=\"field.key\"\n                  [clearable]=\"true\"\n                  floatLabel=\"auto\"\n                ></app-form-field>\n              </ion-col>\n            }\n          </ion-row>\n        }\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) === true || 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      <!-- Close panel -->\n      <ion-button\n        mat-button\n        fill=\"clear\"\n        color=\"dark\"\n        (click)=\"filterExpansionPanel.close()\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text>{{ 'COMMON.BTN_APPLY' | translate }}</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n    </ion-item>\n  }\n\n  <div\n    class=\"table-container\"\n    [class.has-toolbar]=\"showToolbar\"\n    [class.has-paginator]=\"showPaginator\"\n    [class.has-form-buttons]=\"showFormButtons\"\n  >\n    <table\n      #table\n      mat-table\n      matSort\n      [class.compact]=\"compact\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      matSortDisableClear\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition && !showSelectColumn\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition && !showSelectColumn\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection | isSelected: 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 mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-label>{{ row.currentData.id }}</ion-label>\n        </td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-avatar [style.background-color]=\"'white'\">\n            @if (row.currentData.avatar; as avatarUrl) {\n              <ion-img [src]=\"avatarUrl\"></ion-img>\n            } @else {\n              <svg width=\"39\" height=\"39\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            }\n          </ion-avatar>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.LAST_NAME' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'lastName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['lastName']\"\n                [placeholder]=\"'USER.LAST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'lastName'\"\n              />\n              @if (row.validator.controls['lastName'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls['lastName'].hasError('minlength')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'lastName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.FIRST_NAME' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'firstName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['firstName']\"\n                [placeholder]=\"'USER.FIRST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'firstName'\"\n              />\n              @if (row.validator.controls['firstName'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls['firstName'].hasError('minlength')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'firstName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.EMAIL' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'email'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['email']\"\n                [placeholder]=\"'USER.EMAIL' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'email'\"\n              />\n              @if (row.validator.controls['email'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls['email'].hasError('email')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'email' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      @for (definition of additionalFields; track definition.key) {\n        <ng-container [matColumnDef]=\"definition.key\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span>{{ definition.label | translate }}</span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = definition.key\">\n            @if (row.editing) {\n              <app-form-field\n                floatLabel=\"never\"\n                [definition]=\"definition\"\n                [formControl]=\"row.validator.controls[definition.key]\"\n                [required]=\"definition.extra?.users?.required\"\n                [autofocus]=\"row.editing && focusColumn === definition.key\"\n              ></app-form-field>\n            } @else {\n              <ion-label appAutoTitle>\n                {{ row.validator | formGetValue: definition.key | displayWith: getDisplayValueFn(definition) }}\n              </ion-label>\n            }\n          </td>\n        </ng-container>\n      }\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{ 'USER.PROFILE' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'profile'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"row.validator | formGetControl: 'mainProfile'\"\n                [placeholder]=\"'USER.PROFILE' | translate\"\n              >\n                @for (item of profiles; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'USER.PROFILE_ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (row.validator.controls['mainProfile'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            @let profile = row.validator | formGetValue: 'mainProfile';\n            @if (profile) {\n              <ion-label appAutoTitle>{{ 'USER.PROFILE_ENUM.' + profile | uppercase | translate }}</ion-label>\n            }\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{ 'USER.STATUS' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'status'\">\n          @if (row.editing) {\n            @let control = row.validator | formGetControl: 'statusId';\n            <mat-form-field>\n              <mat-select [formControl]=\"control\" [placeholder]=\"'REFERENTIAL.STATUS' | translate\">\n                <mat-select-trigger>\n                  @if (control.value >= 0) {\n                    <span>\n                      {{ statusById[control.value]?.label | translate }}\n                    </span>\n                  }\n                </mat-select-trigger>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <mat-icon>\n                      <ion-icon [name]=\"item.icon\"></ion-icon>\n                    </mat-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            @let statusId = row.validator | formGetValue: 'statusId';\n            @if (statusId >= 0) {\n              <ion-label appAutoTitle>\n                {{ (statusById | mapGet: statusId)?.label | translate }}\n              </ion-label>\n            }\n          }\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.USERNAME' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'username'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.username\"\n                [placeholder]=\"'USER.USERNAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'username'\"\n              />\n              @if (row.validator.controls.username.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'username' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.USERNAME_EXTRANET' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'usernameExtranet'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.usernameExtranet\"\n                [placeholder]=\"'USER.USERNAME_EXTRANET' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'usernameExtranet'\"\n              />\n              @if (row.validator.controls.usernameExtranet.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'usernameExtranet' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.PUBKEY' | translate }}</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [title]=\"!showTooltip ? (row.validator.controls.pubkey.valueChanges | async) : ''\"\n          [matTooltip]=\"showTooltip ? (row.validator.controls.pubkey.valueChanges | async) : ''\"\n          (click)=\"focusColumn = 'pubkey'\"\n        >\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['pubkey']\"\n                [placeholder]=\"'USER.PUBKEY' | translate\"\n                [readonly]=\"!row.editing\"\n                autocomplete=\"off\"\n              />\n              @if (row.validator.controls.pubkey.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls.pubkey.hasError('pubkey')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_NOT_VALID_PUBKEY' | translate }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'pubkey' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ 'USER.CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          @if (row.id !== -1) {\n            <ion-text class=\"ion-text-end\" color=\"medium\">\n              {{ row.currentData.creationDate | dateFormat: { time: true } }}\n            </ion-text>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Update date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ 'USER.UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          @if (row.id !== -1) {\n            <ion-text class=\"ion-text-end\" color=\"medium\">\n              {{ row.currentData.updateDate | dateFormat: { time: true } }}\n            </ion-text>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmEditCreateClick)=\"confirmEditCreate($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        [canCancel]=\"false\"\n      >\n        <!-- table options menu -->\n        <button\n          matHeader\n          mat-icon-button\n          [title]=\"!showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n          [matMenuTriggerFor]=\"tableOptionsMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\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-error]=\"row.validator.invalid\"\n        [class.mat-row-dirty]=\"row.currentData.dirty\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-selected]=\"row.editing || (!canEdit && selection | isSelected: row)\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"!row.validator?.valid\"\n      ></tr>\n    </table>\n\n    <!-- D\u00E9clencheur invisible pour le mat-menu -->\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else if (totalRowCount === 0) {\n      <ion-item>\n        <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n      </ion-item>\n    }\n  </div>\n</ion-content>\n\n<!-- Table options menu -->\n<mat-menu #tableOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <!-- display columns -->\n  <button mat-menu-item (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label>{{ 'COMMON.DISPLAYED_COLUMNS_DOTS' | translate }}</ion-label>\n  </button>\n\n  @if (usePageSettings) {\n    <mat-divider></mat-divider>\n\n    <!-- Compact mode -->\n    <button mat-menu-item (click)=\"toggleCompactMode()\">\n      <mat-icon>{{ compact ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label>{{ 'COMMON.BTN_COMPACT_ROWS' | translate }}</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<ion-footer>\n  @if (showPaginator) {\n    <mat-paginator\n      class=\"mat-paginator-footer\"\n      [length]=\"totalRowCount\"\n      [pageSize]=\"defaultPageSize\"\n      [pageSizeOptions]=\"defaultPageSizeOptions\"\n      showFirstLastButtons\n    ></mat-paginator>\n  }\n\n  @if (showFormButtons) {\n    <app-form-buttons-bar\n      (onCancel)=\"cancel($event)\"\n      (onSave)=\"save()\"\n      [disabled]=\"(loadingSubject | async) === true || (dirtySubject | async) !== true\"\n    >\n      <!-- error -->\n      @if (error) {\n        <ion-item lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\n    </app-form-buttons-bar>\n  }\n</ion-footer>\n\n@if (mobile) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}ion-content{height:calc(100% - var(--table-offset, 0px))}.table-container{height:100%}.table-container.has-toolbar{--table-toolbar-height: var(--mat-toolbar-height, 64px)}.table-container.has-paginator{--table-paginator-height: var(--app-paginator-height, 34px)}.table-container.has-form-buttons{--form-buttons-height: var(--ion-toolbar-height, 56px)}.mat-mdc-table .mat-column-avatar{--avatar-width: 40px;--avatar-height: 40px;width:calc(var(--avatar-width) + 10px)}.mat-mdc-table .mat-column-avatar ion-avatar{--border-radius: 5px !important;--border-width: 1px !important;--border-color: rgba(var(--ion-color-secondary-rgb), .5) !important;height:var(--avatar-height);max-height:var(--avatar-height);width:var(--avatar-width);max-width:var(--avatar-width);border:solid var(--border-width) var(--border-color);margin:0 2px}.mat-mdc-table .mat-column-avatar ion-avatar svg{max-height:calc(var(--avatar-height) - 1px);max-width:calc(var(--avatar-width) - 1px)}.mat-mdc-table.compact{--mat-row-height: 33px}.mat-mdc-table.compact .mat-column-avatar{--avatar-width: calc(var(--mat-row-height, 33px) - 4px);--avatar-height: calc(var(--mat-row-height, 33px) - 4px)}.mat-mdc-table .mat-column-id{min-width:50px;max-width:120px;padding-right:var(--mat-cell-horizontal-padding, 4px)}.mat-mdc-table .mat-column-lastName,.mat-mdc-table .mat-column-firstName{min-width:80px}.mat-mdc-table .mat-column-email,.mat-mdc-table .mat-column-pubkey,.mat-mdc-table .mat-column-department{min-width:180px}.mat-mdc-table .mat-column-profile{min-width:110px}.mat-mdc-table .mat-column-status,.mat-mdc-table .mat-column-creationDate,.mat-mdc-table .mat-column-updateDate{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$4.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "component", type: i2$2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.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$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { 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", "definitionChanged"] }, { 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: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { 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: DisplayWithPipe, name: "displayWith" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UsersPage, isStandalone: false, selector: "app-users-table", inputs: { showSelectColumn: "showSelectColumn", showIdColumn: "showIdColumn", showUsernameColumn: "showUsernameColumn", showUsernameExtranetColumn: "showUsernameExtranetColumn", showEmailColumn: "showEmailColumn", showPubkeyColumn: "showPubkeyColumn", showCreationDateColumn: "showCreationDateColumn", showUpdateDateColumn: "showUpdateDateColumn", title: "title", toolbarColor: "toolbarColor", canSendMessage: ["canSendMessage", "canSendMessage", booleanAttribute], canEdit: ["canEdit", "canEdit", booleanAttribute], compact: ["compact", "compact", booleanAttribute], usePageSettings: ["usePageSettings", "usePageSettings", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canDownload: ["canDownload", "canDownload", booleanAttribute], inModal: ["inModal", "inModal", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute] }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "filterAutocompleteFields", predicate: ["filterAutocompleteFields"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"title || 'USER.LIST.TITLE' | translate\"\n  [color]=\"toolbarColor\"\n  [canGoBack]=\"false\"\n  [class.cdk-visible-hidden]=\"!showToolbar\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- Compose message -->\n    @if (canSendMessage) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('USER.LIST.BTN_SEND_MESSAGE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('USER.LIST.BTN_SEND_MESSAGE' | translate) : ''\"\n        (click)=\"openComposeMessageModal($event)\"\n      >\n        <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n      </button>\n    }\n\n    @if (!canEdit || (selection | isEmptySelection)) {\n      @if (canEdit && !mobile) {\n        <!-- Add -->\n        <button\n          mat-icon-button\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\n      <!-- Refresh -->\n      @if (!mobile) {\n        <button\n          mat-icon-button\n          [title]=\"!showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n          (click)=\"emitRefresh()\"\n        >\n          <mat-icon>refresh</mat-icon>\n        </button>\n      }\n      <!-- reset filter -->\n      @if (filterCriteriaCount) {\n        <button mat-icon-button (click)=\"resetFilter()\">\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\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        @if (filterCriteriaCount) {\n          <mat-icon\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        } @else {\n          <mat-icon>filter_list_alt</mat-icon>\n        }\n      </button>\n    } @else if (canEdit) {\n      <!-- delete -->\n      <button\n        mat-icon-button\n        class=\"hidden-xs hidden-sm\"\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\n    @if (!mobile && (canDownload || canDebug)) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n        [matMenuTriggerFor]=\"toolbarOptionsMenu\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Toolbar option menu -->\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <!-- export button -->\n    @if (canDownload) {\n      <button mat-menu-item (click)=\"exportToCsv($event)\">\n        <mat-icon>download</mat-icon>\n        <ion-text>{{ 'FILE.CSV.BTN_DOWNLOAD_HELP' | translate }}</ion-text>\n      </button>\n    }\n\n    <!-- Debug only: Test select users modal -->\n    @if (canDebug) {\n      <mat-divider></mat-divider>\n\n      <button\n        mat-menu-item\n        #menuTrigger=\"matMenuTrigger\"\n        (mouseenter)=\"menuTrigger.openMenu()\"\n        [matMenuTriggerFor]=\"debugMenu\"\n      >\n        <mat-icon>\n          <ion-icon name=\"bug\"></ion-icon>\n        </mat-icon>\n        <ion-text>{{ 'COMMON.DEBUG.BTN_DEBUG_DOTS' | translate }}</ion-text>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- debug menu -->\n<mat-menu #debugMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"devToggleDebug()\">\n      <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-text>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-text>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- error -->\n  @let error = errorSubject | async;\n  @if (mobile && (errorSubject | async)) {\n    <ion-item lines=\"none\" class=\"hidden-sm hidden-xs hidden-mobile\" @slideUpDownAnimation>\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n    </ion-item>\n  }\n  <!-- debug -->\n  @if (debug) {\n    <app-debug>\n      <ion-grid class=\"ion-no-padding\">\n        <ion-row>\n          <ion-col>\n            focusColumn: {{ focusColumn }}\n            <br />\n            loadingSubject: {{ loading }}\n            <br />\n            toolbarColor: {{ toolbarColor }}\n          </ion-col>\n          <ion-col>\n            showPubkeyColumn: {{ showPubkeyColumn }}\n            <br />\n            <br />\n            excludesColumns : {{ excludesColumns }}\n            <br />\n            displayedColumns: {{ displayedColumns }}\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterForm($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\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\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.STATUS' | translate }}</mat-label>\n              <mat-select formControlName=\"statusId\">\n                <mat-option [value]=\"null\">\n                  <i>\n                    <span>{{ 'COMMON.EMPTY_OPTION' | translate }}</span>\n                  </i>\n                </mat-option>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <ion-icon [name]=\"item.icon\"></ion-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                [hidden]=\"filterForm.controls.statusId.disabled || filterForm.controls.statusId.value == null\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- user profiles -->\n            <mat-chips-field\n              formControlName=\"userProfiles\"\n              [placeholder]=\"'USER.PROFILES' | translate\"\n              chipColor=\"accent\"\n              [items]=\"userProfileList\"\n              [displayAttributes]=\"['name']\"\n              [clearable]=\"true\"\n            ></mat-chips-field>\n          </ion-col>\n        </ion-row>\n\n        <!-- Additional fields filters -->\n        @if (additionalFilterFields | isNotEmptyArray) {\n          <ion-row>\n            @for (field of additionalFilterFields; track field.key) {\n              <ion-col size=\"12\" size-md=\"6\" size-lg=\"4\">\n                <app-form-field\n                  #filterAutocompleteFields\n                  [definition]=\"field\"\n                  [formControlName]=\"field.key\"\n                  [clearable]=\"true\"\n                  floatLabel=\"auto\"\n                ></app-form-field>\n              </ion-col>\n            }\n          </ion-row>\n        }\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) === true || 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      <!-- Close panel -->\n      <ion-button\n        mat-button\n        fill=\"clear\"\n        color=\"dark\"\n        (click)=\"filterExpansionPanel.close()\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text>{{ 'COMMON.BTN_APPLY' | translate }}</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n    </ion-item>\n  }\n\n  <div\n    class=\"table-container\"\n    [class.has-toolbar]=\"showToolbar\"\n    [class.has-paginator]=\"showPaginator\"\n    [class.has-form-buttons]=\"showFormButtons\"\n  >\n    <table\n      #table\n      mat-table\n      matSort\n      [class.compact]=\"compact\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      matSortDisableClear\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition && !showSelectColumn\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition && !showSelectColumn\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection | isSelected: 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 mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-label>{{ row.currentData.id }}</ion-label>\n        </td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-avatar [style.background-color]=\"'white'\">\n            @if (row.currentData.avatar; as avatarUrl) {\n              <ion-img [src]=\"avatarUrl\"></ion-img>\n            } @else {\n              <svg width=\"39\" height=\"39\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            }\n          </ion-avatar>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.LAST_NAME' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'lastName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['lastName']\"\n                [placeholder]=\"'USER.LAST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'lastName'\"\n              />\n              @if (row.validator.controls['lastName'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls['lastName'].hasError('minlength')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'lastName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.FIRST_NAME' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'firstName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['firstName']\"\n                [placeholder]=\"'USER.FIRST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'firstName'\"\n              />\n              @if (row.validator.controls['firstName'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls['firstName'].hasError('minlength')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'firstName' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.EMAIL' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'email'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['email']\"\n                [placeholder]=\"'USER.EMAIL' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'email'\"\n              />\n              @if (row.validator.controls['email'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls['email'].hasError('email')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'email' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      @for (definition of additionalFields; track definition.key) {\n        <ng-container [matColumnDef]=\"definition.key\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span>{{ definition.label | translate }}</span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = definition.key\">\n            @if (row.editing) {\n              <app-form-field\n                floatLabel=\"never\"\n                [definition]=\"definition\"\n                [formControl]=\"row.validator.controls[definition.key]\"\n                [required]=\"definition.extra?.users?.required\"\n                [autofocus]=\"row.editing && focusColumn === definition.key\"\n              ></app-form-field>\n            } @else {\n              <ion-label appAutoTitle>\n                {{ row.validator | formGetValue: definition.key | displayWith: getDisplayValueFn(definition) }}\n              </ion-label>\n            }\n          </td>\n        </ng-container>\n      }\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{ 'USER.PROFILE' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'profile'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"row.validator | formGetControl: 'mainProfile'\"\n                [placeholder]=\"'USER.PROFILE' | translate\"\n              >\n                @for (item of profiles; track item) {\n                  <mat-option [value]=\"item\">\n                    {{ 'USER.PROFILE_ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (row.validator.controls['mainProfile'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            @let profile = row.validator | formGetValue: 'mainProfile';\n            @if (profile) {\n              <ion-label appAutoTitle>{{ 'USER.PROFILE_ENUM.' + profile | uppercase | translate }}</ion-label>\n            }\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{ 'USER.STATUS' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'status'\">\n          @if (row.editing) {\n            @let control = row.validator | formGetControl: 'statusId';\n            <mat-form-field>\n              <mat-select [formControl]=\"control\" [placeholder]=\"'REFERENTIAL.STATUS' | translate\">\n                <mat-select-trigger>\n                  @if (control.value >= 0) {\n                    <span>\n                      {{ statusById[control.value]?.label | translate }}\n                    </span>\n                  }\n                </mat-select-trigger>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <mat-icon>\n                      <ion-icon [name]=\"item.icon\"></ion-icon>\n                    </mat-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              @if (control.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            @let statusId = row.validator | formGetValue: 'statusId';\n            @if (statusId >= 0) {\n              <ion-label appAutoTitle>\n                {{ (statusById | mapGet: statusId)?.label | translate }}\n              </ion-label>\n            }\n          }\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.USERNAME' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'username'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.username\"\n                [placeholder]=\"'USER.USERNAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'username'\"\n              />\n              @if (row.validator.controls.username.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'username' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.USERNAME_EXTRANET' | translate }}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'usernameExtranet'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.usernameExtranet\"\n                [placeholder]=\"'USER.USERNAME_EXTRANET' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'usernameExtranet'\"\n              />\n              @if (row.validator.controls.usernameExtranet.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'usernameExtranet' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span>{{ 'USER.PUBKEY' | translate }}</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [title]=\"!showTooltip ? (row.validator.controls.pubkey.valueChanges | async) : ''\"\n          [matTooltip]=\"showTooltip ? (row.validator.controls.pubkey.valueChanges | async) : ''\"\n          (click)=\"focusColumn = 'pubkey'\"\n        >\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['pubkey']\"\n                [placeholder]=\"'USER.PUBKEY' | translate\"\n                [readonly]=\"!row.editing\"\n                autocomplete=\"off\"\n              />\n              @if (row.validator.controls.pubkey.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if (row.validator.controls.pubkey.hasError('pubkey')) {\n                <mat-error>\n                  <span>{{ 'ERROR.FIELD_NOT_VALID_PUBKEY' | translate }}</span>\n                </mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'pubkey' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ 'USER.CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          @if (row.id !== -1) {\n            <ion-text class=\"ion-text-end\" color=\"medium\">\n              {{ row.currentData.creationDate | dateFormat: { time: true } }}\n            </ion-text>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Update date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ 'USER.UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          @if (row.id !== -1) {\n            <ion-text class=\"ion-text-end\" color=\"medium\">\n              {{ row.currentData.updateDate | dateFormat: { time: true } }}\n            </ion-text>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmEditCreateClick)=\"confirmEditCreate($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        [canCancel]=\"false\"\n      >\n        <!-- table options menu -->\n        <button\n          matHeader\n          mat-icon-button\n          [title]=\"!showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('COMMON.BTN_OPTIONS' | translate) : ''\"\n          [matMenuTriggerFor]=\"tableOptionsMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\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-error]=\"row.validator.invalid\"\n        [class.mat-row-dirty]=\"row.currentData.dirty\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-selected]=\"row.editing || (!canEdit && selection | isSelected: row)\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"!row.validator?.valid\"\n      ></tr>\n    </table>\n\n    <!-- D\u00E9clencheur invisible pour le mat-menu -->\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else if (totalRowCount === 0) {\n      <ion-item>\n        <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n      </ion-item>\n    }\n  </div>\n</ion-content>\n\n<!-- Table options menu -->\n<mat-menu #tableOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <!-- display columns -->\n  <button mat-menu-item (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label>{{ 'COMMON.DISPLAYED_COLUMNS_DOTS' | translate }}</ion-label>\n  </button>\n\n  @if (usePageSettings) {\n    <mat-divider></mat-divider>\n\n    <!-- Compact mode -->\n    <button mat-menu-item (click)=\"toggleCompactMode()\">\n      <mat-icon>{{ compact ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label>{{ 'COMMON.BTN_COMPACT_ROWS' | translate }}</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<ion-footer>\n  @if (showPaginator) {\n    <mat-paginator\n      class=\"mat-paginator-footer\"\n      [length]=\"totalRowCount\"\n      [pageSize]=\"defaultPageSize\"\n      [pageSizeOptions]=\"defaultPageSizeOptions\"\n      showFirstLastButtons\n    ></mat-paginator>\n  }\n\n  @if (showFormButtons) {\n    <app-form-buttons-bar\n      (onCancel)=\"cancel($event)\"\n      (onSave)=\"save()\"\n      [disabled]=\"(loadingSubject | async) === true || (dirtySubject | async) !== true\"\n    >\n      <!-- error -->\n      @if (error) {\n        <ion-item lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\n    </app-form-buttons-bar>\n  }\n</ion-footer>\n\n@if (mobile) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}ion-content{height:calc(100% - var(--table-offset, 0px))}.table-container{height:100%}.table-container.has-toolbar{--table-toolbar-height: var(--mat-toolbar-height, 64px)}.table-container.has-paginator{--table-paginator-height: var(--app-paginator-height, 34px)}.table-container.has-form-buttons{--form-buttons-height: var(--ion-toolbar-height, 56px)}.mat-mdc-table .mat-column-avatar{--avatar-width: 40px;--avatar-height: 40px;width:calc(var(--avatar-width) + 10px)}.mat-mdc-table .mat-column-avatar ion-avatar{--border-radius: 5px !important;--border-width: 1px !important;--border-color: rgba(var(--ion-color-secondary-rgb), .5) !important;height:var(--avatar-height);max-height:var(--avatar-height);width:var(--avatar-width);max-width:var(--avatar-width);border:solid var(--border-width) var(--border-color);margin:0 2px}.mat-mdc-table .mat-column-avatar ion-avatar svg{max-height:calc(var(--avatar-height) - 1px);max-width:calc(var(--avatar-width) - 1px)}.mat-mdc-table.compact{--mat-row-height: 33px}.mat-mdc-table.compact .mat-column-avatar{--avatar-width: calc(var(--mat-row-height, 33px) - 4px);--avatar-height: calc(var(--mat-row-height, 33px) - 4px)}.mat-mdc-table .mat-column-id{min-width:50px;max-width:120px;padding-right:var(--mat-cell-horizontal-padding, 4px)}.mat-mdc-table .mat-column-lastName,.mat-mdc-table .mat-column-firstName{min-width:80px}.mat-mdc-table .mat-column-email,.mat-mdc-table .mat-column-pubkey,.mat-mdc-table .mat-column-department{min-width:180px}.mat-mdc-table .mat-column-profile{min-width:110px}.mat-mdc-table .mat-column-status,.mat-mdc-table .mat-column-creationDate,.mat-mdc-table .mat-column-updateDate{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$4.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "component", type: i2$2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.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$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { 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", "definitionChanged"] }, { 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", "navigationTimeout"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { 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: DisplayWithPipe, name: "displayWith" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UsersPage, decorators: [{
             type: Component,
@@ -47304,7 +47613,7 @@ class AppPropertiesTable extends AppInMemoryTable {
         this.markRowAsDirty();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppPropertiesTable, isStandalone: false, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [{ provide: PropertyEntityValidator, useClass: PropertyEntityValidator }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar [class.expanded]=\"filterExpansionPanel.expanded\">\n    <!-- Refresh -->\n    @if (!mobile) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        (click)=\"emitRefresh()\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n    }\n    @if (!mobile && error; as error) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n      </ion-item>\n    }\n    <div class=\"toolbar-spacer\"></div>\n    <!-- Reset filter -->\n    @if (filterCriteriaCount) {\n      <button mat-icon-button (click)=\"resetFilter()\">\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        [matBadge]=\"filterCriteriaCount\"\n        [matBadgeHidden]=\"filterIsEmpty\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"above after\"\n        aria-hidden=\"false\"\n      >\n        filter_list_alt\n      </mat-icon>\n    </button>\n  </mat-toolbar>\n}\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'SETTINGS.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n\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\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-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      @if (filterPanelFloating) {\n        <button\n          mat-icon-button\n          color=\"accent\"\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\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text>{{ 'COMMON.BTN_APPLY' | translate }}</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- table -->\n  <div class=\"table-container\">\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]=\"'52px'\"\n    >\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.label' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n      ></app-row-field>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          @if (\n            !mobile &&\n            !disabled &&\n            (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n          ) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              [class.visible-hover-row]=\"!mobile\"\n              [tabindex]=\"-1\"\n              [title]=\"!showTooltip ? ('SETTINGS.BTN_RESET_PROPERTY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_RESET_PROPERTY' | translate) : ''\"\n              (click)=\"resetProperty($event, row)\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\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.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.invalid\"\n      ></tr>\n    </table>\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: 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: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppPropertiesTable, isStandalone: false, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [{ provide: PropertyEntityValidator, useClass: PropertyEntityValidator }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar [class.expanded]=\"filterExpansionPanel.expanded\">\n    <!-- Refresh -->\n    @if (!mobile) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        (click)=\"emitRefresh()\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n    }\n    @if (!mobile && error; as error) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n      </ion-item>\n    }\n    <div class=\"toolbar-spacer\"></div>\n    <!-- Reset filter -->\n    @if (filterCriteriaCount) {\n      <button mat-icon-button (click)=\"resetFilter()\">\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        [matBadge]=\"filterCriteriaCount\"\n        [matBadgeHidden]=\"filterIsEmpty\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"above after\"\n        aria-hidden=\"false\"\n      >\n        filter_list_alt\n      </mat-icon>\n    </button>\n  </mat-toolbar>\n}\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'SETTINGS.FILTER.SEARCH' | translate }}</mat-label>\n              <input matInput formControlName=\"searchText\" />\n\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\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-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      @if (filterPanelFloating) {\n        <button\n          mat-icon-button\n          color=\"accent\"\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\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text>{{ 'COMMON.BTN_APPLY' | translate }}</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- table -->\n  <div class=\"table-container\">\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]=\"'52px'\"\n    >\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.label' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n      ></app-row-field>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          @if (\n            !mobile &&\n            !disabled &&\n            (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n          ) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              [class.visible-hover-row]=\"!mobile\"\n              [tabindex]=\"-1\"\n              [title]=\"!showTooltip ? ('SETTINGS.BTN_RESET_PROPERTY' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_RESET_PROPERTY' | translate) : ''\"\n              (click)=\"resetProperty($event, row)\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\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.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.invalid\"\n      ></tr>\n    </table>\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate", "navigationTimeout"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppPropertiesTable, decorators: [{
             type: Component,
@@ -49628,9 +49937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 class NavActionsColumnComponent {
     matTable;
     cd;
-    _subscription = new Subscription();
-    _forwardEventSubject = new Subject();
-    _backwardEventSubject = new Subject();
+    navigationFocus = new RowNavigationFocus();
     columnDef;
     matMenuTrigger;
     appTable;
@@ -49643,7 +49950,8 @@ class NavActionsColumnComponent {
     // eslint-disable-next-line @angular-eslint/no-input-rename
     classList;
     cellTemplate;
-    throttleTime = 250;
+    /** Max duration (in ms) of the Tab key lock, if the focus never reaches a cell after a navigation */
+    navigationTimeout = ROW_NAVIGATION_DEFAULT_TIMEOUT;
     optionsClick = new EventEmitter();
     showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
     constructor(matTable, cd, appTable, appAsyncTable) {
@@ -49652,7 +49960,6 @@ class NavActionsColumnComponent {
         if (!matTable)
             throw new Error(`[actions-column] this column component must be inside a MatTable component`);
         this.appTable = appTable ?? appAsyncTable;
-        this._subscription = new Subscription();
     }
     ngOnInit() {
         // Default values
@@ -49662,32 +49969,24 @@ class NavActionsColumnComponent {
         this.matTable.addColumnDef(this.columnDef);
         if (!this.appTable)
             throw new Error(`[nav-actions-column] No AppTable or AppAsyncTable found. Please define a provider or set input '[appTable]'`);
-        this._subscription.add(this._forwardEventSubject
-            .pipe(throttleTime(this.throttleTime) // Avoid too many event, when leaving Tab key pressed
-        )
-            .subscribe(({ event, row }) => this.appTable.confirmAndForward(event, row)));
-        this._subscription.add(this._backwardEventSubject
-            .pipe(throttleTime(this.throttleTime) // Avoid too many event, when leaving Back-Tab key pressed
-        )
-            .subscribe(({ event, row }) => this.appTable.confirmAndBackward(event, row)));
     }
     ngOnDestroy() {
         this.matTable.removeColumnDef(this.columnDef);
         this.optionsClick.complete();
         this.optionsClick.unsubscribe();
-        this._subscription.unsubscribe();
+        this.navigationFocus.release();
     }
     cancelOrDelete(event, row) {
         this.appTable.cancelOrDelete(event, row);
     }
     confirmAndForward(event, row) {
-        this._forwardEventSubject.next({ event, row });
+        this.navigationFocus.navigate(event, 'forward', () => this.appTable.confirmAndForward(event, row), this.navigationTimeout);
     }
     confirmAndBackward(event, row) {
-        this._backwardEventSubject.next({ event, row });
+        this.navigationFocus.navigate(event, 'backward', () => this.appTable.confirmAndBackward(event, row), this.navigationTimeout);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NavActionsColumnComponent, deps: [{ token: i5$1.MatTable }, { token: i0.ChangeDetectorRef }, { token: AppTable, optional: true }, { token: AppAsyncTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NavActionsColumnComponent, isStandalone: false, selector: "app-nav-actions-column", inputs: { appTable: "appTable", matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], showPending: ["showPending", "showPending", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate", throttleTime: "throttleTime" }, outputs: { optionsClick: "optionsClick" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    @case ('table') {\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n          }\n          <!-- invalid new row -->\n          @if (row.id === -1 && row.validator?.invalid) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              (click)=\"cancelOrDelete($event, row)\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n            <!-- valid row or invalid existing row -->\n          } @else {\n            <!-- forward button (invisible - focusable only) -->\n            <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n          }\n          <!-- NOT editing row -->\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n          }\n          <!-- backward button (invisible - focusable only) -->\n          <button\n            mat-icon-button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"confirmAndBackward($event, row)\"\n          ></button>\n        }\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </td>\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n          }\n          <!-- invalid new row -->\n          @if (row.id === -1 && row.validator?.invalid) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              (click)=\"cancelOrDelete($event, row)\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          } @else {\n            <!-- forward button (invisible - focusable only) -->\n            <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n          }\n          <!-- not editing row -->\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n          <!-- backward button (invisible - focusable only) -->\n          <button\n            mat-icon-button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"confirmAndBackward($event, row)\"\n          ></button>\n        }\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NavActionsColumnComponent, isStandalone: false, selector: "app-nav-actions-column", inputs: { appTable: "appTable", matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], showPending: ["showPending", "showPending", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate", navigationTimeout: "navigationTimeout" }, outputs: { optionsClick: "optionsClick" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    @case ('table') {\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"!showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n          }\n          <!-- invalid new row -->\n          @if (row.id === -1 && row.validator?.invalid) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              (click)=\"cancelOrDelete($event, row)\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n            <!-- valid row or invalid existing row -->\n          } @else {\n            <!-- forward button (invisible - focusable only) -->\n            <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n          }\n          <!-- NOT editing row -->\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n          }\n          <!-- backward button (invisible - focusable only) -->\n          <button\n            mat-icon-button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"confirmAndBackward($event, row)\"\n          ></button>\n        }\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </td>\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        @if (optionsClick.observed) {\n          <button\n            mat-icon-button\n            [title]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            [matTooltip]=\"showTooltip ? (optionsTitle | translate) : ''\"\n            (click)=\"optionsClick.emit($event)\"\n          >\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner [class.cdk-visually-hidden]=\"!showPending\" name=\"dots\" class=\"center\"></ion-spinner>\n          }\n          <!-- invalid new row -->\n          @if (row.id === -1 && row.validator?.invalid) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              (click)=\"cancelOrDelete($event, row)\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          } @else {\n            <!-- forward button (invisible - focusable only) -->\n            <button class=\"mat-row-action-button-navigation\" (focus)=\"confirmAndForward($event, row)\"></button>\n          }\n          <!-- not editing row -->\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n          <!-- backward button (invisible - focusable only) -->\n          <button\n            mat-icon-button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"confirmAndBackward($event, row)\"\n          ></button>\n        }\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NavActionsColumnComponent, decorators: [{
             type: Component,
@@ -49723,7 +50022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 args: ['class']
             }], cellTemplate: [{
                 type: Input
-            }], throttleTime: [{
+            }], navigationTimeout: [{
                 type: Input
             }], optionsClick: [{
                 type: Output
@@ -51755,7 +52054,7 @@ class UserTokenTable extends AppInMemoryTable {
         this.defaultScope = config.getProperty(CORE_CONFIG_OPTIONS.DEFAULT_AUTH_API_TOKEN_SCOPE);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UserTokenTable, deps: [{ token: i0.Injector }, { token: i3$5.ValidatorService }, { token: ConfigService }, { token: ENVIRONMENT }, { token: APP_USER_TOKEN_SCOPES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UserTokenTable, isStandalone: false, selector: "app-user-token-table", inputs: { useSticky: "useSticky", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute] }, providers: [{ provide: ValidatorService, useClass: UserTokenValidatorService }], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar>\n    <!-- Add/delete buttons (left) -->\n    @if (addButtonPosition === 'left') {\n      <ng-container *ngTemplateOutlet=\"addOrDeleteButtons\"></ng-container>\n    }\n\n    <!-- Refresh -->\n    @if (!mobile) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        (click)=\"emitRefresh()\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n    }\n\n    @if (!mobile && error; as error) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n      </ion-item>\n    }\n\n    <div class=\"toolbar-spacer\"></div>\n\n    <!-- Add/delete buttons (right) -->\n    @if (addButtonPosition !== 'left') {\n      <ng-container *ngTemplateOutlet=\"addOrDeleteButtons\"></ng-container>\n    }\n  </mat-toolbar>\n}\n\n<ng-template #addOrDeleteButtons>\n  @if (selection | isEmptySelection) {\n    @if (canEdit && !mobile) {\n      <button\n        mat-icon-button\n        class=\"add-button\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addToken($event)\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  } @else {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n      (click)=\"deleteSelection($event)\"\n    >\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n  }\n</ng-template>\n\n<ion-content class=\"ion-no-padding\">\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection | isSelected: row\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"cdk-visually-hidden\">\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"cdk-visually-hidden\">{{ row.currentData.id }}</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>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet: 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet: 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'creationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'expirationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'lastUsedDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"useSticky\"\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        [canCancel]=\"false\"\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.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.invalid\"\n      ></tr>\n    </table>\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text [color]=\"noResultColor\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n  </div>\n</ion-content>\n\n@if (showFabButton && canEdit && !disabled) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UserTokenTable, isStandalone: false, selector: "app-user-token-table", inputs: { useSticky: "useSticky", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute] }, providers: [{ provide: ValidatorService, useClass: UserTokenValidatorService }], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n  <mat-toolbar>\n    <!-- Add/delete buttons (left) -->\n    @if (addButtonPosition === 'left') {\n      <ng-container *ngTemplateOutlet=\"addOrDeleteButtons\"></ng-container>\n    }\n\n    <!-- Refresh -->\n    @if (!mobile) {\n      <button\n        mat-icon-button\n        [title]=\"!showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_REFRESH' | translate) : ''\"\n        (click)=\"emitRefresh()\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n    }\n\n    @if (!mobile && error; as error) {\n      <ion-item lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n      </ion-item>\n    }\n\n    <div class=\"toolbar-spacer\"></div>\n\n    <!-- Add/delete buttons (right) -->\n    @if (addButtonPosition !== 'left') {\n      <ng-container *ngTemplateOutlet=\"addOrDeleteButtons\"></ng-container>\n    }\n  </mat-toolbar>\n}\n\n<ng-template #addOrDeleteButtons>\n  @if (selection | isEmptySelection) {\n    @if (canEdit && !mobile) {\n      <button\n        mat-icon-button\n        class=\"add-button\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addToken($event)\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  } @else {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n      (click)=\"deleteSelection($event)\"\n    >\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n  }\n</ng-template>\n\n<ion-content class=\"ion-no-padding\">\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection | isSelected: row\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"cdk-visually-hidden\">\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"cdk-visually-hidden\">{{ row.currentData.id }}</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>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet: 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet: 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'creationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'expirationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'lastUsedDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"useSticky\"\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        [canCancel]=\"false\"\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.validator?.invalid\"\n        [class.mat-row-dirty]=\"row.validator?.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.validator?.invalid\"\n      ></tr>\n    </table>\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text [color]=\"noResultColor\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n  </div>\n</ion-content>\n\n@if (showFabButton && canEdit && !disabled) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate", "navigationTimeout"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UserTokenTable, decorators: [{
             type: Component,
@@ -54839,6 +55138,7 @@ class AutocompleteTestPage {
     _$items = new BehaviorSubject(undefined);
     _favoriteItems = deepCopy$1(FAKE_ENTITIES$2, 2).reverse();
     _favoriteFarItems = [...deepCopy$1(FAKE_ENTITIES$2, 2), FAKE_ENTITIES$2[2]].reverse();
+    _favoritesDirty = false;
     form;
     autocompleteFields = new MatAutocompleteConfigHolder();
     memoryHide = false;
@@ -54988,6 +55288,18 @@ class AutocompleteTestPage {
     equals(o1, o2) {
         return o1 && o2 && o1.id === o2.id;
     }
+    onToggleFavorite({ value }) {
+        // The field updates its own favorite items: an application would persist the change here
+        console.debug('Favorite toggled: ', value);
+        this._favoritesDirty = true;
+    }
+    onFavoritesPanelOpenedChange(field, opened) {
+        // Keep the items unchanged while the panel is open, then reload them to list the favorites first
+        if (!opened && this._favoritesDirty) {
+            this._favoritesDirty = false;
+            field.reloadItems();
+        }
+    }
     toggleMode(value) {
         if (this.mode !== value) {
             this.mode = value;
@@ -55015,11 +55327,11 @@ class AutocompleteTestPage {
         return JSON.stringify(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AutocompleteTestPage, isStandalone: false, 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);--mat-slide-toggle-selected-track-color: #fd96b9;--mat-slide-toggle-selected-hover-track-color: #fd96b9;--mat-slide-toggle-selected-focus-track-color: #fd96b9;--mat-slide-toggle-selected-pressed-track-color: #fd96b9;--mat-slide-toggle-unselected-track-color: #9b9b9b;--mat-slide-toggle-unselected-hover-track-color: #9b9b9b;--mat-slide-toggle-unselected-focus-track-color: #9b9b9b;--mat-slide-toggle-unselected-pressed-track-color: #9b9b9b;--mat-slide-toggle-selected-hover-handle-color: #ff4081;--mat-slide-toggle-selected-pressed-handle-color: #ff4081;--mat-slide-toggle-selected-handle-color: #ff4081;--mat-slide-toggle-unselected-hover-handle-color: #ffffff;--mat-slide-toggle-unselected-pressed-handle-color: #ffffff;--mat-slide-toggle-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$2.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i11$3.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: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AutocompleteTestPage, isStandalone: false, 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 id=\"toggle-favorites\">\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[], (toggleFavorite)\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #toggleFavoritesField\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [showAllOnFocus]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\n                  [debug]=\"true\"\n                  (toggleFavorite)=\"onToggleFavorite($event)\"\n                  (openedChange)=\"onFavoritesPanelOpenedChange(toggleFavoritesField, $event)\"\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);--mat-slide-toggle-selected-track-color: #fd96b9;--mat-slide-toggle-selected-hover-track-color: #fd96b9;--mat-slide-toggle-selected-focus-track-color: #fd96b9;--mat-slide-toggle-selected-pressed-track-color: #fd96b9;--mat-slide-toggle-unselected-track-color: #9b9b9b;--mat-slide-toggle-unselected-hover-track-color: #9b9b9b;--mat-slide-toggle-unselected-focus-track-color: #9b9b9b;--mat-slide-toggle-unselected-pressed-track-color: #9b9b9b;--mat-slide-toggle-selected-hover-handle-color: #ff4081;--mat-slide-toggle-selected-pressed-handle-color: #ff4081;--mat-slide-toggle-selected-handle-color: #ff4081;--mat-slide-toggle-unselected-hover-handle-color: #ffffff;--mat-slide-toggle-unselected-pressed-handle-color: #ffffff;--mat-slide-toggle-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$2.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i11$3.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: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AutocompleteTestPage, decorators: [{
             type: Component,
-            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);--mat-slide-toggle-selected-track-color: #fd96b9;--mat-slide-toggle-selected-hover-track-color: #fd96b9;--mat-slide-toggle-selected-focus-track-color: #fd96b9;--mat-slide-toggle-selected-pressed-track-color: #fd96b9;--mat-slide-toggle-unselected-track-color: #9b9b9b;--mat-slide-toggle-unselected-hover-track-color: #9b9b9b;--mat-slide-toggle-unselected-focus-track-color: #9b9b9b;--mat-slide-toggle-unselected-pressed-track-color: #9b9b9b;--mat-slide-toggle-selected-hover-handle-color: #ff4081;--mat-slide-toggle-selected-pressed-handle-color: #ff4081;--mat-slide-toggle-selected-handle-color: #ff4081;--mat-slide-toggle-unselected-hover-handle-color: #ffffff;--mat-slide-toggle-unselected-pressed-handle-color: #ffffff;--mat-slide-toggle-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"] }]
+            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 id=\"toggle-favorites\">\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[], (toggleFavorite)\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-autocomplete-field\n                  #toggleFavoritesField\n                  formControlName=\"entity\"\n                  [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                  [favoriteItems]=\"_favoriteItems\"\n                  [mobile]=\"false\"\n                  [showAllOnFocus]=\"true\"\n                  [equals]=\"equals\"\n                  [clearable]=\"true\"\n                  [logPrefix]=\"'[combo-desktop-suggest]'\"\n                  placeholder=\"Suggest field\"\n                  [debug]=\"true\"\n                  (toggleFavorite)=\"onToggleFavorite($event)\"\n                  (openedChange)=\"onFavoritesPanelOpenedChange(toggleFavoritesField, $event)\"\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);--mat-slide-toggle-selected-track-color: #fd96b9;--mat-slide-toggle-selected-hover-track-color: #fd96b9;--mat-slide-toggle-selected-focus-track-color: #fd96b9;--mat-slide-toggle-selected-pressed-track-color: #fd96b9;--mat-slide-toggle-unselected-track-color: #9b9b9b;--mat-slide-toggle-unselected-hover-track-color: #9b9b9b;--mat-slide-toggle-unselected-focus-track-color: #9b9b9b;--mat-slide-toggle-unselected-pressed-track-color: #9b9b9b;--mat-slide-toggle-selected-hover-handle-color: #ff4081;--mat-slide-toggle-selected-pressed-handle-color: #ff4081;--mat-slide-toggle-selected-handle-color: #ff4081;--mat-slide-toggle-unselected-hover-handle-color: #ffffff;--mat-slide-toggle-unselected-pressed-handle-color: #ffffff;--mat-slide-toggle-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$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { farEntityField: [{
                 type: ViewChild,
                 args: ['farEntityField']
@@ -57336,8 +57648,8 @@ class TableValidatorService extends ReferentialValidatorService {
         return this.formBuilder.group({
             values: [data?.['values'], Validators.required],
             boolean: [data?.['boolean'], Validators.required],
-            date: [data?.['date'], Validators.required, SharedValidators.validDate],
-            latitude: [data?.['latitude'], Validators.required, SharedValidators.latitude],
+            date: [data?.['date'], Validators.compose([Validators.required, SharedValidators.validDate])],
+            latitude: [data?.['latitude'], Validators.compose([Validators.required, SharedValidators.latitude])],
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TableValidatorService, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -57592,7 +57904,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      @if (canEdit && !mobile) {\n        <button\n          mat-icon-button\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\n      <!-- reset filter -->\n      @if (filterCriteriaCount) {\n        <button mat-icon-button (click)=\"resetFilter()\">\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\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        @if (filterCriteriaCount) {\n          <mat-icon\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        } @else {\n          <mat-icon>filter_list_alt</mat-icon>\n        }\n      </button>\n\n      <!-- save -->\n      @if (mobile) {\n        <button mat-icon-button [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n          <mat-icon>save</mat-icon>\n        </button>\n      }\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      @if (canEdit) {\n        <button\n          mat-icon-button\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\n      <!-- duplicate -->\n      @if (canEdit && selection.selected | isArrayLength: { equals: 1 }) {\n        <button\n          mat-icon-button\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    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- error -->\n  @if (mobile && error) {\n    <ion-item lines=\"none\" @slideUpDownAnimation>\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n    </ion-item>\n  }\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      @if (filterPanelFloating) {\n        <button\n          mat-icon-button\n          color=\"accent\"\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\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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>{{ 'COMMON.BTN_APPLY' | translate }}</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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          @if (!readOnly && row.id === -1 && row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                required\n                [formControl]=\"row.validator | formGetControl: 'id'\"\n                placeholder=\"Id\"\n                [appAutofocus]=\"true\"\n              />\n              @if ((row.validator | formGetControl: 'id').hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if ((row.validator | formGetControl: 'id').hasError('alreadyExists')) {\n                <mat-error>{{ 'ERROR.FIELD_NOT_UNIQUE_ID' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          }\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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\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          @if (!readOnly && row.editing) {\n            <mat-form-field>\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              @if ((row.validator | formGetControl: 'name').hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if ((row.validator | formGetControl: 'name').hasError('maxlength')) {\n                <mat-error>{{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}</mat-error>\n              }\n              @if ((row.validator | formGetControl: 'name').hasError('minlength')) {\n                <mat-error>{{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          }\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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          @if (!readOnly && row.editing) {\n            <mat-autocomplete-field\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              @if ((row.validator | formGetControl: 'levelId').hasError('invalid')) {\n                <mat-error matError>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n              }\n            </mat-autocomplete-field>\n          } @else {\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          }\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          @if (!readOnly && row.editing) {\n            <mat-boolean-field\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          } @else {\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          }\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          @if (!readOnly && row.editing) {\n            <mat-boolean-field\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          } @else {\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          }\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          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'button'\"\n              [formControl]=\"\n                (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n              \"\n            ></mat-boolean-field>\n          } @else {\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          }\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          @if (row.editing && !row.validator.dirty) {\n            <span>-</span>\n          }\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    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n\n    @if (enableInfiniteScroll) {\n      <ion-infinite-scroll [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\" (ionInfinite)=\"fetchMore($event)\">\n        <ion-infinite-scroll-content\n          loadingSpinner=\"circles\"\n          [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n        ></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n    }\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  @if (!enableInfiniteScroll) {\n    <mat-paginator\n      [length]=\"totalRowCount\"\n      [pageSize]=\"defaultPageSize\"\n      [pageSizeOptions]=\"defaultPageSizeOptions\"\n      showFirstLastButtons\n    ></mat-paginator>\n  }\n\n  @if (canEdit && !mobile) {\n    <app-form-buttons-bar (onCancel)=\"load()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject | async) || !dirty\">\n      <!-- error -->\n      @if (errorSubject | async) {\n        <ion-item lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\n    </app-form-buttons-bar>\n  }\n</ion-footer>\n\n@if (canEdit && mobile) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\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: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.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: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.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", "appTooltipText"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "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$2.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: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.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      @if (canEdit && !mobile) {\n        <button\n          mat-icon-button\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\n      <!-- reset filter -->\n      @if (filterCriteriaCount) {\n        <button mat-icon-button (click)=\"resetFilter()\">\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\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        @if (filterCriteriaCount) {\n          <mat-icon\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        } @else {\n          <mat-icon>filter_list_alt</mat-icon>\n        }\n      </button>\n\n      <!-- save -->\n      @if (mobile) {\n        <button mat-icon-button [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n          <mat-icon>save</mat-icon>\n        </button>\n      }\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      @if (canEdit) {\n        <button\n          mat-icon-button\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\n      <!-- duplicate -->\n      @if (canEdit && selection.selected | isArrayLength: { equals: 1 }) {\n        <button\n          mat-icon-button\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    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- error -->\n  @if (mobile && error) {\n    <ion-item lines=\"none\" @slideUpDownAnimation>\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n    </ion-item>\n  }\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      @if (filterPanelFloating) {\n        <button\n          mat-icon-button\n          color=\"accent\"\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\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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>{{ 'COMMON.BTN_APPLY' | translate }}</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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          @if (!readOnly && row.id === -1 && row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                required\n                [formControl]=\"row.validator | formGetControl: 'id'\"\n                placeholder=\"Id\"\n                [appAutofocus]=\"true\"\n              />\n              @if ((row.validator | formGetControl: 'id').hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if ((row.validator | formGetControl: 'id').hasError('alreadyExists')) {\n                <mat-error>{{ 'ERROR.FIELD_NOT_UNIQUE_ID' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          }\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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\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          @if (!readOnly && row.editing) {\n            <mat-form-field>\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              @if ((row.validator | formGetControl: 'name').hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\n              @if ((row.validator | formGetControl: 'name').hasError('maxlength')) {\n                <mat-error>{{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}</mat-error>\n              }\n              @if ((row.validator | formGetControl: 'name').hasError('minlength')) {\n                <mat-error>{{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}</mat-error>\n              }\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          }\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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          @if (!readOnly && row.editing) {\n            <mat-autocomplete-field\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              @if ((row.validator | formGetControl: 'levelId').hasError('invalid')) {\n                <mat-error matError>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n              }\n            </mat-autocomplete-field>\n          } @else {\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          }\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          @if (!readOnly && row.editing) {\n            <mat-boolean-field\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          } @else {\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          }\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          @if (!readOnly && row.editing) {\n            <mat-boolean-field\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          } @else {\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          }\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          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'button'\"\n              [formControl]=\"\n                (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n              \"\n            ></mat-boolean-field>\n          } @else {\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          }\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          @if (row.editing && !row.validator.dirty) {\n            <span>-</span>\n          }\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    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n\n    @if (enableInfiniteScroll) {\n      <ion-infinite-scroll [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\" (ionInfinite)=\"fetchMore($event)\">\n        <ion-infinite-scroll-content\n          loadingSpinner=\"circles\"\n          [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n        ></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n    }\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  @if (!enableInfiniteScroll) {\n    <mat-paginator\n      [length]=\"totalRowCount\"\n      [pageSize]=\"defaultPageSize\"\n      [pageSizeOptions]=\"defaultPageSizeOptions\"\n      showFirstLastButtons\n    ></mat-paginator>\n  }\n\n  @if (canEdit && !mobile) {\n    <app-form-buttons-bar (onCancel)=\"load()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject | async) || !dirty\">\n      <!-- error -->\n      @if (errorSubject | async) {\n        <ion-item lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\n    </app-form-buttons-bar>\n  }\n</ion-footer>\n\n@if (canEdit && mobile) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\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: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.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: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.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", "appTooltipText"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "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", "navigationTimeout"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.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: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.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: "21.2.22", ngImport: i0, type: Table2TestPage, decorators: [{
             type: Component,
@@ -57858,8 +58170,8 @@ class TableTestPage extends AppTable {
                 properties: {
                     values: i % 2 === 0 ? 'A' : 'A,B',
                     boolean: false,
-                    date: null, // toDateISOString(DateUtils.moment()),
-                    latitude: null, // 11.1111
+                    date: toDateISOString(DateUtils.moment().subtract(i, 'hours')),
+                    latitude: 47 + (i % 100) / 100,
                 },
                 creationDate: fromUnixMsTimestamp(Date.now() - i * 60 * 1000),
                 updateDate: fromUnixMsTimestamp(Date.now() - i * 60 * 1000),
@@ -57883,7 +58195,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      @if (canEdit && !mobile) {\n        <button\n          mat-icon-button\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\n      <!-- reset filter -->\n      @if (filterCriteriaCount) {\n        <button mat-icon-button (click)=\"resetFilter()\">\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\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        @if (filterCriteriaCount) {\n          <mat-icon\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        } @else {\n          <mat-icon>filter_list_alt</mat-icon>\n        }\n      </button>\n\n      <!-- save -->\n      @if (mobile) {\n        <button mat-icon-button [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n          <mat-icon>save</mat-icon>\n        </button>\n      }\n\n      <!-- start/stop timer to auto-load data -->\n      @if (!timer) {\n        <ion-button (click)=\"startTimer()\">Start reload</ion-button>\n      }\n      @if (timer) {\n        <ion-button (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n      }\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      @if (canEdit) {\n        <button\n          mat-icon-button\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\n      <!-- duplicate -->\n      @if (canEdit && selection.selected | isArrayLength: { equals: 1 }) {\n        <button\n          mat-icon-button\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    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- error -->\n  @if (mobile && error) {\n    <ion-item lines=\"none\" @slideUpDownAnimation>\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n    </ion-item>\n  }\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      @if (filterPanelFloating) {\n        <button\n          mat-icon-button\n          color=\"accent\"\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\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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>{{ 'COMMON.BTN_APPLY' | translate }}</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>{{ i18nColumnPrefix + 'GROUP_1' | translate }}</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>{{ i18nColumnPrefix + 'GROUP_2' | translate }}</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>{{ 'TABLE.TESTING.LABEL' | translate }}</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              @if (row.validator.controls['label'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\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>{{ 'TABLE.TESTING.NAME' | translate }}</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              @if (row.validator?.controls.name.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\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>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</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>{{ 'USER.STATUS' | translate }}</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              @for (item of statusList; track item) {\n                <mat-option [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              }\n            </mat-select>\n            @if (row.validator.controls['statusId'].hasError('required')) {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\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>{{ 'Enums' | translate }}</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>{{ 'TABLE.TESTING.UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          @if (row.id !== -1) {\n            <ion-text color=\"medium\">\n              <small>\n                {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n              </small>\n            </ion-text>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ 'TABLE.TESTING.COMMENTS' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (row.editing) {\n            <mat-form-field>\n              <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n        [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n      [readonly]=\"!row.editing\"></textarea>-->\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          } @else {\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          }\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          @if (row.editing && !row.validator.dirty) {\n            <span>-</span>\n          }\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    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n\n    @if (enableInfiniteScroll) {\n      <ion-infinite-scroll [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\" (ionInfinite)=\"fetchMore($event)\">\n        <ion-infinite-scroll-content\n          loadingSpinner=\"circles\"\n          [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n        ></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n    }\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  @if (!enableInfiniteScroll) {\n    <mat-paginator\n      [length]=\"totalRowCount\"\n      [pageSize]=\"defaultPageSize\"\n      [pageSizeOptions]=\"defaultPageSizeOptions\"\n      showFirstLastButtons\n    ></mat-paginator>\n  }\n\n  @if (canEdit && !mobile) {\n    <app-form-buttons-bar (onCancel)=\"load()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject | async) || !dirty\">\n      <!-- error -->\n      @if (errorSubject | async) {\n        <ion-item lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\n    </app-form-buttons-bar>\n  }\n</ion-footer>\n\n@if (canEdit && mobile) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\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: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.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: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.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", "appTooltipText"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "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$2.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: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.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      @if (canEdit && !mobile) {\n        <button\n          mat-icon-button\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\n      <!-- reset filter -->\n      @if (filterCriteriaCount) {\n        <button mat-icon-button (click)=\"resetFilter()\">\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\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        @if (filterCriteriaCount) {\n          <mat-icon\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        } @else {\n          <mat-icon>filter_list_alt</mat-icon>\n        }\n      </button>\n\n      <!-- save -->\n      @if (mobile) {\n        <button mat-icon-button [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n          <mat-icon>save</mat-icon>\n        </button>\n      }\n\n      <!-- start/stop timer to auto-load data -->\n      @if (!timer) {\n        <ion-button (click)=\"startTimer()\">Start reload</ion-button>\n      }\n      @if (timer) {\n        <ion-button (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n      }\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      @if (canEdit) {\n        <button\n          mat-icon-button\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\n      <!-- duplicate -->\n      @if (canEdit && selection.selected | isArrayLength: { equals: 1 }) {\n        <button\n          mat-icon-button\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    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  @if (mobile) {\n    <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n      <ion-refresher-content></ion-refresher-content>\n    </ion-refresher>\n  }\n\n  <!-- error -->\n  @if (mobile && error) {\n    <ion-item lines=\"none\" @slideUpDownAnimation>\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n    </ion-item>\n  }\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      @if (filterPanelFloating) {\n        <button\n          mat-icon-button\n          color=\"accent\"\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\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text>{{ 'COMMON.BTN_CLOSE' | translate }}</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>{{ 'COMMON.BTN_APPLY' | translate }}</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>{{ i18nColumnPrefix + 'GROUP_1' | translate }}</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>{{ i18nColumnPrefix + 'GROUP_2' | translate }}</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>{{ 'TABLE.TESTING.LABEL' | translate }}</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              @if (row.validator.controls['label'].hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\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>{{ 'TABLE.TESTING.NAME' | translate }}</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              @if (row.validator?.controls.name.hasError('required')) {\n                <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n              }\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>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</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>{{ 'USER.STATUS' | translate }}</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              @for (item of statusList; track item) {\n                <mat-option [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              }\n            </mat-select>\n            @if (row.validator.controls['statusId'].hasError('required')) {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\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>{{ 'Enums' | translate }}</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>{{ 'TABLE.TESTING.UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          @if (row.id !== -1) {\n            <ion-text color=\"medium\">\n              <small>\n                {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n              </small>\n            </ion-text>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ 'TABLE.TESTING.COMMENTS' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (row.editing) {\n            <mat-form-field>\n              <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n        [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n      [readonly]=\"!row.editing\"></textarea>-->\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          } @else {\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          }\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          @if (row.editing && !row.validator.dirty) {\n            <span>-</span>\n          }\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    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else {\n      @if (totalRowCount === 0) {\n        <ion-item>\n          <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n        </ion-item>\n      }\n    }\n\n    @if (enableInfiniteScroll) {\n      <ion-infinite-scroll [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\" (ionInfinite)=\"fetchMore($event)\">\n        <ion-infinite-scroll-content\n          loadingSpinner=\"circles\"\n          [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n        ></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n    }\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  @if (!enableInfiniteScroll) {\n    <mat-paginator\n      [length]=\"totalRowCount\"\n      [pageSize]=\"defaultPageSize\"\n      [pageSizeOptions]=\"defaultPageSizeOptions\"\n      showFirstLastButtons\n    ></mat-paginator>\n  }\n\n  @if (canEdit && !mobile) {\n    <app-form-buttons-bar (onCancel)=\"load()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject | async) || !dirty\">\n      <!-- error -->\n      @if (errorSubject | async) {\n        <ion-item lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\n    </app-form-buttons-bar>\n  }\n</ion-footer>\n\n@if (canEdit && mobile) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n    <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n      <ion-icon name=\"add\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\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: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.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: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.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", "appTooltipText"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "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", "navigationTimeout"], outputs: ["optionsClick"] }, { kind: "directive", type: i1$2.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: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.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: "21.2.22", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -58142,7 +58454,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          @if (canEdit && !mobile) {\n            <button\n              mat-icon-button\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\n          <!-- reset filter -->\n          @if (filterCriteriaCount) {\n            <button mat-icon-button (click)=\"resetFilter()\">\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\n          <!-- show filter -->\n          <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n            @if (filterCriteriaCount) {\n              <mat-icon\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            } @else {\n              <mat-icon>filter_list_alt</mat-icon>\n            }\n          </button>\n\n          <!-- save -->\n          @if (mobile) {\n            <button mat-icon-button [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n              <mat-icon>save</mat-icon>\n            </button>\n          }\n        } @else {\n          <!-- if row selection -->\n          <!-- delete -->\n          @if (canEdit) {\n            <button\n              mat-icon-button\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\n          <!-- duplicate -->\n          @if (canEdit && selection.selected | isArrayLength: { equals: 1 }) {\n            <button\n              mat-icon-button\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        }\n      </ion-buttons>\n    </app-toolbar>\n    <ion-content class=\"ion-no-padding\">\n      @if (mobile) {\n        <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n          <ion-refresher-content></ion-refresher-content>\n        </ion-refresher>\n      }\n\n      <!-- error -->\n      @if (mobile && error) {\n        <ion-item lines=\"none\" @slideUpDownAnimation>\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\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          @if (filterPanelFloating) {\n            <button\n              mat-icon-button\n              color=\"accent\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"\n                !showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\n              \"\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\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>{{ 'COMMON.BTN_CLOSE' | translate }}</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>{{ 'COMMON.BTN_APPLY' | translate }}</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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n              @if (!readOnly && row.id === -1 && row.editing) {\n                <mat-form-field>\n                  <input\n                    matInput\n                    autocomplete=\"off\"\n                    required\n                    [formControl]=\"row.validator | formGetControl: 'id'\"\n                    placeholder=\"Id\"\n                    [appAutofocus]=\"true\"\n                  />\n                  @if ((row.validator | formGetControl: 'id').hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                  @if ((row.validator | formGetControl: 'id').hasError('alreadyExists')) {\n                    <mat-error>{{ 'ERROR.FIELD_NOT_UNIQUE_ID' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n                </ion-label>\n              }\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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\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              @if (!readOnly && row.editing) {\n                <mat-form-field>\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                  @if ((row.validator | formGetControl: 'name').hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                  @if ((row.validator | formGetControl: 'name').hasError('maxlength')) {\n                    <mat-error>{{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}</mat-error>\n                  }\n                  @if ((row.validator | formGetControl: 'name').hasError('minlength')) {\n                    <mat-error>{{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: '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 [resizable]=\"resizable\">\n              <span mat-sort-header>\n                <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n                <ion-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n              @if (!readOnly && row.editing) {\n                <mat-autocomplete-field\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                  @if ((row.validator | formGetControl: 'levelId').hasError('invalid')) {\n                    <mat-error matError>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n                  }\n                </mat-autocomplete-field>\n              } @else {\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              }\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              @if (!readOnly && row.editing) {\n                <mat-boolean-field\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              } @else {\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              }\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              @if (!readOnly && row.editing) {\n                <mat-boolean-field\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              } @else {\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              }\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              @if (!readOnly && row.editing) {\n                <mat-boolean-field\n                  floatLabel=\"never\"\n                  [style]=\"'button'\"\n                  [formControl]=\"\n                    (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n                  \"\n                ></mat-boolean-field>\n              } @else {\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              }\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              @if (row.editing && !row.validator.dirty) {\n                <span>-</span>\n              }\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        @if (loadingSubject | async) {\n          <ion-item>\n            <ion-skeleton-text animated></ion-skeleton-text>\n          </ion-item>\n        } @else {\n          @if (totalRowCount === 0) {\n            <ion-item>\n              <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n            </ion-item>\n          }\n        }\n\n        @if (enableInfiniteScroll) {\n          <ion-infinite-scroll [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\" (ionInfinite)=\"fetchMore($event)\">\n            <ion-infinite-scroll-content\n              loadingSpinner=\"circles\"\n              [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n            ></ion-infinite-scroll-content>\n          </ion-infinite-scroll>\n        }\n      </div>\n    </ion-content>\n    <ion-footer>\n      <!-- Paginator  -->\n      @if (!enableInfiniteScroll) {\n        <mat-paginator\n          [length]=\"totalRowCount\"\n          [pageSize]=\"defaultPageSize\"\n          [pageSizeOptions]=\"defaultPageSizeOptions\"\n          showFirstLastButtons\n        ></mat-paginator>\n      }\n\n      @if (canEdit && !mobile) {\n        <app-form-buttons-bar (onCancel)=\"load()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject | async) || !dirty\">\n          <!-- error -->\n          @if (errorSubject | async) {\n            <ion-item lines=\"none\">\n              <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n              <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n            </ion-item>\n          }\n        </app-form-buttons-bar>\n      }\n    </ion-footer>\n    @if (canEdit && mobile) {\n      <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n        <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n          <ion-icon name=\"add\"></ion-icon>\n        </ion-fab-button>\n      </ion-fab>\n    }\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: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.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: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.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", "appTooltipText"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "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$2.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: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.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          @if (canEdit && !mobile) {\n            <button\n              mat-icon-button\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\n          <!-- reset filter -->\n          @if (filterCriteriaCount) {\n            <button mat-icon-button (click)=\"resetFilter()\">\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\n          <!-- show filter -->\n          <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n            @if (filterCriteriaCount) {\n              <mat-icon\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            } @else {\n              <mat-icon>filter_list_alt</mat-icon>\n            }\n          </button>\n\n          <!-- save -->\n          @if (mobile) {\n            <button mat-icon-button [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n              <mat-icon>save</mat-icon>\n            </button>\n          }\n        } @else {\n          <!-- if row selection -->\n          <!-- delete -->\n          @if (canEdit) {\n            <button\n              mat-icon-button\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\n          <!-- duplicate -->\n          @if (canEdit && selection.selected | isArrayLength: { equals: 1 }) {\n            <button\n              mat-icon-button\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        }\n      </ion-buttons>\n    </app-toolbar>\n    <ion-content class=\"ion-no-padding\">\n      @if (mobile) {\n        <ion-refresher slot=\"fixed\" (ionRefresh)=\"doRefresh($event)\">\n          <ion-refresher-content></ion-refresher-content>\n        </ion-refresher>\n      }\n\n      <!-- error -->\n      @if (mobile && error) {\n        <ion-item lines=\"none\" @slideUpDownAnimation>\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n        </ion-item>\n      }\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          @if (filterPanelFloating) {\n            <button\n              mat-icon-button\n              color=\"accent\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"\n                !showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\n              \"\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\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>{{ 'COMMON.BTN_CLOSE' | translate }}</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>{{ 'COMMON.BTN_APPLY' | translate }}</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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n              @if (!readOnly && row.id === -1 && row.editing) {\n                <mat-form-field>\n                  <input\n                    matInput\n                    autocomplete=\"off\"\n                    required\n                    [formControl]=\"row.validator | formGetControl: 'id'\"\n                    placeholder=\"Id\"\n                    [appAutofocus]=\"true\"\n                  />\n                  @if ((row.validator | formGetControl: 'id').hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                  @if ((row.validator | formGetControl: 'id').hasError('alreadyExists')) {\n                    <mat-error>{{ 'ERROR.FIELD_NOT_UNIQUE_ID' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n                </ion-label>\n              }\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-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\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              @if (!readOnly && row.editing) {\n                <mat-form-field>\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                  @if ((row.validator | formGetControl: 'name').hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                  @if ((row.validator | formGetControl: 'name').hasError('maxlength')) {\n                    <mat-error>{{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}</mat-error>\n                  }\n                  @if ((row.validator | formGetControl: 'name').hasError('minlength')) {\n                    <mat-error>{{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <ion-label appAutoTooltip>\n                  {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: '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 [resizable]=\"resizable\">\n              <span mat-sort-header>\n                <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n                <ion-text color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-text>\n              </span>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n              @if (!readOnly && row.editing) {\n                <mat-autocomplete-field\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                  @if ((row.validator | formGetControl: 'levelId').hasError('invalid')) {\n                    <mat-error matError>{{ 'ERROR.FIELD_INVALID' | translate }}</mat-error>\n                  }\n                </mat-autocomplete-field>\n              } @else {\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              }\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              @if (!readOnly && row.editing) {\n                <mat-boolean-field\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              } @else {\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              }\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              @if (!readOnly && row.editing) {\n                <mat-boolean-field\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              } @else {\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              }\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              @if (!readOnly && row.editing) {\n                <mat-boolean-field\n                  floatLabel=\"never\"\n                  [style]=\"'button'\"\n                  [formControl]=\"\n                    (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n                  \"\n                ></mat-boolean-field>\n              } @else {\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              }\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              @if (row.editing && !row.validator.dirty) {\n                <span>-</span>\n              }\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        @if (loadingSubject | async) {\n          <ion-item>\n            <ion-skeleton-text animated></ion-skeleton-text>\n          </ion-item>\n        } @else {\n          @if (totalRowCount === 0) {\n            <ion-item>\n              <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n            </ion-item>\n          }\n        }\n\n        @if (enableInfiniteScroll) {\n          <ion-infinite-scroll [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\" (ionInfinite)=\"fetchMore($event)\">\n            <ion-infinite-scroll-content\n              loadingSpinner=\"circles\"\n              [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n            ></ion-infinite-scroll-content>\n          </ion-infinite-scroll>\n        }\n      </div>\n    </ion-content>\n    <ion-footer>\n      <!-- Paginator  -->\n      @if (!enableInfiniteScroll) {\n        <mat-paginator\n          [length]=\"totalRowCount\"\n          [pageSize]=\"defaultPageSize\"\n          [pageSizeOptions]=\"defaultPageSizeOptions\"\n          showFirstLastButtons\n        ></mat-paginator>\n      }\n\n      @if (canEdit && !mobile) {\n        <app-form-buttons-bar (onCancel)=\"load()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject | async) || !dirty\">\n          <!-- error -->\n          @if (errorSubject | async) {\n            <ion-item lines=\"none\">\n              <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n              <ion-label color=\"danger\"><span [innerHTML]=\"error | translate\"></span></ion-label>\n            </ion-item>\n          }\n        </app-form-buttons-bar>\n      }\n    </ion-footer>\n    @if (canEdit && mobile) {\n      <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\">\n        <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n          <ion-icon name=\"add\"></ion-icon>\n        </ion-fab-button>\n      </ion-fab>\n    }\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: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.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: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i11$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.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", "appTooltipText"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "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", "navigationTimeout"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.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: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.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: "21.2.22", ngImport: i0, type: NestedTableTestPage, decorators: [{
             type: Component,
@@ -59666,5 +59978,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ADMIN_ICONS, 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_FILE_TRANSFER_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_SERVICE, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_INPUT_FIELD, 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_MESSAGE_SERVICE_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_TABLE_OPTIONS, 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, AppHomePageModule, AppIconComponent, AppIconModule, AppIconSelectorField, AppIconSelectorModal, AppIconSelectorModule, 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, AppWebSocket, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFindPipe, 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_ICONS, 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, DEFER_DIRECTIVE_NAME, 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, EmptyMissingTranslationHandler, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FILE_KIND_ICONS, FeedAttachmentUtils, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileAttachmentComponent, FileAttachmentPreviewModal, FileAttachmentUtils, FileDownloadService, FileResponse, FileService, FileSizePipe, FileTypeUtils, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GitlabUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, HttpUtils, IMAGE_DEFAULTS, ION_ICONS, IPosition, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImageSizes, ImagesUtils, InMemoryEntitiesService, InputFieldTestPage, 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, ListFormTestPage, ListFormTestingModule, 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, MarkdownToolbarComponent, 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, MessageAttachment, MessageAttachmentUtils, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NativeWebSocket, 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_ICONS, SHARED_IONIC_COMPONENTS, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_ICONS, 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, SharedFileAttachmentModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedIonicModule, 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, StorageServiceWrapper, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, TRACKED_QUERIES_STORAGE_KEY, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, TimeFormatPipe, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, USER_CONTROLLER, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserController, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, compositionMarkdownExtensions, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createApolloClientOptions, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, createTestingImageDataUrl, createTrackerLink, 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, getFormControlName, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hasDeferDirective, hasFocusWithin, hexToRgb, hexToRgbArray, httpHeadersToRecordLink, initArrayControlsFromValues, initializeSharedModule, insertLink, interpolateString, intersectArrays, isAndroid, isAppInputField, isAppTextInputField, isBlankString, isCapacitor, isChrome, isControlHasInput, isDeferredOperation, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isMutationOperation, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isSubscriptionOperation, isTouchUi, isValidVersion, isVersionCompatible, isWebAnimationsSupported, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, loggerLink, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseBooleanText, parseLatLongText, parseLatitudeOrLongitude, parseVersion, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, provideAllIonicIcons, provideIonicIcons, provideIonicIconsInitializer, providePersonService, referentialToString, referentialsToString, registerIonicIcons, remove, removeAll, removeDeferDirectives, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, restoreTrackedQueries, 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, toggleLinePrefix, trimEmptyToNull, truncateHtml, typeTextIntoInput, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending, wrapSelection };
+export { ADMIN_ICONS, 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_FILE_TRANSFER_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_SERVICE, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_INPUT_FIELD, 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_MESSAGE_SERVICE_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_TABLE_OPTIONS, 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, AppHomePageModule, AppIconComponent, AppIconModule, AppIconSelectorField, AppIconSelectorModal, AppIconSelectorModule, 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, AppWebSocket, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFindPipe, 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_ICONS, 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, DEFER_DIRECTIVE_NAME, 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, EmptyMissingTranslationHandler, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FILE_KIND_ICONS, FeedAttachmentUtils, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileAttachmentComponent, FileAttachmentPreviewModal, FileAttachmentUtils, FileDownloadService, FileResponse, FileService, FileSizePipe, FileTypeUtils, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GitlabUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, HttpUtils, IMAGE_DEFAULTS, ION_ICONS, IPosition, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImageSizes, ImagesUtils, InMemoryEntitiesService, InputFieldTestPage, 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, ListFormTestPage, ListFormTestingModule, 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, MarkdownToolbarComponent, 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, MessageAttachment, MessageAttachmentUtils, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NativeWebSocket, 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_ICONS, SHARED_IONIC_COMPONENTS, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_ICONS, 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, SharedFileAttachmentModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedIonicModule, 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, StorageServiceWrapper, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, TRACKED_QUERIES_STORAGE_KEY, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, TimeFormatPipe, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, USER_CONTROLLER, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserController, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, compositionMarkdownExtensions, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createApolloClientOptions, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, createTestingImageDataUrl, createTrackerLink, 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, getFormControlName, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hasDeferDirective, hasFocusWithin, hexToRgb, hexToRgbArray, httpHeadersToRecordLink, initArrayControlsFromValues, initializeSharedModule, insertLink, interpolateString, intersectArrays, isAndroid, isAppInputField, isAppTextInputField, isBlankString, isCapacitor, isChrome, isControlHasInput, isDeferredOperation, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isMutationOperation, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isSubscriptionOperation, isTouchUi, isValidVersion, isVersionCompatible, isWebAnimationsSupported, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, loggerLink, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseBooleanText, parseLatLongText, parseLatitudeOrLongitude, parseVersion, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, provideAllIonicIcons, provideIonicIcons, provideIonicIconsInitializer, providePersonService, referentialToString, referentialsToString, registerIonicIcons, remove, removeAll, removeDeferDirectives, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, resolveLocaleUrl, restoreTrackedQueries, 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, toggleLinePrefix, trimEmptyToNull, truncateHtml, typeTextIntoInput, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending, wrapSelection };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map