@sumaris-net/ngx-components 21.4.2 → 21.4.4

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, inject, Pipe, Injectable, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, ElementRef, booleanAttribute, ViewChildren, Input, ChangeDetectionStrategy, Component, HostListener, HostBinding, numberAttribute, ViewChild, isDevMode, ANIMATION_MODULE_TYPE, RendererStyleFlags2, DOCUMENT, TemplateRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Self, ViewEncapsulation, Injector, provideAppInitializer, APP_INITIALIZER, DestroyRef, input, output, Renderer2, effect, signal, SecurityContext, EnvironmentInjector, runInInjectionContext, viewChildren, viewChild, model, computed, untracked } from '@angular/core';
-import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$a, Observable, forkJoin, timeout, defer, combineLatest, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, mergeMap as mergeMap$1, switchMap as switchMap$1, EMPTY, interval } from 'rxjs';
+import { InjectionToken, Directive, inject, Pipe, Injectable, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, ElementRef, booleanAttribute, ViewChildren, Input, ChangeDetectionStrategy, Component, HostListener, HostBinding, numberAttribute, ViewChild, isDevMode, ANIMATION_MODULE_TYPE, RendererStyleFlags2, DOCUMENT, TemplateRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Self, ViewEncapsulation, viewChild, signal, computed, Injector, provideAppInitializer, APP_INITIALIZER, DestroyRef, input, output, Renderer2, effect, SecurityContext, EnvironmentInjector, runInInjectionContext, viewChildren, model, untracked } from '@angular/core';
+import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isObservable, from, Subscription, BehaviorSubject, fromEvent, EMPTY, noop as noop$a, Observable, forkJoin, timeout, defer, combineLatest, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, mergeMap as mergeMap$1, switchMap as switchMap$1, interval } from 'rxjs';
 import { catchError, map, filter, takeUntil, first, switchMap, tap as tap$1, throttleTime, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import * as cloneImported from 'clone';
 import * as i2$3 from '@angular/common';
-import { CommonModule, APP_BASE_HREF, LocationStrategy, Location, NgIf, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule, Location, APP_BASE_HREF, LocationStrategy, 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';
@@ -109,9 +109,9 @@ import { base64Decode, cryptoWaitReady, ed25519PairFromSeed, ed25519Sign, base64
 import * as i4$5 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i4$3 from 'ngx-markdown';
-import { MarkdownModule, MarkedRenderer, MARKED_OPTIONS, SANITIZE } from 'ngx-markdown';
+import { MarkdownModule, MarkedRenderer, MARKED_OPTIONS, MARKED_EXTENSIONS, SANITIZE } from 'ngx-markdown';
 import * as i1$5 from '@angular/router';
-import { RouterModule, RouteReuseStrategy, ActivatedRoute, Router, NavigationEnd } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule, RouteReuseStrategy, NavigationEnd } from '@angular/router';
 import { Drivers } from '@ionic/storage';
 import * as LocalForage from 'localforage';
 import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
@@ -121,7 +121,7 @@ import * as i4$4 from 'ngx-jdenticon';
 import { NgxJdenticonModule } from 'ngx-jdenticon';
 import { __decorate, __param } from 'tslib';
 import { Apollo, gql as gql$1, provideApollo } from 'apollo-angular';
-import { ApolloLink, NetworkStatus, gql, InMemoryCache } from '@apollo/client/core';
+import { ApolloLink, NetworkStatus, gql, InMemoryCache, DocumentTransform } from '@apollo/client/core';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { Network } from '@capacitor/network';
 import * as i3$6 from '@rx-angular/state';
@@ -130,6 +130,7 @@ import { SplashScreen } from '@capacitor/splash-screen';
 import * as i4$2 from 'ionic-cache';
 import { CacheModule } from 'ionic-cache';
 import { getMainDefinition } from '@apollo/client/utilities';
+import { visit, Kind } from 'graphql';
 import { v4 } from 'uuid';
 import * as LoggerLinkModule from 'apollo-link-logger';
 import { scryptEncode } from '@polkadot/util-crypto/scrypt/encode';
@@ -155,6 +156,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Geolocation } from '@capacitor/geolocation';
 import * as i3$5 from '@e-is/ngx-material-table';
 import { ValidatorService, TableDataSource, AsyncTableDataSource } from '@e-is/ngx-material-table';
+import { HttpLink as HttpLink$1 } from '@apollo/client/link/http';
+import { Defer20220824Handler } from '@apollo/client/incremental';
 import { persistCacheSync } from 'apollo4-cache-persist';
 import { HttpLink } from 'apollo-angular/http';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
@@ -163,7 +166,6 @@ import { RetryLink } from '@apollo/client/link/retry';
 import { createFragmentRegistry } from '@apollo/client/cache';
 import { createOperation } from '@apollo/client/link/utils';
 import { checkDocument, getOperationDefinition } from '@apollo/client/utilities/internal';
-import { Kind } from 'graphql';
 import 'moment-timezone';
 
 const ENVIRONMENT = new InjectionToken('ENV');
@@ -203,6 +205,10 @@ class Environment {
     offline;
     // Apollo (graphQL) config
     apolloFetchPolicy;
+    // Enable the GraphQL @defer directive (incremental delivery) - default: false
+    // - true: queries with @defer are sent with a fetch link, and the response is streamed (multipart/mixed). Requires a pod that supports @defer.
+    // - false: @defer directives are removed from queries (all fields are fetched in a single response)
+    enableGraphqlDefer;
     // Default values
     defaultLocale;
     defaultLatLongFormat;
@@ -7997,29 +8003,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 args: ['delete']
             }] } });
 
+/**
+ * Directive to automatically show a tooltip with the content of the label.
+ */
 class AutoTooltipDirective {
     elementRef;
     matTooltip;
+    /**
+     * Enable automatic tooltip based on the content of the label.
+     */
     appAutoTooltip = true;
+    /**
+     * Text to display in the tooltip when appAutoTooltip is false.
+     */
+    appTooltipText = '';
     constructor(elementRef, matTooltip) {
         this.elementRef = elementRef;
         this.matTooltip = matTooltip;
     }
     ngAfterContentChecked() {
-        // Update Material Tooltip if different
-        if (this.elementRef.nativeElement && this.matTooltip && this.matTooltip.message !== this.elementRef.nativeElement.textContent) {
-            this.matTooltip.message = this.elementRef.nativeElement.textContent;
+        if (this.appAutoTooltip) {
+            // Update Material Tooltip if different
+            if (this.elementRef.nativeElement && this.matTooltip && this.matTooltip.message !== this.elementRef.nativeElement.textContent) {
+                this.matTooltip.message = this.elementRef.nativeElement.textContent;
+            }
+        }
+        else if (isNotNilOrBlank(this.appTooltipText)) {
+            this.matTooltip.message = this.appTooltipText;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AutoTooltipDirective, deps: [{ token: ElementRef }, { token: i6.MatTooltip }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.22", type: AutoTooltipDirective, isStandalone: false, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: { appAutoTooltip: ["appAutoTooltip", "appAutoTooltip", booleanAttribute] }, hostDirectives: [{ directive: i6.MatTooltip }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.22", type: AutoTooltipDirective, isStandalone: false, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: { appAutoTooltip: ["appAutoTooltip", "appAutoTooltip", booleanAttribute], appTooltipText: "appTooltipText" }, hostDirectives: [{ directive: i6.MatTooltip }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AutoTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ion-label[appAutoTooltip], mat-label[appAutoTooltip]',
                     hostDirectives: [MatTooltip],
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
                     type: Inject,
@@ -8027,6 +8048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }] }, { type: i6.MatTooltip }], propDecorators: { appAutoTooltip: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], appTooltipText: [{
+                type: Input
             }] } });
 
 class SharedDirectivesModule {
@@ -10878,8 +10901,9 @@ class MatAutocompleteField {
             this._openedSubscription.unsubscribe();
             this._subscription.remove(this._openedSubscription);
         }
-        const opened$ = this.autocomplete._isOpen ? timer(0) : this.autocomplete.opened.pipe(debounceTime(200));
-        const scrollEnd$ = opened$.pipe(map(() => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)), takeUntil(this.autocomplete.closed));
+        // Listen every opening: the 'more items' option (that calls this function) is not recreated when the panel reopens
+        const opened$ = merge(this.autocomplete._isOpen ? timer(0) : EMPTY, this.autocomplete.opened.pipe(debounceTime(200)));
+        const scrollEnd$ = opened$.pipe(map(() => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold).pipe(takeUntil(this.autocomplete.closed))));
         // Trigger fetch more, when end scroll reached
         this._openedSubscription = scrollEnd$.subscribe(() => this._fetchMore$.emit());
         // Register subscription
@@ -10894,8 +10918,9 @@ class MatAutocompleteField {
             this._openedSubscription.unsubscribe();
             this._subscription.remove(this._openedSubscription);
         }
-        const opened$ = this.matSelect.panelOpen ? timer(0) : this.matSelect._openedStream.pipe(debounceTime(200));
-        const scrollEnd$ = opened$.pipe(map(() => this.getMatSelectPanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)), takeUntil(this.matSelect._closedStream));
+        // Listen every opening: the 'more items' option (that calls this function) is not recreated when the panel reopens
+        const opened$ = merge(this.matSelect.panelOpen ? timer(0) : EMPTY, this.matSelect._openedStream.pipe(debounceTime(200)));
+        const scrollEnd$ = opened$.pipe(map(() => this.getMatSelectPanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold).pipe(takeUntil(this.matSelect._closedStream))));
         // Trigger fetch more, end end scroll reached
         this._openedSubscription = scrollEnd$.pipe(filter(() => this._moreItemsCount > 0)).subscribe(() => this._fetchMore$.emit());
         // Register subscription
@@ -14301,8 +14326,9 @@ class MatChipsField {
             this._openedSubscription.unsubscribe();
             this._subscription.remove(this._openedSubscription);
         }
-        const opened$ = this.autocomplete._isOpen ? timer(0) : this.autocomplete.opened.pipe(debounceTime(200));
-        const scrollEnd$ = opened$.pipe(map((_) => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)), takeUntil(this.autocomplete.closed));
+        // Listen every opening: the 'more items' option (that calls this function) is not recreated when the panel reopens
+        const opened$ = merge(this.autocomplete._isOpen ? timer(0) : EMPTY, this.autocomplete.opened.pipe(debounceTime(200)));
+        const scrollEnd$ = opened$.pipe(map((_) => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold).pipe(takeUntil(this.autocomplete.closed))));
         // Trigger fetch more, end end scroll reached
         this._openedSubscription = scrollEnd$.subscribe(() => this._fetchMore$.emit());
         // Register subscription
@@ -17660,11 +17686,11 @@ class UploadFileComponent {
         return waitFor(() => this.processingFilesCount === 0, opts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UploadFileComponent, isStandalone: false, selector: "app-upload-file", inputs: { fileExtension: "fileExtension", fileExtensionsExcluded: "fileExtensionsExcluded", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", maxFileSizeMb: "maxFileSizeMb", autoHideDropArea: "autoHideDropArea", showDropArea: "showDropArea", showThumbnails: "showThumbnails" }, outputs: { filesChange: "filesChange" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "@if (!showDropArea) {\n  <!-- hidden file input (no drop area): used by browse() -->\n  <input\n    type=\"file\"\n    #fileDropRef\n    class=\"hidden-file-input\"\n    hidden\n    [multiple]=\"!uniqueFile\"\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n} @else if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label>\n      <span\n        [innerHTML]=\"\n          'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n        \"\n      ></span>\n    </ion-label>\n    <ion-button color=\"tertiary\">{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<!-- global progression (useful when many files are selected) -->\n@if (uploading && files.length > 1) {\n  <div class=\"upload-summary\">\n    <ion-label color=\"medium\">\n      <small>{{ 'FILE.UPLOAD.DONE_COUNT' | translate: { count: doneFilesCount, total: files.length } }}</small>\n    </ion-label>\n    <ion-progress-bar [value]=\"doneFilesCount / files.length\" color=\"accent\"></ion-progress-bar>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        @if (showThumbnails && file.kind === 'image') {\n          <!-- image thumbnail, or a skeleton until the image is ready -->\n          <div slot=\"start\" class=\"file-thumbnail\">\n            @if (file.error) {\n              <mat-icon color=\"danger\">broken_image</mat-icon>\n            } @else if (file.progress === 1 && file.response?.body) {\n              <img [src]=\"file.response.body\" alt=\"\" />\n            } @else {\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            }\n          </div>\n        } @else {\n          <!-- icon of the file type (pdf, spreadsheet, document...) -->\n          <div slot=\"start\" class=\"file-icon\" [class.file-thumbnail]=\"showThumbnails\" [attr.data-kind]=\"file.kind\">\n            <mat-icon>{{ fileKindIcons[file.kind || 'other'] }}</mat-icon>\n          </div>\n        }\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error && !showThumbnails) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text\n              color=\"danger\"\n              [innerHTML]=\"\n                file.error\n                  | translate\n                    : {\n                        fileExtension: fileExtension,\n                        fileExtensionsExcluded: fileExtensionsExcluded.join(', '),\n                        maxFileSizeMb: maxFileSizeMb,\n                      }\n              \"\n            ></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.upload-summary{padding:0 1.5rem .5rem}.upload-summary ion-progress-bar{margin-top:4px}.file-thumbnail{--thumbnail-size: 48px;width:var(--thumbnail-size);height:var(--thumbnail-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:4px;overflow:hidden}.file-thumbnail img{width:100%;height:100%;object-fit:cover}.file-thumbnail ion-skeleton-text{width:100%;height:100%;margin:0}.file-icon{display:flex;align-items:center;justify-content:center;color:var(--ion-color-medium)}.file-icon.file-thumbnail mat-icon{--icon-size: 36px;font-size:var(--icon-size);width:var(--icon-size);height:var(--icon-size)}.file-icon[data-kind=pdf]{color:#d93025}.file-icon[data-kind=document]{color:#2b579a}.file-icon[data-kind=spreadsheet]{color:#217346}.file-icon[data-kind=presentation]{color:#d24726}.file-icon[data-kind=archive]{color:#b8860b}.file-icon[data-kind=image]{color:var(--ion-color-tertiary)}.file-icon[data-kind=video],.file-icon[data-kind=audio]{color:#7b1fa2}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\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.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.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "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: "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: DragAndDropDirective, selector: "[appDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UploadFileComponent, isStandalone: false, selector: "app-upload-file", inputs: { fileExtension: "fileExtension", fileExtensionsExcluded: "fileExtensionsExcluded", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", maxFileSizeMb: "maxFileSizeMb", autoHideDropArea: "autoHideDropArea", showDropArea: "showDropArea", showThumbnails: "showThumbnails" }, outputs: { filesChange: "filesChange" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "@if (!showDropArea) {\n  <!-- hidden file input (no drop area): used by browse() -->\n  <input\n    type=\"file\"\n    #fileDropRef\n    class=\"hidden-file-input\"\n    hidden\n    [multiple]=\"!uniqueFile\"\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n} @else if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label>\n      <span\n        [innerHTML]=\"\n          'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n        \"\n      ></span>\n    </ion-label>\n    <ion-button color=\"tertiary\">{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<!-- global progression (useful when many files are selected) -->\n@if (uploading && files.length > 1) {\n  <div class=\"upload-summary\">\n    <ion-label color=\"medium\">\n      <small>{{ 'FILE.UPLOAD.DONE_COUNT' | translate: { count: doneFilesCount, total: files.length } }}</small>\n    </ion-label>\n    <ion-progress-bar [value]=\"doneFilesCount / files.length\" color=\"accent\"></ion-progress-bar>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        @if (showThumbnails && file.kind === 'image') {\n          <!-- image thumbnail, or a skeleton until the image is ready -->\n          <div slot=\"start\" class=\"file-thumbnail\">\n            @if (file.error) {\n              <mat-icon color=\"danger\">broken_image</mat-icon>\n            } @else if (file.progress === 1 && file.response?.body) {\n              <img [src]=\"file.response.body\" alt=\"\" />\n            } @else {\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            }\n          </div>\n        } @else {\n          <!-- icon of the file type (pdf, spreadsheet, document...) -->\n          <div slot=\"start\" class=\"file-icon\" [class.file-thumbnail]=\"showThumbnails\" [attr.data-kind]=\"file.kind\">\n            <mat-icon>{{ fileKindIcons[file.kind || 'other'] }}</mat-icon>\n          </div>\n        }\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error && !showThumbnails) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text\n              color=\"danger\"\n              [innerHTML]=\"\n                file.error\n                  | translate\n                    : {\n                        fileExtension: fileExtension,\n                        fileExtensionsExcluded: fileExtensionsExcluded.join(', '),\n                        maxFileSizeMb: maxFileSizeMb,\n                      }\n              \"\n            ></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.upload-summary{padding:0 1.5rem .5rem}.upload-summary ion-progress-bar{margin-top:4px}.file-thumbnail{--thumbnail-size: 48px;width:var(--thumbnail-size);height:var(--thumbnail-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:4px;overflow:hidden}.file-thumbnail img{width:100%;height:100%;object-fit:cover}.file-thumbnail ion-skeleton-text{width:100%;height:100%;margin:0}.file-icon{display:flex;align-items:center;justify-content:center;color:var(--ion-color-medium)}.file-icon.file-thumbnail mat-icon{--icon-size: 36px;font-size:var(--icon-size);width:var(--icon-size);height:var(--icon-size)}.file-icon[data-kind=pdf]{color:#d93025}.file-icon[data-kind=document]{color:#2b579a}.file-icon[data-kind=spreadsheet]{color:#217346}.file-icon[data-kind=presentation]{color:#d24726}.file-icon[data-kind=archive]{color:#b8860b}.file-icon[data-kind=image]{color:var(--ion-color-tertiary)}.file-icon[data-kind=video],.file-icon[data-kind=audio]{color:#7b1fa2}.files-list{max-height:var(--app-upload-file-list-max-height, 300px);overflow:auto}.files-list .single-file{display:flex;flex-direction:column;flex:1 1 auto}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\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.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.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "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: "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: DragAndDropDirective, selector: "[appDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-upload-file', standalone: false, template: "@if (!showDropArea) {\n  <!-- hidden file input (no drop area): used by browse() -->\n  <input\n    type=\"file\"\n    #fileDropRef\n    class=\"hidden-file-input\"\n    hidden\n    [multiple]=\"!uniqueFile\"\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n} @else if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label>\n      <span\n        [innerHTML]=\"\n          'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n        \"\n      ></span>\n    </ion-label>\n    <ion-button color=\"tertiary\">{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<!-- global progression (useful when many files are selected) -->\n@if (uploading && files.length > 1) {\n  <div class=\"upload-summary\">\n    <ion-label color=\"medium\">\n      <small>{{ 'FILE.UPLOAD.DONE_COUNT' | translate: { count: doneFilesCount, total: files.length } }}</small>\n    </ion-label>\n    <ion-progress-bar [value]=\"doneFilesCount / files.length\" color=\"accent\"></ion-progress-bar>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        @if (showThumbnails && file.kind === 'image') {\n          <!-- image thumbnail, or a skeleton until the image is ready -->\n          <div slot=\"start\" class=\"file-thumbnail\">\n            @if (file.error) {\n              <mat-icon color=\"danger\">broken_image</mat-icon>\n            } @else if (file.progress === 1 && file.response?.body) {\n              <img [src]=\"file.response.body\" alt=\"\" />\n            } @else {\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            }\n          </div>\n        } @else {\n          <!-- icon of the file type (pdf, spreadsheet, document...) -->\n          <div slot=\"start\" class=\"file-icon\" [class.file-thumbnail]=\"showThumbnails\" [attr.data-kind]=\"file.kind\">\n            <mat-icon>{{ fileKindIcons[file.kind || 'other'] }}</mat-icon>\n          </div>\n        }\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error && !showThumbnails) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text\n              color=\"danger\"\n              [innerHTML]=\"\n                file.error\n                  | translate\n                    : {\n                        fileExtension: fileExtension,\n                        fileExtensionsExcluded: fileExtensionsExcluded.join(', '),\n                        maxFileSizeMb: maxFileSizeMb,\n                      }\n              \"\n            ></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.upload-summary{padding:0 1.5rem .5rem}.upload-summary ion-progress-bar{margin-top:4px}.file-thumbnail{--thumbnail-size: 48px;width:var(--thumbnail-size);height:var(--thumbnail-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:4px;overflow:hidden}.file-thumbnail img{width:100%;height:100%;object-fit:cover}.file-thumbnail ion-skeleton-text{width:100%;height:100%;margin:0}.file-icon{display:flex;align-items:center;justify-content:center;color:var(--ion-color-medium)}.file-icon.file-thumbnail mat-icon{--icon-size: 36px;font-size:var(--icon-size);width:var(--icon-size);height:var(--icon-size)}.file-icon[data-kind=pdf]{color:#d93025}.file-icon[data-kind=document]{color:#2b579a}.file-icon[data-kind=spreadsheet]{color:#217346}.file-icon[data-kind=presentation]{color:#d24726}.file-icon[data-kind=archive]{color:#b8860b}.file-icon[data-kind=image]{color:var(--ion-color-tertiary)}.file-icon[data-kind=video],.file-icon[data-kind=audio]{color:#7b1fa2}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"] }]
+            args: [{ selector: 'app-upload-file', standalone: false, template: "@if (!showDropArea) {\n  <!-- hidden file input (no drop area): used by browse() -->\n  <input\n    type=\"file\"\n    #fileDropRef\n    class=\"hidden-file-input\"\n    hidden\n    [multiple]=\"!uniqueFile\"\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n} @else if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label>\n      <span\n        [innerHTML]=\"\n          'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n        \"\n      ></span>\n    </ion-label>\n    <ion-button color=\"tertiary\">{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<!-- global progression (useful when many files are selected) -->\n@if (uploading && files.length > 1) {\n  <div class=\"upload-summary\">\n    <ion-label color=\"medium\">\n      <small>{{ 'FILE.UPLOAD.DONE_COUNT' | translate: { count: doneFilesCount, total: files.length } }}</small>\n    </ion-label>\n    <ion-progress-bar [value]=\"doneFilesCount / files.length\" color=\"accent\"></ion-progress-bar>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        @if (showThumbnails && file.kind === 'image') {\n          <!-- image thumbnail, or a skeleton until the image is ready -->\n          <div slot=\"start\" class=\"file-thumbnail\">\n            @if (file.error) {\n              <mat-icon color=\"danger\">broken_image</mat-icon>\n            } @else if (file.progress === 1 && file.response?.body) {\n              <img [src]=\"file.response.body\" alt=\"\" />\n            } @else {\n              <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n            }\n          </div>\n        } @else {\n          <!-- icon of the file type (pdf, spreadsheet, document...) -->\n          <div slot=\"start\" class=\"file-icon\" [class.file-thumbnail]=\"showThumbnails\" [attr.data-kind]=\"file.kind\">\n            <mat-icon>{{ fileKindIcons[file.kind || 'other'] }}</mat-icon>\n          </div>\n        }\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error && !showThumbnails) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text\n              color=\"danger\"\n              [innerHTML]=\"\n                file.error\n                  | translate\n                    : {\n                        fileExtension: fileExtension,\n                        fileExtensionsExcluded: fileExtensionsExcluded.join(', '),\n                        maxFileSizeMb: maxFileSizeMb,\n                      }\n              \"\n            ></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.upload-summary{padding:0 1.5rem .5rem}.upload-summary ion-progress-bar{margin-top:4px}.file-thumbnail{--thumbnail-size: 48px;width:var(--thumbnail-size);height:var(--thumbnail-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:4px;overflow:hidden}.file-thumbnail img{width:100%;height:100%;object-fit:cover}.file-thumbnail ion-skeleton-text{width:100%;height:100%;margin:0}.file-icon{display:flex;align-items:center;justify-content:center;color:var(--ion-color-medium)}.file-icon.file-thumbnail mat-icon{--icon-size: 36px;font-size:var(--icon-size);width:var(--icon-size);height:var(--icon-size)}.file-icon[data-kind=pdf]{color:#d93025}.file-icon[data-kind=document]{color:#2b579a}.file-icon[data-kind=spreadsheet]{color:#217346}.file-icon[data-kind=presentation]{color:#d24726}.file-icon[data-kind=archive]{color:#b8860b}.file-icon[data-kind=image]{color:var(--ion-color-tertiary)}.file-icon[data-kind=video],.file-icon[data-kind=audio]{color:#7b1fa2}.files-list{max-height:var(--app-upload-file-list-max-height, 300px);overflow:auto}.files-list .single-file{display:flex;flex-direction:column;flex:1 1 auto}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.TranslateService }], propDecorators: { fileDropEl: [{
                 type: ViewChild,
                 args: ['fileDropRef', { static: false }]
@@ -17712,6 +17738,7 @@ class UploadFilePopover {
     showThumbnails = false;
     okButtonText = 'COMMON.BTN_IMPORT';
     cancelButtonText = 'COMMON.BTN_CANCEL';
+    showOkButton = true;
     importing = false;
     error;
     get files() {
@@ -17768,6 +17795,17 @@ class UploadFilePopover {
     cancel() {
         return this.popoverController.dismiss();
     }
+    async onFilesChange(files) {
+        if (this.showOkButton || this.importing)
+            return;
+        if (isEmptyArray(files))
+            return;
+        const processedFiles = this.uploader.processedFiles;
+        const allFilesProcessed = files.every((file) => !!file.error || (processedFiles.includes(file) && isNotNil(file.response)));
+        if (!allFilesProcessed)
+            return;
+        await this.onValidate(null);
+    }
     resetError() {
         if (this.error) {
             this.error = null;
@@ -17775,11 +17813,11 @@ class UploadFilePopover {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFilePopover, deps: [{ token: i2$2.PopoverController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UploadFilePopover, isStandalone: false, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", fileExtensionsExcluded: "fileExtensionsExcluded", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", maxFileSizeMb: "maxFileSizeMb", autoHideDropArea: "autoHideDropArea", showThumbnails: "showThumbnails", okButtonText: "okButtonText", cancelButtonText: "cancelButtonText" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [fileExtensionsExcluded]=\"fileExtensionsExcluded\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [maxFileSizeMb]=\"maxFileSizeMb\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n    [showThumbnails]=\"showThumbnails\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\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.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.IonFooter, selector: "ion-footer", 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.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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "fileExtensionsExcluded", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload", "maxFileSizeMb", "autoHideDropArea", "showDropArea", "showThumbnails"], outputs: ["filesChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UploadFilePopover, isStandalone: false, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", fileExtensionsExcluded: "fileExtensionsExcluded", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", maxFileSizeMb: "maxFileSizeMb", autoHideDropArea: "autoHideDropArea", showThumbnails: "showThumbnails", okButtonText: "okButtonText", cancelButtonText: "cancelButtonText", showOkButton: "showOkButton" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [fileExtensionsExcluded]=\"fileExtensionsExcluded\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [maxFileSizeMb]=\"maxFileSizeMb\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n    [showThumbnails]=\"showThumbnails\"\n    (filesChange)=\"onFilesChange($event)\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        @if (showOkButton) {\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      }\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\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.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.IonFooter, selector: "ion-footer", 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.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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "fileExtensionsExcluded", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload", "maxFileSizeMb", "autoHideDropArea", "showDropArea", "showThumbnails"], outputs: ["filesChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFilePopover, decorators: [{
             type: Component,
-            args: [{ selector: 'app-upload-file-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [fileExtensionsExcluded]=\"fileExtensionsExcluded\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [maxFileSizeMb]=\"maxFileSizeMb\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n    [showThumbnails]=\"showThumbnails\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"] }]
+            args: [{ selector: 'app-upload-file-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [fileExtensionsExcluded]=\"fileExtensionsExcluded\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [maxFileSizeMb]=\"maxFileSizeMb\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n    [showThumbnails]=\"showThumbnails\"\n    (filesChange)=\"onFilesChange($event)\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        @if (showOkButton) {\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      }\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.PopoverController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { uploader: [{
                 type: ViewChild,
                 args: ['uploader', { static: true }]
@@ -17809,38 +17847,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], cancelButtonText: [{
                 type: Input
+            }], showOkButton: [{
+                type: Input
             }] } });
 
 const APP_TESTING_PAGES = new InjectionToken('testingPages');
+const SEARCH_QUERY_PARAM = 'q';
+function normalize(value) {
+    return removeDiacritics(value || '').toLowerCase();
+}
+/**
+ * Split a text into parts, flagging parts that match one of the (normalized) tokens.
+ * Assumes removeDiacritics() keeps the string length (true for latin accents).
+ */
+function splitByTokens(text, tokens) {
+    if (!text)
+        return [];
+    if (!tokens.length)
+        return [{ text, match: false }];
+    const normalized = normalize(text);
+    const matches = new Array(text.length).fill(false);
+    for (const token of tokens) {
+        let start = normalized.indexOf(token);
+        while (start !== -1) {
+            matches.fill(true, start, start + token.length);
+            start = normalized.indexOf(token, start + token.length);
+        }
+    }
+    const parts = [];
+    for (let i = 0; i < text.length; i++) {
+        const last = parts[parts.length - 1];
+        if (last && last.match === matches[i])
+            last.text += text[i];
+        else
+            parts.push({ text: text[i], match: matches[i] });
+    }
+    return parts;
+}
 class SharedTestsPage {
-    route;
-    router;
-    translate;
-    pages;
-    constructor(route, router, translate, pages) {
-        this.route = route;
-        this.router = router;
-        this.translate = translate;
-        this.pages = pages;
-        console.info('[testing] Loaded tests pages:', pages);
+    // Code under free license (GPL version 3)
+    searchbar = viewChild(IonSearchbar, ...(ngDevMode ? [{ debugName: "searchbar" }] : /* istanbul ignore next */ []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    showSearchbar = signal(false, ...(ngDevMode ? [{ debugName: "showSearchbar" }] : /* istanbul ignore next */ []));
+    totalCount;
+    initialSearchText; // Not bound to searchText(), to avoid overriding the input while typing
+    sections = computed(() => this.filter(this.searchText()), ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    visibleCount = computed(() => this.sections().reduce((count, section) => count + section.items.length, 0), ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    location = inject(Location);
+    pages = inject(APP_TESTING_PAGES, { optional: true });
+    constructor() {
+        console.info('[testing] Loaded tests pages:', this.pages);
+        this.totalCount = (this.pages || []).filter((p) => !p.divider && p.page).length;
+        // Restore the search text (e.g. when going back from a test page)
+        this.initialSearchText = this.route.snapshot.queryParamMap.get(SEARCH_QUERY_PARAM) || '';
+        this.searchText.set(this.initialSearchText);
+        this.showSearchbar.set(!!this.initialSearchText);
+    }
+    ionViewDidEnter() {
+        // Focus the searchbar (if visible), to be able to continue typing
+        if (this.showSearchbar())
+            this.focusSearchbar();
+    }
+    onDocumentKeydown(domEvent) {
+        const event = domEvent;
+        // Open the searchbar on '/' or Ctrl+K, if not already typing in a field
+        const target = event.target;
+        const isTyping = target?.closest?.('input, textarea, [contenteditable="true"]');
+        if ((event.key === '/' && !isTyping) || (event.key === 'k' && (event.ctrlKey || event.metaKey))) {
+            event.preventDefault();
+            this.openSearchbar();
+        }
+    }
+    toggleSearchbar() {
+        if (this.showSearchbar())
+            this.closeSearchbar();
+        else
+            this.openSearchbar();
+    }
+    openSearchbar() {
+        this.showSearchbar.set(true);
+        this.focusSearchbar();
+    }
+    closeSearchbar() {
+        // Reset the filter, to never hide pages without a visible searchbar
+        if (this.searchText())
+            this.onSearchInput('');
+        this.initialSearchText = '';
+        this.showSearchbar.set(false);
+    }
+    onSearchInput(value) {
+        const searchText = value || '';
+        this.searchText.set(searchText);
+        this.activeIndex.set(0);
+        // Keep the search text in the URL (restored on back navigation), without triggering a navigation
+        const urlTree = this.router.createUrlTree([], {
+            relativeTo: this.route,
+            queryParams: { [SEARCH_QUERY_PARAM]: searchText.trim() || null },
+            queryParamsHandling: 'merge',
+        });
+        this.location.replaceState(this.router.serializeUrl(urlTree));
+    }
+    onSearchKeydown(event) {
+        const count = this.visibleCount();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (count)
+                    this.setActiveIndex((this.activeIndex() + 1) % count);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (count)
+                    this.setActiveIndex((this.activeIndex() - 1 + count) % count);
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const item = this.findItem(this.activeIndex());
+                if (item)
+                    this.openPage(item.page, event);
+                break;
+            }
+            case 'Escape':
+                // Clear the search text, or close the searchbar if already empty
+                event.preventDefault();
+                if (this.searchText())
+                    this.clearSearch();
+                else
+                    this.closeSearchbar();
+                break;
+        }
+    }
+    clearSearch() {
+        const searchbar = this.searchbar();
+        if (searchbar)
+            searchbar.value = '';
+        this.onSearchInput('');
+        this.focusSearchbar();
     }
-    async openPage(page) {
+    focusSearchbar() {
+        // Wait the searchbar to be rendered
+        setTimeout(() => this.searchbar()?.setFocus(), 150);
+    }
+    async openPage(page, event) {
+        // Open in a new tab, on Ctrl/Cmd + click (or Ctrl/Cmd + Enter)
+        if (event && (event.ctrlKey || event.metaKey)) {
+            const url = this.router.serializeUrl(this.router.createUrlTree([page]));
+            window.open(url, '_blank');
+            return false;
+        }
         return this.router.navigate([page], {
             relativeTo: this.route,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SharedTestsPage, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2.TranslateService }, { token: APP_TESTING_PAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SharedTestsPage, isStandalone: false, selector: "app-tests-page", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Tests</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  @if (pages?.length) {\n    <ion-list>\n      @for (item of pages; track item) {\n        @if (item.divider) {\n          <ion-item-divider>{{ item.label }}</ion-item-divider>\n        } @else {\n          <ion-item tappable class=\"text-1x\" (click)=\"openPage(item.page)\">{{ item.label }}</ion-item>\n        }\n      }\n    </ion-list>\n  }\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { 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.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }] });
+    setActiveIndex(index) {
+        this.activeIndex.set(index);
+        // Scroll the active item into view
+        setTimeout(() => document.querySelector('app-tests-page ion-item.active')?.scrollIntoView({ block: 'nearest' }));
+    }
+    findItem(index) {
+        for (const section of this.sections()) {
+            const item = section.items.find((i) => i.index === index);
+            if (item)
+                return item;
+        }
+        return undefined;
+    }
+    filter(searchText) {
+        const tokens = normalize(searchText)
+            .split(/\s+/)
+            .filter((token) => token.length > 0);
+        // Group pages by section (divider)
+        const groups = [];
+        for (const page of this.pages || []) {
+            if (page.divider)
+                groups.push({ label: page.label, pages: [] });
+            else if (page.page) {
+                if (!groups.length)
+                    groups.push({ pages: [] });
+                groups[groups.length - 1].pages.push(page);
+            }
+        }
+        // Filter: each token must match the item label, its path, or its section label
+        let index = 0;
+        const sections = [];
+        for (const group of groups) {
+            const sectionText = normalize(group.label);
+            const items = group.pages
+                .filter((p) => {
+                if (!tokens.length)
+                    return true;
+                const text = `${sectionText} ${normalize(p.label)} ${normalize(p.page)}`;
+                return tokens.every((token) => text.includes(token));
+            })
+                .map((p) => ({
+                index: index++,
+                page: p.page,
+                labelParts: splitByTokens(p.label, tokens),
+                pageParts: splitByTokens(p.page, tokens),
+            }));
+            if (items.length) {
+                sections.push({ labelParts: group.label ? splitByTokens(group.label, tokens) : undefined, items });
+            }
+        }
+        return sections;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SharedTestsPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SharedTestsPage, isStandalone: false, selector: "app-tests-page", host: { listeners: { "document:keydown": "onDocumentKeydown($event)" } }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: IonSearchbar, descendants: true, isSignal: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    @if (showSearchbar()) {\n      <!-- Search bar (replace the title, when expanded) -->\n      <ion-searchbar\n        color=\"light\"\n        [value]=\"initialSearchText\"\n        [debounce]=\"0\"\n        [placeholder]=\"'TESTING_PAGE.SEARCH_PLACEHOLDER' | translate\"\n        showClearButton=\"always\"\n        autocapitalize=\"off\"\n        (ionInput)=\"onSearchInput($event.detail.value)\"\n        (ionClear)=\"clearSearch()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      ></ion-searchbar>\n    } @else {\n      <ion-title>{{ 'TESTING_PAGE.TITLE' | translate }}</ion-title>\n    }\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle the search bar -->\n      <ion-button\n        [class.search-active]=\"showSearchbar()\"\n        [title]=\"(showSearchbar() ? 'TESTING_PAGE.BTN_HIDE_SEARCH' : 'TESTING_PAGE.BTN_SHOW_SEARCH') | translate\"\n        (click)=\"toggleSearchbar()\"\n      >\n        <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- Result count (under the search bar) -->\n  @if (showSearchbar() && searchText().trim()) {\n    <div class=\"search-count\">\n      <ion-label [color]=\"visibleCount() === 0 ? 'danger' : 'primary100'\" class=\"ion-padding\">\n        {{ (visibleCount() ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: { count: visibleCount() } }}\n      </ion-label>\n    </div>\n  }\n</ion-header>\n\n<ion-content>\n  @if (sections().length) {\n    <ion-list>\n      @for (section of sections(); track $index) {\n        <ion-item-group>\n          @if (section.labelParts) {\n            <ion-item-divider sticky>\n              <ion-label>\n                <ng-container *ngTemplateOutlet=\"textParts; context: { $implicit: section.labelParts }\"></ng-container>\n              </ion-label>\n            </ion-item-divider>\n          }\n          @for (item of section.items; track item.page) {\n            <ion-item\n              tappable\n              class=\"text-1x\"\n              [class.active]=\"searchText() && item.index === activeIndex()\"\n              [title]=\"item.page\"\n              (click)=\"openPage(item.page, $event)\"\n              (auxclick)=\"$event.button === 1 && openPage(item.page, { ctrlKey: true })\"\n            >\n              <ion-label>\n                <ng-container *ngTemplateOutlet=\"textParts; context: { $implicit: item.labelParts }\"></ng-container>\n              </ion-label>\n              <ion-note slot=\"end\" class=\"page-path ion-hide-sm-down\">\n                <ng-container *ngTemplateOutlet=\"textParts; context: { $implicit: item.pageParts }\"></ng-container>\n              </ion-note>\n            </ion-item>\n          }\n        </ion-item-group>\n      }\n    </ion-list>\n  } @else if (searchText()) {\n    <!-- No result: the message is displayed under the search bar -->\n    <div class=\"ion-padding ion-text-center\">\n      <ion-button fill=\"clear\" (click)=\"clearSearch()\">\n        <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n        {{ 'TESTING_PAGE.BTN_CLEAR_SEARCH' | translate }}\n      </ion-button>\n    </div>\n  }\n</ion-content>\n\n<ng-template #textParts let-parts>\n  <!-- Keep on a single line, to avoid extra spaces around <mark> -->\n  <!-- prettier-ignore -->\n  @for (part of parts; track $index) {@if (part.match) {<mark>{{ part.text }}</mark>} @else {{{ part.text }}}}\n</ng-template>\n", styles: [":host ion-toolbar ion-searchbar{padding-top:4px;padding-bottom:4px}:host .search-count{display:flex;background:var(--ion-background-color, #fff);border-bottom:1px solid var(--ion-border-color, var(--ion-color-light-shade))}:host ion-button.search-active{--background: rgba(var(--ion-color-primary-contrast-rgb, 255, 255, 255), .2);--border-radius: 50%}:host ion-item.active{--background: var(--ion-color-light);box-shadow:inset 3px 0 0 var(--ion-color-primary)}:host .page-path{font-family:monospace;font-size:.8em}:host mark{background-color:var(--ion-color-warning-tint, #ffe187);color:inherit;padding:0;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$2.IonItemGroup, selector: "ion-item-group" }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i2$2.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { 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.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SharedTestsPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tests-page', standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Tests</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  @if (pages?.length) {\n    <ion-list>\n      @for (item of pages; track item) {\n        @if (item.divider) {\n          <ion-item-divider>{{ item.label }}</ion-item-divider>\n        } @else {\n          <ion-item tappable class=\"text-1x\" (click)=\"openPage(item.page)\">{{ item.label }}</ion-item>\n        }\n      }\n    </ion-list>\n  }\n</ion-content>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }, { type: i2.TranslateService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [APP_TESTING_PAGES]
-                }] }] });
+            args: [{ selector: 'app-tests-page', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    @if (showSearchbar()) {\n      <!-- Search bar (replace the title, when expanded) -->\n      <ion-searchbar\n        color=\"light\"\n        [value]=\"initialSearchText\"\n        [debounce]=\"0\"\n        [placeholder]=\"'TESTING_PAGE.SEARCH_PLACEHOLDER' | translate\"\n        showClearButton=\"always\"\n        autocapitalize=\"off\"\n        (ionInput)=\"onSearchInput($event.detail.value)\"\n        (ionClear)=\"clearSearch()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      ></ion-searchbar>\n    } @else {\n      <ion-title>{{ 'TESTING_PAGE.TITLE' | translate }}</ion-title>\n    }\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle the search bar -->\n      <ion-button\n        [class.search-active]=\"showSearchbar()\"\n        [title]=\"(showSearchbar() ? 'TESTING_PAGE.BTN_HIDE_SEARCH' : 'TESTING_PAGE.BTN_SHOW_SEARCH') | translate\"\n        (click)=\"toggleSearchbar()\"\n      >\n        <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- Result count (under the search bar) -->\n  @if (showSearchbar() && searchText().trim()) {\n    <div class=\"search-count\">\n      <ion-label [color]=\"visibleCount() === 0 ? 'danger' : 'primary100'\" class=\"ion-padding\">\n        {{ (visibleCount() ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: { count: visibleCount() } }}\n      </ion-label>\n    </div>\n  }\n</ion-header>\n\n<ion-content>\n  @if (sections().length) {\n    <ion-list>\n      @for (section of sections(); track $index) {\n        <ion-item-group>\n          @if (section.labelParts) {\n            <ion-item-divider sticky>\n              <ion-label>\n                <ng-container *ngTemplateOutlet=\"textParts; context: { $implicit: section.labelParts }\"></ng-container>\n              </ion-label>\n            </ion-item-divider>\n          }\n          @for (item of section.items; track item.page) {\n            <ion-item\n              tappable\n              class=\"text-1x\"\n              [class.active]=\"searchText() && item.index === activeIndex()\"\n              [title]=\"item.page\"\n              (click)=\"openPage(item.page, $event)\"\n              (auxclick)=\"$event.button === 1 && openPage(item.page, { ctrlKey: true })\"\n            >\n              <ion-label>\n                <ng-container *ngTemplateOutlet=\"textParts; context: { $implicit: item.labelParts }\"></ng-container>\n              </ion-label>\n              <ion-note slot=\"end\" class=\"page-path ion-hide-sm-down\">\n                <ng-container *ngTemplateOutlet=\"textParts; context: { $implicit: item.pageParts }\"></ng-container>\n              </ion-note>\n            </ion-item>\n          }\n        </ion-item-group>\n      }\n    </ion-list>\n  } @else if (searchText()) {\n    <!-- No result: the message is displayed under the search bar -->\n    <div class=\"ion-padding ion-text-center\">\n      <ion-button fill=\"clear\" (click)=\"clearSearch()\">\n        <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n        {{ 'TESTING_PAGE.BTN_CLEAR_SEARCH' | translate }}\n      </ion-button>\n    </div>\n  }\n</ion-content>\n\n<ng-template #textParts let-parts>\n  <!-- Keep on a single line, to avoid extra spaces around <mark> -->\n  <!-- prettier-ignore -->\n  @for (part of parts; track $index) {@if (part.match) {<mark>{{ part.text }}</mark>} @else {{{ part.text }}}}\n</ng-template>\n", styles: [":host ion-toolbar ion-searchbar{padding-top:4px;padding-bottom:4px}:host .search-count{display:flex;background:var(--ion-background-color, #fff);border-bottom:1px solid var(--ion-border-color, var(--ion-color-light-shade))}:host ion-button.search-active{--background: rgba(var(--ion-color-primary-contrast-rgb, 255, 255, 255), .2);--border-radius: 50%}:host ion-item.active{--background: var(--ion-color-light);box-shadow:inset 3px 0 0 var(--ion-color-primary)}:host .page-path{font-family:monospace;font-size:.8em}:host mark{background-color:var(--ion-color-warning-tint, #ffe187);color:inherit;padding:0;border-radius:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => IonSearchbar), { isSignal: true }] }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 const StorageDrivers = {
     SQLLite: CordovaSQLiteDriver._driver,
@@ -22632,6 +22855,47 @@ function isSubscriptionOperation(operation) {
     const def = getMainDefinition(operation.query);
     return def.kind === 'OperationDefinition' && def.operation === 'subscription';
 }
+const DEFER_DIRECTIVE_NAME = 'defer';
+/**
+ * Return true if the document uses the @defer directive
+ */
+function hasDeferDirective(document) {
+    if (!document)
+        return false;
+    let found = false;
+    visit(document, {
+        [Kind.DIRECTIVE]: (node) => {
+            if (node.name.value === DEFER_DIRECTIVE_NAME)
+                found = true;
+        },
+    });
+    return found;
+}
+/**
+ * Remove the @defer directives from a document (deferred fragments are then fetched with the rest of the query)
+ */
+function removeDeferDirectives(document) {
+    if (!hasDeferDirective(document))
+        return document;
+    return visit(document, {
+        [Kind.DIRECTIVE]: (node) => (node.name.value === DEFER_DIRECTIVE_NAME ? null : undefined),
+    });
+}
+function isDeferredOperation(operation) {
+    return hasDeferDirective(operation.query);
+}
+/**
+ * Convert Angular HttpHeaders (used by the apollo-angular HttpLink) into a plain object, as expected by the Apollo fetch HttpLink
+ */
+const httpHeadersToRecordLink = new ApolloLink((operation, forward) => {
+    const { headers } = operation.getContext();
+    if (headers instanceof HttpHeaders) {
+        const record = {};
+        headers.keys().forEach((key) => (record[key] = headers.getAll(key).join(', ')));
+        operation.setContext({ headers: record });
+    }
+    return forward(operation);
+});
 const TRACKED_QUERIES_STORAGE_KEY = 'apollo-tracker-persist';
 function createTrackerLink(opts) {
     const trackedQueriesUpdated = new EventEmitter();
@@ -22746,6 +23010,12 @@ class GraphqlService extends StartableService {
     get cache() {
         return this.apollo.client.cache;
     }
+    /**
+     * Is the @defer directive enabled (see environment.enableGraphqlDefer)? If not, @defer directives are removed from queries
+     */
+    get deferEnabled() {
+        return this.environment.enableGraphqlDefer === true;
+    }
     get defaultFetchPolicy() {
         return this._defaultFetchPolicy;
     }
@@ -22792,7 +23062,11 @@ class GraphqlService extends StartableService {
         });
     }
     queryRefValuesChanges(queryRef, opts) {
-        return queryRef.valueChanges.pipe(catchError(async (error) => this.toApolloError(error, opts.error)), filter((value) => value.networkStatus === NetworkStatus.ready || value.networkStatus === NetworkStatus.error), map(({ data, error }) => {
+        return queryRef.valueChanges.pipe(catchError(async (error) => this.toApolloError(error, opts.error)), 
+        // Emit complete results, errors, and partial results of a @defer query (streaming)
+        filter((value) => value.networkStatus === NetworkStatus.ready ||
+            value.networkStatus === NetworkStatus.error ||
+            value.networkStatus === NetworkStatus.streaming), map(({ data, error }) => {
             if (error) {
                 throw error;
             }
@@ -33503,6 +33777,11 @@ class GitlabUtils {
     }
 }
 
+/** Default placeholder inserted inside wrap markers, when the selection is empty. */
+const WRAP_PLACEHOLDER = 'text';
+/** Default placeholders inserted by insertLink, when the selection is empty. */
+const LINK_PLACEHOLDER = 'link';
+const LINK_URL_PLACEHOLDER = 'url';
 class MarkdownUtils {
     static HTML_ENTITIES_MAP = {
         '&#39;': "'", // Single quote
@@ -33577,6 +33856,128 @@ class MarkdownUtils {
         return UrlUtils.getRootUrl(url);
     }
 }
+/** Markdown heading markers, longest first (used to replace an existing heading level). */
+const HEADING_MARKERS = ['###### ', '##### ', '#### ', '### ', '## ', '# '];
+/**
+ * Wraps (or unwraps when already wrapped) the textarea selection with the given markdown markers.
+ * Pure function: the caller is responsible for applying the result to the textarea and the control value.
+ *
+ * @param state current text and selection
+ * @param prefix left marker (e.g. '**' for bold, '==' for highlight)
+ * @param suffix right marker, defaults to prefix
+ * @param placeholder text inserted when the selection is empty
+ */
+function wrapSelection(state, prefix, suffix = prefix, placeholder = WRAP_PLACEHOLDER) {
+    const text = state?.text ?? '';
+    let start = state?.selectionStart ?? 0;
+    let end = state?.selectionEnd ?? 0;
+    // Toggle off: selection directly surrounded by markers -> remove them
+    if (start !== end && text.substring(Math.max(0, start - prefix.length), start) === prefix && text.substring(end, end + suffix.length) === suffix) {
+        const before = text.substring(0, Math.max(0, start - prefix.length));
+        const selection = text.substring(start, end);
+        const after = text.substring(end + suffix.length);
+        return {
+            text: before + selection + after,
+            selectionStart: start - prefix.length,
+            selectionEnd: end - prefix.length,
+        };
+    }
+    // Toggle off: selection itself contains the markers -> unwrap them
+    let innerStart = start;
+    let innerEnd = end;
+    if (text.substring(start, Math.min(end, start + prefix.length)) === prefix && text.substring(Math.max(start, end - suffix.length), end) === suffix) {
+        innerStart += prefix.length;
+        innerEnd -= suffix.length;
+    }
+    const isEmptySelection = start === end;
+    // When the markers are inside the selection (toggle off), they are removed:
+    // - content before/after the selection keeps its original positions;
+    // - the content starts at the original selection start.
+    const didUnwrap = innerStart !== start;
+    const before = text.substring(0, didUnwrap ? start : innerStart);
+    const selection = text.substring(innerStart, innerEnd) || placeholder;
+    // The trailing content continues after the original selection end (markers, if any, were inside it)
+    const after = text.substring(end);
+    // Caret right after the prefix marker; the selected text stays selected when wrapping existing text
+    const selectionStart = didUnwrap ? start : start + prefix.length;
+    const selectionEnd = didUnwrap ? start + selection.length : isEmptySelection ? selectionStart : selectionStart + selection.length;
+    // Toggle off: the markers were inside the selection, just remove them
+    const nextText = didUnwrap ? before + selection + after : before + prefix + selection + suffix + after;
+    return {
+        text: nextText,
+        selectionStart,
+        selectionEnd,
+    };
+}
+/**
+ * Toggles a line marker (e.g. '# ' for heading 1) on every involved line of the selection.
+ * When all involved lines already have the marker, it is removed; another heading marker is replaced.
+ */
+function toggleLinePrefix(state, marker) {
+    const text = state?.text ?? '';
+    let start = state?.selectionStart ?? 0;
+    let end = state?.selectionEnd ?? 0;
+    // Line boundaries covering the selection
+    const lineStart = text.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
+    const nextNewLine = text.indexOf('\n', end);
+    const lineEnd = nextNewLine === -1 ? text.length : nextNewLine;
+    const block = text.substring(lineStart, lineEnd);
+    const lines = block.length ? block.split('\n') : [''];
+    if (lines.every((line) => line.startsWith(marker))) {
+        // Toggle off: remove the marker on each involved line
+        return {
+            text: text.substring(0, lineStart) + lines.map((line) => line.substring(marker.length)).join('\n') + text.substring(lineEnd),
+            selectionStart: lineStart,
+            selectionEnd: lineEnd - marker.length * lines.length,
+        };
+    }
+    // Add (or replace an existing heading marker) on each involved line
+    const replaceExisting = HEADING_MARKERS.filter((m) => m !== marker);
+    const prefixed = lines
+        .map((line) => {
+        const existing = replaceExisting.find((m) => line.startsWith(m));
+        return existing ? marker + line.substring(existing.length) : marker + line;
+    })
+        .join('\n');
+    const diff = prefixed.length - block.length;
+    return {
+        text: text.substring(0, lineStart) + prefixed + text.substring(lineEnd),
+        // Empty line(s): place the caret after the inserted marker; otherwise select the prefixed block
+        selectionStart: block.length ? lineStart : lineStart + diff,
+        selectionEnd: lineEnd + diff,
+    };
+}
+/**
+ * Inserts a markdown link: turns the selected text into a link label, or inserts a template
+ * with the given placeholders when the selection is empty. The label stays selected afterwards.
+ */
+function insertLink(state, opts) {
+    const text = state?.text ?? '';
+    const start = Math.min(state?.selectionStart ?? 0, text.length);
+    const end = Math.min(state?.selectionEnd ?? 0, text.length);
+    const url = opts?.url ?? LINK_URL_PLACEHOLDER;
+    const label = start === end ? (opts?.label ?? LINK_PLACEHOLDER) : text.substring(start, end);
+    const link = `[${label}](${url})`;
+    const before = text.substring(0, start);
+    const after = text.substring(end);
+    let labelStart;
+    let labelEnd;
+    if (start === end) {
+        // Empty selection: select the default label, so the user can type over it
+        labelStart = before.length + 1;
+        labelEnd = labelStart + label.length;
+    }
+    else {
+        // Reuse the existing text as label: keep it selected
+        labelStart = start + 1;
+        labelEnd = labelStart + label.length;
+    }
+    return {
+        text: before + link + after,
+        selectionStart: labelStart,
+        selectionEnd: labelEnd,
+    };
+}
 
 class MarkdownService {
     route = inject(ActivatedRoute);
@@ -34681,6 +35082,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }] });
 
+/**
+ * Marked inline extension rendering `==highlighted text==` as `<mark>` elements.
+ *
+ * The highlight syntax has no GFM standard: this extension completes the renderer
+ * used by ngx-markdown, so composed messages (feed, inbox) render the same way as they are previewed.
+ *
+ * Registered through `SharedMarkdownModule.forRoot()` (`markedExtensions` option),
+ * and testable without Angular by applying it on a `Marked` instance.
+ */
+const compositionMarkdownExtensions = [
+    {
+        extensions: [
+            {
+                name: 'highlight',
+                level: 'inline',
+                start(src) {
+                    const index = src.indexOf('==');
+                    return index === -1 ? undefined : index;
+                },
+                // Same-line content only, and no unbalanced side (e.g. 'a == b' stays as-is)
+                tokenizer(src) {
+                    const match = /^==(?!\s)([^=\n]+?)(?<!\s)==/.exec(src);
+                    if (!match) {
+                        return undefined;
+                    }
+                    return {
+                        type: 'highlight',
+                        raw: match[0],
+                        text: match[1],
+                        // Keep nested inline syntaxes renderable (e.g. '==a **bold** b==')
+                        tokens: this.lexer.inlineTokens(match[1]),
+                    };
+                },
+                renderer(token) {
+                    return `<mark>${this.parser.parseInline(token.tokens ?? token.text)}</mark>`;
+                },
+            },
+        ],
+    },
+];
+
+/**
+ * Markdown composition toolbar: a row of buttons that insert markdown syntax
+ * at the caret of the linked textarea (bold, underline, strikethrough, highlight, headings, bullet list, link, attachment).
+ *
+ * Purely presentational towards the text: the component emits the new text through
+ * {@link textChange}, so the host remains owner of the form control value.
+ * The caret and selection are restored on the textarea after each action.
+ */
+class MarkdownToolbarComponent {
+    /** The textarea to edit (native element). */
+    textarea;
+    /** Disable all buttons (e.g. when the host form is disabled). */
+    disabled = false;
+    /** Disable the edition buttons, but not the preview toggle (e.g. when the preview replaces the text). */
+    editDisabled = false;
+    /** Show the attachment (paper clip) button. */
+    canAttach = false;
+    /** Reflects the current preview state (highlight the toggle button when active). */
+    preview = false;
+    /** Emits the new text value after each insertion. */
+    textChange = new EventEmitter();
+    /** Emits when the attachment button is clicked. */
+    attachClick = new EventEmitter();
+    /** Emits when the preview toggle button is clicked. */
+    previewToggle = new EventEmitter();
+    bold() {
+        this.apply(wrapSelection(this.currentState(), '**', '**'));
+    }
+    /** Underline: no markdown syntax exists, so use the inline HTML `<u>` tag (rendered by marked, and portable) */
+    underline() {
+        this.apply(wrapSelection(this.currentState(), '<u>', '</u>'));
+    }
+    /** Strikethrough (GFM syntax) */
+    strikethrough() {
+        this.apply(wrapSelection(this.currentState(), '~~', '~~'));
+    }
+    highlight() {
+        this.apply(wrapSelection(this.currentState(), '==', '=='));
+    }
+    heading1() {
+        this.apply(toggleLinePrefix(this.currentState(), '# '));
+    }
+    heading2() {
+        this.apply(toggleLinePrefix(this.currentState(), '## '));
+    }
+    /** Bullet list: toggle the '- ' marker on each selected line */
+    bulletList() {
+        this.apply(toggleLinePrefix(this.currentState(), '- '));
+    }
+    link() {
+        this.apply(insertLink(this.currentState()));
+    }
+    onAttachClick(event) {
+        this.attachClick.emit(event);
+    }
+    togglePreview() {
+        this.previewToggle.emit();
+    }
+    currentState() {
+        const el = this.textarea;
+        return {
+            text: el?.value ?? '',
+            selectionStart: el?.selectionStart ?? 0,
+            selectionEnd: el?.selectionEnd ?? 0,
+        };
+    }
+    apply(next) {
+        if (!this.textarea) {
+            return;
+        }
+        // Update the textarea value first, then the host's control value (synchronous),
+        // then restore the caret, as updating the control may re-write the textarea value.
+        this.textarea.value = next.text;
+        this.textChange.emit(next.text);
+        this.textarea.focus();
+        this.textarea.setSelectionRange(next.selectionStart, next.selectionEnd);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MarkdownToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MarkdownToolbarComponent, isStandalone: false, selector: "app-markdown-toolbar", inputs: { textarea: "textarea", disabled: "disabled", editDisabled: "editDisabled", canAttach: "canAttach", preview: "preview" }, outputs: { textChange: "textChange", attachClick: "attachClick", previewToggle: "previewToggle" }, ngImport: i0, template: "<ion-toolbar role=\"toolbar\">\n  <ion-buttons slot=\"start\">\n    <!-- Bold -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"bold()\"\n      [title]=\"'MARKDOWN.TOOLBAR.BOLD' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_bold</mat-icon>\n    </ion-button>\n\n    <!-- Underline (<u>text</u>) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"underline()\"\n      [title]=\"'MARKDOWN.TOOLBAR.UNDERLINE' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_underlined</mat-icon>\n    </ion-button>\n\n    <!-- Strikethrough (~~text~~) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"strikethrough()\"\n      [title]=\"'MARKDOWN.TOOLBAR.STRIKETHROUGH' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_strikethrough</mat-icon>\n    </ion-button>\n\n    <!-- Highlight (==text==) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"highlight()\"\n      [title]=\"'MARKDOWN.TOOLBAR.HIGHLIGHT' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_color_text</mat-icon>\n    </ion-button>\n\n    <!-- Heading 1 -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"heading1()\"\n      [title]=\"'MARKDOWN.TOOLBAR.HEADING1' | translate\"\n      tabindex=\"-1\"\n    >\n      H1\n    </ion-button>\n\n    <!-- Heading 2 -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"heading2()\"\n      [title]=\"'MARKDOWN.TOOLBAR.HEADING2' | translate\"\n      tabindex=\"-1\"\n    >\n      H2\n    </ion-button>\n\n    <!-- Bullet list (- item) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"bulletList()\"\n      [title]=\"'MARKDOWN.TOOLBAR.BULLET_LIST' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_list_bulleted</mat-icon>\n    </ion-button>\n\n    <!-- Link -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"link()\"\n      [title]=\"'MARKDOWN.TOOLBAR.LINK' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">link</mat-icon>\n    </ion-button>\n\n    <!-- Attachment (paper clip) -->\n    @if (canAttach) {\n      <ion-button\n        data-testid=\"attach-button\"\n        [disabled]=\"disabled || editDisabled\"\n        (click)=\"onAttachClick($event)\"\n        [title]=\"'MARKDOWN.TOOLBAR.ATTACHMENT' | translate\"\n        tabindex=\"-1\"\n      >\n        <mat-icon slot=\"icon-only\">attach_file</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n\n  <ion-buttons slot=\"end\">\n    <!-- Preview toggle -->\n    <ion-button\n      data-testid=\"preview-button\"\n      [disabled]=\"disabled\"\n      [color]=\"preview ? 'primary' : undefined\"\n      [class.active]=\"preview\"\n      (click)=\"togglePreview()\"\n      [title]=\"'MARKDOWN.TOOLBAR.PREVIEW' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">{{ preview ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</ion-toolbar>\n", styles: [":host{display:block}ion-toolbar{--min-height: 40px;--background: transparent}\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.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MarkdownToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-markdown-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-toolbar role=\"toolbar\">\n  <ion-buttons slot=\"start\">\n    <!-- Bold -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"bold()\"\n      [title]=\"'MARKDOWN.TOOLBAR.BOLD' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_bold</mat-icon>\n    </ion-button>\n\n    <!-- Underline (<u>text</u>) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"underline()\"\n      [title]=\"'MARKDOWN.TOOLBAR.UNDERLINE' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_underlined</mat-icon>\n    </ion-button>\n\n    <!-- Strikethrough (~~text~~) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"strikethrough()\"\n      [title]=\"'MARKDOWN.TOOLBAR.STRIKETHROUGH' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_strikethrough</mat-icon>\n    </ion-button>\n\n    <!-- Highlight (==text==) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"highlight()\"\n      [title]=\"'MARKDOWN.TOOLBAR.HIGHLIGHT' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_color_text</mat-icon>\n    </ion-button>\n\n    <!-- Heading 1 -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"heading1()\"\n      [title]=\"'MARKDOWN.TOOLBAR.HEADING1' | translate\"\n      tabindex=\"-1\"\n    >\n      H1\n    </ion-button>\n\n    <!-- Heading 2 -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"heading2()\"\n      [title]=\"'MARKDOWN.TOOLBAR.HEADING2' | translate\"\n      tabindex=\"-1\"\n    >\n      H2\n    </ion-button>\n\n    <!-- Bullet list (- item) -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"bulletList()\"\n      [title]=\"'MARKDOWN.TOOLBAR.BULLET_LIST' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">format_list_bulleted</mat-icon>\n    </ion-button>\n\n    <!-- Link -->\n    <ion-button\n      [disabled]=\"disabled || editDisabled\"\n      (click)=\"link()\"\n      [title]=\"'MARKDOWN.TOOLBAR.LINK' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">link</mat-icon>\n    </ion-button>\n\n    <!-- Attachment (paper clip) -->\n    @if (canAttach) {\n      <ion-button\n        data-testid=\"attach-button\"\n        [disabled]=\"disabled || editDisabled\"\n        (click)=\"onAttachClick($event)\"\n        [title]=\"'MARKDOWN.TOOLBAR.ATTACHMENT' | translate\"\n        tabindex=\"-1\"\n      >\n        <mat-icon slot=\"icon-only\">attach_file</mat-icon>\n      </ion-button>\n    }\n  </ion-buttons>\n\n  <ion-buttons slot=\"end\">\n    <!-- Preview toggle -->\n    <ion-button\n      data-testid=\"preview-button\"\n      [disabled]=\"disabled\"\n      [color]=\"preview ? 'primary' : undefined\"\n      [class.active]=\"preview\"\n      (click)=\"togglePreview()\"\n      [title]=\"'MARKDOWN.TOOLBAR.PREVIEW' | translate\"\n      tabindex=\"-1\"\n    >\n      <mat-icon slot=\"icon-only\">{{ preview ? 'visibility_off' : 'visibility' }}</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</ion-toolbar>\n", styles: [":host{display:block}ion-toolbar{--min-height: 40px;--background: transparent}\n"] }]
+        }], propDecorators: { textarea: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], editDisabled: [{
+                type: Input
+            }], canAttach: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], textChange: [{
+                type: Output
+            }], attachClick: [{
+                type: Output
+            }], previewToggle: [{
+                type: Output
+            }] } });
+
 // function that returns `MarkedOptions` with renderer override
 class SharedMarkdownModule {
     static forRoot() {
@@ -34695,6 +35238,12 @@ class SharedMarkdownModule {
                         provide: SANITIZE,
                         useValue: SecurityContext.NONE,
                     },
+                    // Composition extensions (e.g. ==highlight==), used by the markdown toolbar
+                    markedExtensions: compositionMarkdownExtensions.map((extension) => ({
+                        provide: MARKED_EXTENSIONS,
+                        useValue: extension,
+                        multi: true,
+                    })),
                     markedOptions: {
                         provide: MARKED_OPTIONS,
                         deps: [MarkdownService],
@@ -34719,15 +35268,18 @@ class SharedMarkdownModule {
             // Component
             AppMarkdownContent,
             AppMarkdownModal,
+            MarkdownToolbarComponent,
             // Directive
             MarkdownDirective], imports: [CommonModule,
             SharedIonicModule,
-            TranslatePipe, i4$3.MarkdownModule, 
+            TranslatePipe,
+            SharedMaterialModule, i4$3.MarkdownModule, 
             // App module
             SharedToolbarModule,
-            SharedDebugModule], exports: [MarkdownModule, AppMarkdownContent, MarkdownDirective] });
+            SharedDebugModule], exports: [MarkdownModule, AppMarkdownContent, MarkdownDirective, MarkdownToolbarComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SharedMarkdownModule, providers: [provideChildTranslateService()], imports: [CommonModule,
             SharedIonicModule,
+            SharedMaterialModule,
             MarkdownModule.forChild(),
             // App module
             SharedToolbarModule,
@@ -34740,6 +35292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         CommonModule,
                         SharedIonicModule,
                         TranslatePipe,
+                        SharedMaterialModule,
                         MarkdownModule.forChild(),
                         // App module
                         SharedToolbarModule,
@@ -34749,10 +35302,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         // Component
                         AppMarkdownContent,
                         AppMarkdownModal,
+                        MarkdownToolbarComponent,
                         // Directive
                         MarkdownDirective,
                     ],
-                    exports: [MarkdownModule, AppMarkdownContent, MarkdownDirective],
+                    exports: [MarkdownModule, AppMarkdownContent, MarkdownDirective, MarkdownToolbarComponent],
                     providers: [provideChildTranslateService()],
                 }]
         }] });
@@ -39498,6 +40052,7 @@ class MessageForm extends AppForm {
     /**
      * Allow the user to attach files to the message.
      * When enabled, {@link uploadFn} and {@link deleteFn} should also be provided (see `UploadFileComponent`).
+     * Also used by the markdown toolbar to show its attachment (paper clip) button.
      */
     canAttach = false;
     /** Upload callback, called for each added file (usually a call to the REST endpoint `POST api/upload`) */
@@ -39506,7 +40061,18 @@ class MessageForm extends AppForm {
     deleteFn;
     /** Max size of an attached file, in megabytes (default: 20 Mo) */
     maxAttachmentSizeMb = 20;
+    /**
+     * Layout of the body preview: side by side with the body text (2 columns), or replacing the text (e.g. on small screens).
+     * The edition toolbar buttons are disabled when the preview replaces the text.
+     */
+    bodyPreviewSideBySide = false;
     searchRecipients = new EventEmitter();
+    /** Emits when the attachment button is clicked (after opening the file browser) */
+    attach = new EventEmitter();
+    /** Emits when the body preview is toggled (e.g. to let the parent modal grow, if side by side) */
+    bodyPreviewChange = new EventEmitter();
+    /** Whether the markdown preview of the body is displayed. */
+    bodyPreview = false;
     attachmentsUpload;
     types = MessageTypeList;
     /** Existing attachments of the message (already stored by the pod, e.g. when editing a feed item) */
@@ -39561,6 +40127,18 @@ class MessageForm extends AppForm {
     isSamePerson(o1, o2) {
         return EntityUtils.equals(o1, o2, 'id');
     }
+    /**
+     * New body value, emitted by the markdown toolbar after an insertion at the caret.
+     * The textarea value (and its caret) has already been updated by the toolbar.
+     */
+    onBodyTextChange(value) {
+        this.form.controls.body.setValue(value);
+    }
+    toggleBodyPreview() {
+        this.bodyPreview = !this.bodyPreview;
+        this.bodyPreviewChange.emit(this.bodyPreview);
+        this.cd.markForCheck();
+    }
     setValue(data, opts) {
         this.existingAttachments = (data?.attachments || []).filter((a) => isNotNil(a?.id));
         this.uploadedAttachments = [];
@@ -39582,9 +40160,13 @@ class MessageForm extends AppForm {
     /**
      * Open the file browser, to add an attachment
      */
+    /**
+     * Open the file browser (called by the markdown toolbar attachment button), then emit {@link attach}
+     */
     addAttachment(event) {
         event?.preventDefault();
         this.attachmentsUpload?.browse();
+        this.attach.emit(event);
     }
     /**
      * Highlight the form when a file is dragged over it
@@ -39702,11 +40284,11 @@ class MessageForm extends AppForm {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageForm, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MessageForm, isStandalone: false, selector: "app-message-form", inputs: { mobile: "mobile", suggestFn: "suggestFn", subjectMinLength: "subjectMinLength", subjectMaxLength: "subjectMaxLength", bodyMaxLength: "bodyMaxLength", bodyAutoHeight: "bodyAutoHeight", canSelectType: "canSelectType", canRecipientFilter: "canRecipientFilter", recipientFilterCount: "recipientFilterCount", canSearchRecipients: "canSearchRecipients", canAttach: ["canAttach", "canAttach", toBoolean], uploadFn: "uploadFn", deleteFn: "deleteFn", maxAttachmentSizeMb: "maxAttachmentSizeMb" }, outputs: { searchRecipients: "searchRecipients" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.file-over": "this.fileOver" } }, viewQueries: [{ propertyName: "attachmentsUpload", first: true, predicate: ["attachmentsUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- debug -->\n@if (debug) {\n  <ng-container *ngTemplateOutlet=\"debugPanel\"></ng-container>\n}\n\n<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  @if (canSelectType) {\n    <mat-form-field>\n      <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n      <mat-select formControlName=\"type\">\n        @for (item of types; track item.id) {\n          @if (canRecipientFilter || item.id !== 'FEED') {\n            <mat-option [value]=\"item.id\">\n              <ion-icon [name]=\"item.icon\"></ion-icon>\n              {{ item.label | translate }}\n            </mat-option>\n          }\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      class=\"ion-flex-auto\"\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n      [style.flex-grow]=\"'1'\"\n    >\n      <!-- Fix #2090 (Lot 7): search button inside the field frame (as suffix), using the 'list' icon\n           (ellipsis-horizontal is not the expected icon, see GitLab #2090) -->\n      @if (canSearchRecipients) {\n        <button\n          matSuffix\n          mat-icon-button\n          type=\"button\"\n          tabindex=\"-1\"\n          (click)=\"searchRecipients.emit($event)\"\n          [title]=\"'COMMON.BTN_SEARCH' | translate\"\n        >\n          <mat-icon>list</mat-icon>\n        </button>\n      }\n    </mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    @if (form.controls.subject.hasError('required')) {\n      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n    }\n    @if (form.controls.subject.hasError('minlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (form.controls.subject.hasError('maxlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (subjectMaxLength) {\n      <mat-hint align=\"end\">\n        {{\n          'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n        }}\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <!-- Body -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      formControlName=\"body\"\n      [class.fixed-height]=\"!bodyAutoHeight\"\n      [cdkTextareaAutosize]=\"bodyAutoHeight\"\n      (keydown.control.enter)=\"doSubmit($event)\"\n    ></textarea>\n    @if (form.controls.body.hasError('maxlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n      </mat-error>\n    }\n    @if (bodyMaxLength) {\n      <mat-hint align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength } }}\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <!-- Attachments -->\n  @if (canAttach) {\n    <div class=\"message-attachments\">\n      <ion-button\n        class=\"add-attachment-button\"\n        fill=\"clear\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (click)=\"addAttachment($event)\"\n      >\n        <mat-icon slot=\"start\">attach_file</mat-icon>\n        <ion-label>{{ 'SOCIAL.MESSAGE.ATTACHMENTS.BTN_ADD' | translate }}</ion-label>\n      </ion-button>\n\n      <!-- existing attachments (already stored by the pod) -->\n      @if (existingAttachments | isNotEmptyArray) {\n        <ion-list class=\"existing-attachments\" lines=\"none\">\n          @for (attachment of existingAttachments; track attachment.id) {\n            <ion-item class=\"existing-attachment\">\n              <mat-icon slot=\"start\">{{ attachment | map: getAttachmentIcon }}</mat-icon>\n              <ion-label>\n                <h4>{{ attachment | map: getAttachmentName }}</h4>\n                @if (attachment.size) {\n                  <p>{{ attachment.size | fileSize }}</p>\n                }\n              </ion-label>\n              <button\n                mat-icon-button\n                slot=\"end\"\n                class=\"remove-attachment\"\n                [disabled]=\"disabled\"\n                [title]=\"'SOCIAL.MESSAGE.ATTACHMENTS.BTN_REMOVE' | translate\"\n                (click)=\"removeExistingAttachment($event, attachment)\"\n              >\n                <mat-icon>clear</mat-icon>\n              </button>\n            </ion-item>\n          }\n        </ion-list>\n      }\n\n      <!-- files list only (no drop area: files are added by the button above, or dropped anywhere in the form) -->\n      <app-upload-file\n        #attachmentsUpload\n        [showDropArea]=\"false\"\n        [instantUpload]=\"true\"\n        [uploadFn]=\"uploadFn\"\n        [deleteFn]=\"deleteFn\"\n        [maxFileSizeMb]=\"maxAttachmentSizeMb\"\n        (filesChange)=\"onAttachmentsChange($event)\"\n      ></app-upload-file>\n      @if (form.controls.attachments.getError('uploading')) {\n        <ion-note color=\"danger\">\n          {{ 'SOCIAL.MESSAGE.ATTACHMENTS.UPLOADING_ERROR' | translate }}\n        </ion-note>\n      }\n    </div>\n  }\n</form>\n\n<ng-template #debugPanel>\n  <app-debug title=\"Message form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          ready: {{ readySubject | async }}\n          <br />\n          loading: {{ loadingSubject | async }}\n          <br />\n          enabled: {{ enabled }}\n          <br />\n          dirty: {{ dirty }}\n          <br />\n          valid: {{ valid }}\n          <br />\n          <br />\n          error: {{ _form | formError | json }}\n          <br />\n          recipients: {{ _form | formGetValue: 'recipients' | personToString }}\n          <br />\n          recipientFilter: {{ _form | formGetValue: 'recipientFilter' | json }}\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n</ng-template>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}.message-attachments{margin-top:8px}:host.file-over{display:block;outline:2px dashed var(--ion-color-accent);outline-offset:4px}\n"], dependencies: [{ kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.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.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { 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.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.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: "directive", type: i1$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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: 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: AutoResizeDirective, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMaxRows", "cdkAutosizeMinRows"] }, { kind: "component", type: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "fileExtensionsExcluded", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload", "maxFileSizeMb", "autoHideDropArea", "showDropArea", "showThumbnails"], outputs: ["filesChange"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.JsonPipe, name: "json" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MapPipe, name: "map" }, { kind: "pipe", type: PersonToStringPipe, name: "personToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MessageForm, isStandalone: false, selector: "app-message-form", inputs: { mobile: "mobile", suggestFn: "suggestFn", subjectMinLength: "subjectMinLength", subjectMaxLength: "subjectMaxLength", bodyMaxLength: "bodyMaxLength", bodyAutoHeight: "bodyAutoHeight", canSelectType: "canSelectType", canRecipientFilter: "canRecipientFilter", recipientFilterCount: "recipientFilterCount", canSearchRecipients: "canSearchRecipients", canAttach: ["canAttach", "canAttach", toBoolean], uploadFn: "uploadFn", deleteFn: "deleteFn", maxAttachmentSizeMb: "maxAttachmentSizeMb", bodyPreviewSideBySide: ["bodyPreviewSideBySide", "bodyPreviewSideBySide", toBoolean] }, outputs: { searchRecipients: "searchRecipients", attach: "attach", bodyPreviewChange: "bodyPreviewChange" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.file-over": "this.fileOver" } }, viewQueries: [{ propertyName: "attachmentsUpload", first: true, predicate: ["attachmentsUpload"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- debug -->\n@if (debug) {\n  <ng-container *ngTemplateOutlet=\"debugPanel\"></ng-container>\n}\n\n<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  @if (canSelectType) {\n    <mat-form-field>\n      <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n      <mat-select formControlName=\"type\">\n        @for (item of types; track item.id) {\n          @if (canRecipientFilter || item.id !== 'FEED') {\n            <mat-option [value]=\"item.id\">\n              <ion-icon [name]=\"item.icon\"></ion-icon>\n              {{ item.label | translate }}\n            </mat-option>\n          }\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      class=\"ion-flex-auto\"\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n      [style.flex-grow]=\"'1'\"\n    >\n      <!-- Fix #2090 (Lot 7): search button inside the field frame (as suffix), using the 'list' icon\n           (ellipsis-horizontal is not the expected icon, see GitLab #2090) -->\n      @if (canSearchRecipients) {\n        <button\n          matSuffix\n          mat-icon-button\n          type=\"button\"\n          tabindex=\"-1\"\n          (click)=\"searchRecipients.emit($event)\"\n          [title]=\"'COMMON.BTN_SEARCH' | translate\"\n        >\n          <mat-icon>list</mat-icon>\n        </button>\n      }\n    </mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    @if (form.controls.subject.hasError('required')) {\n      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n    }\n    @if (form.controls.subject.hasError('minlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (form.controls.subject.hasError('maxlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (subjectMaxLength) {\n      <mat-hint align=\"end\">\n        {{\n          'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n        }}\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <!-- Body -->\n  <!-- Markdown composition toolbar (bold, highlight, headings, link, attachment) -->\n  <app-markdown-toolbar\n    [textarea]=\"bodyTextarea\"\n    [canAttach]=\"canAttach\"\n    [disabled]=\"disabled\"\n    (attachClick)=\"addAttachment($event)\"\n    (textChange)=\"onBodyTextChange($event)\"\n    [preview]=\"bodyPreview\"\n    [editDisabled]=\"bodyPreview && !bodyPreviewSideBySide\"\n    (previewToggle)=\"toggleBodyPreview()\"\n  ></app-markdown-toolbar>\n  <!-- Body text and preview: side by side (2 columns), or the preview replaces the text -->\n  <ion-row class=\"ion-no-padding\">\n    <ion-col\n      class=\"ion-no-padding\"\n      [size]=\"bodyPreview && bodyPreviewSideBySide ? 6 : 12\"\n      [hidden]=\"bodyPreview && !bodyPreviewSideBySide\"\n    >\n      <mat-form-field>\n        <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n        <textarea\n          #bodyTextarea\n          matInput\n          type=\"text\"\n          formControlName=\"body\"\n          [class.fixed-height]=\"!bodyAutoHeight\"\n          [cdkTextareaAutosize]=\"bodyAutoHeight\"\n          (keydown.control.enter)=\"doSubmit($event)\"\n        ></textarea>\n        @if (form.controls.body.hasError('maxlength')) {\n          <mat-error>\n            {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n          </mat-error>\n        }\n        @if (bodyMaxLength) {\n          <mat-hint align=\"end\">\n            {{\n              'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength }\n            }}\n          </mat-hint>\n        }\n      </mat-form-field>\n    </ion-col>\n\n    <!-- Body preview (markdown rendering, toggled by the toolbar) -->\n    @if (bodyPreview) {\n      <ion-col\n        class=\"ion-no-padding\"\n        [size]=\"bodyPreviewSideBySide ? 6 : 12\"\n        [class.ion-padding-start]=\"bodyPreviewSideBySide\"\n      >\n        <div class=\"body-preview\" data-testid=\"body-preview\">\n          <markdown [data]=\"form.controls.body.value || ''\" emoji></markdown>\n        </div>\n      </ion-col>\n    }\n  </ion-row>\n\n  <!-- Attachments -->\n  @if (canAttach) {\n    <div class=\"message-attachments\">\n      <!-- existing attachments (already stored by the pod) -->\n      @if (existingAttachments | isNotEmptyArray) {\n        <ion-list class=\"existing-attachments\" lines=\"none\">\n          @for (attachment of existingAttachments; track attachment.id) {\n            <ion-item class=\"existing-attachment\">\n              <mat-icon slot=\"start\">{{ attachment | map: getAttachmentIcon }}</mat-icon>\n              <ion-label>\n                <h4>{{ attachment | map: getAttachmentName }}</h4>\n                @if (attachment.size) {\n                  <p>{{ attachment.size | fileSize }}</p>\n                }\n              </ion-label>\n              <button\n                mat-icon-button\n                slot=\"end\"\n                class=\"remove-attachment\"\n                [disabled]=\"disabled\"\n                [title]=\"'SOCIAL.MESSAGE.ATTACHMENTS.BTN_REMOVE' | translate\"\n                (click)=\"removeExistingAttachment($event, attachment)\"\n              >\n                <mat-icon>clear</mat-icon>\n              </button>\n            </ion-item>\n          }\n        </ion-list>\n      }\n\n      <!-- files list only (no drop area: files are added by the toolbar attachment button, or dropped anywhere in the form) -->\n      <app-upload-file\n        #attachmentsUpload\n        [showDropArea]=\"false\"\n        [instantUpload]=\"true\"\n        [uploadFn]=\"uploadFn\"\n        [deleteFn]=\"deleteFn\"\n        [maxFileSizeMb]=\"maxAttachmentSizeMb\"\n        (filesChange)=\"onAttachmentsChange($event)\"\n      ></app-upload-file>\n      @if (form.controls.attachments.getError('uploading')) {\n        <ion-note color=\"danger\">\n          {{ 'SOCIAL.MESSAGE.ATTACHMENTS.UPLOADING_ERROR' | translate }}\n        </ion-note>\n      }\n    </div>\n  }\n</form>\n\n<ng-template #debugPanel>\n  <app-debug title=\"Message form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          ready: {{ readySubject | async }}\n          <br />\n          loading: {{ loadingSubject | async }}\n          <br />\n          enabled: {{ enabled }}\n          <br />\n          dirty: {{ dirty }}\n          <br />\n          valid: {{ valid }}\n          <br />\n          <br />\n          error: {{ _form | formError | json }}\n          <br />\n          recipients: {{ _form | formGetValue: 'recipients' | personToString }}\n          <br />\n          recipientFilter: {{ _form | formGetValue: 'recipientFilter' | json }}\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n</ng-template>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}app-markdown-toolbar{display:block;margin-bottom:4px}.body-preview{box-sizing:border-box;height:calc(100% - 22px);min-height:calc(11.5em + 32px);padding:0 1em;overflow:auto;border:1px dashed var(--ion-item-border-color, #c8cdd4);border-radius:4px}.body-preview>markdown{display:block}.message-attachments{margin-top:8px;--app-upload-file-list-max-height: none}:host.file-over{display:block;outline:2px dashed var(--ion-color-accent);outline-offset:4px}\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.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.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { 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.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: i4$3.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { 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.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: "directive", type: i1$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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: 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: AutoResizeDirective, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMaxRows", "cdkAutosizeMinRows"] }, { kind: "component", type: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "fileExtensionsExcluded", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload", "maxFileSizeMb", "autoHideDropArea", "showDropArea", "showThumbnails"], outputs: ["filesChange"] }, { kind: "component", type: i11$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: MarkdownDirective, selector: "markdown,[markdown]" }, { kind: "component", type: MarkdownToolbarComponent, selector: "app-markdown-toolbar", inputs: ["textarea", "disabled", "editDisabled", "canAttach", "preview"], outputs: ["textChange", "attachClick", "previewToggle"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.JsonPipe, name: "json" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MapPipe, name: "map" }, { kind: "pipe", type: PersonToStringPipe, name: "personToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageForm, decorators: [{
             type: Component,
-            args: [{ selector: 'app-message-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- debug -->\n@if (debug) {\n  <ng-container *ngTemplateOutlet=\"debugPanel\"></ng-container>\n}\n\n<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  @if (canSelectType) {\n    <mat-form-field>\n      <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n      <mat-select formControlName=\"type\">\n        @for (item of types; track item.id) {\n          @if (canRecipientFilter || item.id !== 'FEED') {\n            <mat-option [value]=\"item.id\">\n              <ion-icon [name]=\"item.icon\"></ion-icon>\n              {{ item.label | translate }}\n            </mat-option>\n          }\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      class=\"ion-flex-auto\"\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n      [style.flex-grow]=\"'1'\"\n    >\n      <!-- Fix #2090 (Lot 7): search button inside the field frame (as suffix), using the 'list' icon\n           (ellipsis-horizontal is not the expected icon, see GitLab #2090) -->\n      @if (canSearchRecipients) {\n        <button\n          matSuffix\n          mat-icon-button\n          type=\"button\"\n          tabindex=\"-1\"\n          (click)=\"searchRecipients.emit($event)\"\n          [title]=\"'COMMON.BTN_SEARCH' | translate\"\n        >\n          <mat-icon>list</mat-icon>\n        </button>\n      }\n    </mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    @if (form.controls.subject.hasError('required')) {\n      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n    }\n    @if (form.controls.subject.hasError('minlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (form.controls.subject.hasError('maxlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (subjectMaxLength) {\n      <mat-hint align=\"end\">\n        {{\n          'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n        }}\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <!-- Body -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n    <textarea\n      matInput\n      type=\"text\"\n      formControlName=\"body\"\n      [class.fixed-height]=\"!bodyAutoHeight\"\n      [cdkTextareaAutosize]=\"bodyAutoHeight\"\n      (keydown.control.enter)=\"doSubmit($event)\"\n    ></textarea>\n    @if (form.controls.body.hasError('maxlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n      </mat-error>\n    }\n    @if (bodyMaxLength) {\n      <mat-hint align=\"end\">\n        {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength } }}\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <!-- Attachments -->\n  @if (canAttach) {\n    <div class=\"message-attachments\">\n      <ion-button\n        class=\"add-attachment-button\"\n        fill=\"clear\"\n        size=\"small\"\n        [disabled]=\"disabled\"\n        (click)=\"addAttachment($event)\"\n      >\n        <mat-icon slot=\"start\">attach_file</mat-icon>\n        <ion-label>{{ 'SOCIAL.MESSAGE.ATTACHMENTS.BTN_ADD' | translate }}</ion-label>\n      </ion-button>\n\n      <!-- existing attachments (already stored by the pod) -->\n      @if (existingAttachments | isNotEmptyArray) {\n        <ion-list class=\"existing-attachments\" lines=\"none\">\n          @for (attachment of existingAttachments; track attachment.id) {\n            <ion-item class=\"existing-attachment\">\n              <mat-icon slot=\"start\">{{ attachment | map: getAttachmentIcon }}</mat-icon>\n              <ion-label>\n                <h4>{{ attachment | map: getAttachmentName }}</h4>\n                @if (attachment.size) {\n                  <p>{{ attachment.size | fileSize }}</p>\n                }\n              </ion-label>\n              <button\n                mat-icon-button\n                slot=\"end\"\n                class=\"remove-attachment\"\n                [disabled]=\"disabled\"\n                [title]=\"'SOCIAL.MESSAGE.ATTACHMENTS.BTN_REMOVE' | translate\"\n                (click)=\"removeExistingAttachment($event, attachment)\"\n              >\n                <mat-icon>clear</mat-icon>\n              </button>\n            </ion-item>\n          }\n        </ion-list>\n      }\n\n      <!-- files list only (no drop area: files are added by the button above, or dropped anywhere in the form) -->\n      <app-upload-file\n        #attachmentsUpload\n        [showDropArea]=\"false\"\n        [instantUpload]=\"true\"\n        [uploadFn]=\"uploadFn\"\n        [deleteFn]=\"deleteFn\"\n        [maxFileSizeMb]=\"maxAttachmentSizeMb\"\n        (filesChange)=\"onAttachmentsChange($event)\"\n      ></app-upload-file>\n      @if (form.controls.attachments.getError('uploading')) {\n        <ion-note color=\"danger\">\n          {{ 'SOCIAL.MESSAGE.ATTACHMENTS.UPLOADING_ERROR' | translate }}\n        </ion-note>\n      }\n    </div>\n  }\n</form>\n\n<ng-template #debugPanel>\n  <app-debug title=\"Message form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          ready: {{ readySubject | async }}\n          <br />\n          loading: {{ loadingSubject | async }}\n          <br />\n          enabled: {{ enabled }}\n          <br />\n          dirty: {{ dirty }}\n          <br />\n          valid: {{ valid }}\n          <br />\n          <br />\n          error: {{ _form | formError | json }}\n          <br />\n          recipients: {{ _form | formGetValue: 'recipients' | personToString }}\n          <br />\n          recipientFilter: {{ _form | formGetValue: 'recipientFilter' | json }}\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n</ng-template>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}.message-attachments{margin-top:8px}:host.file-over{display:block;outline:2px dashed var(--ion-color-accent);outline-offset:4px}\n"] }]
+            args: [{ selector: 'app-message-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- debug -->\n@if (debug) {\n  <ng-container *ngTemplateOutlet=\"debugPanel\"></ng-container>\n}\n\n<form [formGroup]=\"form\" class=\"form-container\">\n  <!-- type -->\n  @if (canSelectType) {\n    <mat-form-field>\n      <mat-label>{{ 'SOCIAL.MESSAGE.TYPE' | translate }}</mat-label>\n      <mat-select formControlName=\"type\">\n        @for (item of types; track item.id) {\n          @if (canRecipientFilter || item.id !== 'FEED') {\n            <mat-option [value]=\"item.id\">\n              <ion-icon [name]=\"item.icon\"></ion-icon>\n              {{ item.label | translate }}\n            </mat-option>\n          }\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n\n  <!-- Recipients -->\n  @if ((form | formGetValue: 'type') !== 'FEED') {\n    <mat-chips-field\n      class=\"ion-flex-auto\"\n      formControlName=\"recipients\"\n      chipColor=\"accent\"\n      [placeholder]=\"'SOCIAL.MESSAGE.RECIPIENTS' | translate\"\n      [config]=\"autocompleteFields.recipients\"\n      [equals]=\"isSamePerson\"\n      [style.flex-grow]=\"'1'\"\n    >\n      <!-- Fix #2090 (Lot 7): search button inside the field frame (as suffix), using the 'list' icon\n           (ellipsis-horizontal is not the expected icon, see GitLab #2090) -->\n      @if (canSearchRecipients) {\n        <button\n          matSuffix\n          mat-icon-button\n          type=\"button\"\n          tabindex=\"-1\"\n          (click)=\"searchRecipients.emit($event)\"\n          [title]=\"'COMMON.BTN_SEARCH' | translate\"\n        >\n          <mat-icon>list</mat-icon>\n        </button>\n      }\n    </mat-chips-field>\n  } @else {\n    <mat-form-field>\n      <input matInput hidden formControlName=\"recipients\" type=\"text\" />\n      <mat-chip-grid>\n        <mat-chip-row>\n          {{ 'SOCIAL.MESSAGE.RECIPIENT_FILTER_COUNT' | translate: { count: recipientFilterCount } }}\n        </mat-chip-row>\n      </mat-chip-grid>\n    </mat-form-field>\n  }\n\n  <!-- Subject -->\n  <mat-form-field>\n    <mat-label>{{ 'SOCIAL.MESSAGE.SUBJECT' | translate }}</mat-label>\n    <input matInput type=\"text\" formControlName=\"subject\" autocomplete=\"off\" required />\n    @if (form.controls.subject.hasError('required')) {\n      <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n    }\n    @if (form.controls.subject.hasError('minlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (form.controls.subject.hasError('maxlength')) {\n      <mat-error>\n        {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT' | translate }}\n      </mat-error>\n    }\n    @if (subjectMaxLength) {\n      <mat-hint align=\"end\">\n        {{\n          'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength }\n        }}\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <!-- Body -->\n  <!-- Markdown composition toolbar (bold, highlight, headings, link, attachment) -->\n  <app-markdown-toolbar\n    [textarea]=\"bodyTextarea\"\n    [canAttach]=\"canAttach\"\n    [disabled]=\"disabled\"\n    (attachClick)=\"addAttachment($event)\"\n    (textChange)=\"onBodyTextChange($event)\"\n    [preview]=\"bodyPreview\"\n    [editDisabled]=\"bodyPreview && !bodyPreviewSideBySide\"\n    (previewToggle)=\"toggleBodyPreview()\"\n  ></app-markdown-toolbar>\n  <!-- Body text and preview: side by side (2 columns), or the preview replaces the text -->\n  <ion-row class=\"ion-no-padding\">\n    <ion-col\n      class=\"ion-no-padding\"\n      [size]=\"bodyPreview && bodyPreviewSideBySide ? 6 : 12\"\n      [hidden]=\"bodyPreview && !bodyPreviewSideBySide\"\n    >\n      <mat-form-field>\n        <mat-label>{{ 'SOCIAL.MESSAGE.BODY_HELP' | translate }}</mat-label>\n        <textarea\n          #bodyTextarea\n          matInput\n          type=\"text\"\n          formControlName=\"body\"\n          [class.fixed-height]=\"!bodyAutoHeight\"\n          [cdkTextareaAutosize]=\"bodyAutoHeight\"\n          (keydown.control.enter)=\"doSubmit($event)\"\n        ></textarea>\n        @if (form.controls.body.hasError('maxlength')) {\n          <mat-error>\n            {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}\n          </mat-error>\n        }\n        @if (bodyMaxLength) {\n          <mat-hint align=\"end\">\n            {{\n              'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength }\n            }}\n          </mat-hint>\n        }\n      </mat-form-field>\n    </ion-col>\n\n    <!-- Body preview (markdown rendering, toggled by the toolbar) -->\n    @if (bodyPreview) {\n      <ion-col\n        class=\"ion-no-padding\"\n        [size]=\"bodyPreviewSideBySide ? 6 : 12\"\n        [class.ion-padding-start]=\"bodyPreviewSideBySide\"\n      >\n        <div class=\"body-preview\" data-testid=\"body-preview\">\n          <markdown [data]=\"form.controls.body.value || ''\" emoji></markdown>\n        </div>\n      </ion-col>\n    }\n  </ion-row>\n\n  <!-- Attachments -->\n  @if (canAttach) {\n    <div class=\"message-attachments\">\n      <!-- existing attachments (already stored by the pod) -->\n      @if (existingAttachments | isNotEmptyArray) {\n        <ion-list class=\"existing-attachments\" lines=\"none\">\n          @for (attachment of existingAttachments; track attachment.id) {\n            <ion-item class=\"existing-attachment\">\n              <mat-icon slot=\"start\">{{ attachment | map: getAttachmentIcon }}</mat-icon>\n              <ion-label>\n                <h4>{{ attachment | map: getAttachmentName }}</h4>\n                @if (attachment.size) {\n                  <p>{{ attachment.size | fileSize }}</p>\n                }\n              </ion-label>\n              <button\n                mat-icon-button\n                slot=\"end\"\n                class=\"remove-attachment\"\n                [disabled]=\"disabled\"\n                [title]=\"'SOCIAL.MESSAGE.ATTACHMENTS.BTN_REMOVE' | translate\"\n                (click)=\"removeExistingAttachment($event, attachment)\"\n              >\n                <mat-icon>clear</mat-icon>\n              </button>\n            </ion-item>\n          }\n        </ion-list>\n      }\n\n      <!-- files list only (no drop area: files are added by the toolbar attachment button, or dropped anywhere in the form) -->\n      <app-upload-file\n        #attachmentsUpload\n        [showDropArea]=\"false\"\n        [instantUpload]=\"true\"\n        [uploadFn]=\"uploadFn\"\n        [deleteFn]=\"deleteFn\"\n        [maxFileSizeMb]=\"maxAttachmentSizeMb\"\n        (filesChange)=\"onAttachmentsChange($event)\"\n      ></app-upload-file>\n      @if (form.controls.attachments.getError('uploading')) {\n        <ion-note color=\"danger\">\n          {{ 'SOCIAL.MESSAGE.ATTACHMENTS.UPLOADING_ERROR' | translate }}\n        </ion-note>\n      }\n    </div>\n  }\n</form>\n\n<ng-template #debugPanel>\n  <app-debug title=\"Message form\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          ready: {{ readySubject | async }}\n          <br />\n          loading: {{ loadingSubject | async }}\n          <br />\n          enabled: {{ enabled }}\n          <br />\n          dirty: {{ dirty }}\n          <br />\n          valid: {{ valid }}\n          <br />\n          <br />\n          error: {{ _form | formError | json }}\n          <br />\n          recipients: {{ _form | formGetValue: 'recipients' | personToString }}\n          <br />\n          recipientFilter: {{ _form | formGetValue: 'recipientFilter' | json }}\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n</ng-template>\n", styles: ["textarea.fixed-height{height:11.5em}textarea{min-height:11.5em}app-markdown-toolbar{display:block;margin-bottom:4px}.body-preview{box-sizing:border-box;height:calc(100% - 22px);min-height:calc(11.5em + 32px);padding:0 1em;overflow:auto;border:1px dashed var(--ion-item-border-color, #c8cdd4);border-radius:4px}.body-preview>markdown{display:block}.message-attachments{margin-top:8px;--app-upload-file-list-max-height: none}:host.file-over{display:block;outline:2px dashed var(--ion-color-accent);outline-offset:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { mobile: [{
                 type: Input
             }], suggestFn: [{
@@ -39736,8 +40318,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], maxAttachmentSizeMb: [{
                 type: Input
+            }], bodyPreviewSideBySide: [{
+                type: Input,
+                args: [{ transform: toBoolean }]
             }], searchRecipients: [{
                 type: Output
+            }], attach: [{
+                type: Output
+            }], bodyPreviewChange: [{
+                type: Output
             }], attachmentsUpload: [{
                 type: ViewChild,
                 args: ['attachmentsUpload']
@@ -39771,6 +40360,12 @@ class MessageModal {
     accountService;
     cd;
     userController;
+    /** Margin (in px) kept between the modal and the window borders, when the modal grows */
+    static FIT_HEIGHT_MARGIN = 50;
+    /** Min window width (in px) to display the body preview side by side with the text (2 columns), in a wider modal */
+    static PREVIEW_SIDE_BY_SIDE_MIN_WINDOW_WIDTH = 1000;
+    /** Max modal width (in px), when the body preview is displayed side by side */
+    static PREVIEW_SIDE_BY_SIDE_MAX_WIDTH = 1200;
     mobile;
     debug = false;
     title = 'SOCIAL.MESSAGE.NEW.TITLE';
@@ -39785,6 +40380,14 @@ class MessageModal {
     deleteFn;
     maxAttachmentSizeMb = 20;
     form;
+    elementRef = inject(ElementRef);
+    /** Initial (default) height of the modal, used as the min height when fitting the content */
+    initialHeight;
+    /** Attachments count, at the last fit (used to allow the modal to shrink only when an attachment has been removed) */
+    fittedAttachmentsCount = 0;
+    resizeObserver;
+    /** Display the body preview side by side with the text (if enough space), or replacing the text */
+    bodyPreviewSideBySide = false;
     constructor(settings, viewCtrl, accountService, cd, userController) {
         this.settings = settings;
         this.viewCtrl = viewCtrl;
@@ -39806,8 +40409,13 @@ class MessageModal {
             }
             this.form.markAsLoaded();
             this.form.enable();
+            // Grow the modal when attachments are added (or shrink back when removed)
+            this.observeAttachmentsResize();
         });
     }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
     cancel() {
         this.viewCtrl.dismiss();
     }
@@ -39873,12 +40481,77 @@ class MessageModal {
     markAsLoaded(opts) {
         this.form.markAsLoaded(opts);
     }
+    /**
+     * Observe the attachments area: when its size changes, fit the modal height to its content
+     */
+    observeAttachmentsResize() {
+        if (this.mobile || typeof ResizeObserver === 'undefined')
+            return; // Skip on mobile (full screen modal)
+        const attachmentsElement = this.elementRef.nativeElement.querySelector('.message-attachments');
+        if (!attachmentsElement)
+            return; // No attachments allowed
+        this.resizeObserver = new ResizeObserver(() => this.fitHeightToContent());
+        this.resizeObserver.observe(attachmentsElement);
+    }
+    /**
+     * Fit the modal height to its content (to avoid any scroll), between its initial height,
+     * and the window height (minus a margin). The modal never shrinks below its initial height.
+     *
+     * To avoid any flickering, the modal shrinks only when an attachment has been removed (or if `allowShrink`): the upload progress
+     * (global and per file progress bars) makes the content grow temporarily, so the reached height is kept after the upload.
+     */
+    fitHeightToContent(opts) {
+        const page = this.elementRef.nativeElement; // The modal page (.ion-page), filling the modal
+        const modal = page.closest('ion-modal');
+        const content = page.querySelector('ion-content');
+        const formElement = page.querySelector('app-message-form');
+        if (!modal || !content || !formElement)
+            return;
+        const currentHeight = page.offsetHeight;
+        this.initialHeight = this.initialHeight ?? currentHeight;
+        const maxHeight = window.innerHeight - MessageModal.FIT_HEIGHT_MARGIN;
+        if (this.initialHeight >= maxHeight)
+            return; // Already full height: nothing to do
+        // Required height = current height + content overflow (positive) or free space (negative)
+        const contentPaddingBottom = parseFloat(getComputedStyle(content).getPropertyValue('--padding-bottom')) || 0;
+        const delta = formElement.getBoundingClientRect().bottom + contentPaddingBottom - content.getBoundingClientRect().bottom;
+        let height = Math.round(Math.max(this.initialHeight, Math.min(currentHeight + delta, maxHeight)));
+        // Shrink only if an attachment has been removed
+        const attachmentsCount = page.querySelectorAll('.message-attachments ion-item').length;
+        if (height < currentHeight && !opts?.allowShrink && attachmentsCount >= this.fittedAttachmentsCount) {
+            height = currentHeight;
+        }
+        this.fittedAttachmentsCount = attachmentsCount;
+        if (Math.abs(height - currentHeight) >= 1) {
+            modal.style.setProperty('--height', `${height}px`);
+        }
+    }
+    /**
+     * When the body preview is toggled: if enough space, widen the modal to display the preview side by side with the text;
+     * otherwise (e.g. mobile, or small window), the preview replaces the text
+     */
+    onBodyPreviewChange(preview) {
+        const modal = this.elementRef.nativeElement.closest('ion-modal');
+        if (preview) {
+            this.bodyPreviewSideBySide = !this.mobile && window.innerWidth >= MessageModal.PREVIEW_SIDE_BY_SIDE_MIN_WINDOW_WIDTH;
+        }
+        if (preview && this.bodyPreviewSideBySide) {
+            modal?.style.setProperty('--width', `min(${MessageModal.PREVIEW_SIDE_BY_SIDE_MAX_WIDTH}px, calc(100% - ${MessageModal.FIT_HEIGHT_MARGIN * 2}px))`);
+        }
+        else {
+            modal?.style.removeProperty('--width');
+        }
+        this.markForCheck();
+        // Fit the height to the new content (after the rendering)
+        if (!this.mobile)
+            setTimeout(() => this.fitHeightToContent({ allowShrink: true }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageModal, deps: [{ token: LocalSettingsService }, { token: i2$2.ModalController }, { token: AccountService }, { token: i0.ChangeDetectorRef }, { token: USER_CONTROLLER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MessageModal, isStandalone: false, selector: "app-message-modal", inputs: { debug: ["debug", "debug", booleanAttribute], title: "title", suggestFn: "suggestFn", data: "data", canSelectType: ["canSelectType", "canSelectType", booleanAttribute], canRecipientFilter: ["canRecipientFilter", "canRecipientFilter", booleanAttribute], canSearchRecipients: ["canSearchRecipients", "canSearchRecipients", booleanAttribute], recipientFilterCount: ["recipientFilterCount", "recipientFilterCount", booleanAttribute], canAttach: ["canAttach", "canAttach", booleanAttribute], uploadFn: "uploadFn", deleteFn: "deleteFn", maxAttachmentSizeMb: "maxAttachmentSizeMb" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n    [canSearchRecipients]=\"canSearchRecipients\"\n    [canAttach]=\"canAttach\"\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [maxAttachmentSizeMb]=\"maxAttachmentSizeMb\"\n    (searchRecipients)=\"openSelectUsers($event)\"\n    [debug]=\"debug\"\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-text>{{ 'COMMON.BTN_SEND' | translate }}</ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { 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.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.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: "component", type: MessageForm, selector: "app-message-form", inputs: ["mobile", "suggestFn", "subjectMinLength", "subjectMaxLength", "bodyMaxLength", "bodyAutoHeight", "canSelectType", "canRecipientFilter", "recipientFilterCount", "canSearchRecipients", "canAttach", "uploadFn", "deleteFn", "maxAttachmentSizeMb"], outputs: ["searchRecipients"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MessageModal, isStandalone: false, selector: "app-message-modal", inputs: { debug: ["debug", "debug", booleanAttribute], title: "title", suggestFn: "suggestFn", data: "data", canSelectType: ["canSelectType", "canSelectType", booleanAttribute], canRecipientFilter: ["canRecipientFilter", "canRecipientFilter", booleanAttribute], canSearchRecipients: ["canSearchRecipients", "canSearchRecipients", booleanAttribute], recipientFilterCount: ["recipientFilterCount", "recipientFilterCount", booleanAttribute], canAttach: ["canAttach", "canAttach", booleanAttribute], uploadFn: "uploadFn", deleteFn: "deleteFn", maxAttachmentSizeMb: "maxAttachmentSizeMb" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n    [canSearchRecipients]=\"canSearchRecipients\"\n    [canAttach]=\"canAttach\"\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [maxAttachmentSizeMb]=\"maxAttachmentSizeMb\"\n    [bodyPreviewSideBySide]=\"bodyPreviewSideBySide\"\n    (bodyPreviewChange)=\"onBodyPreviewChange($event)\"\n    (searchRecipients)=\"openSelectUsers($event)\"\n    [debug]=\"debug\"\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-text>{{ 'COMMON.BTN_SEND' | translate }}</ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { 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.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.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: "component", type: MessageForm, selector: "app-message-form", inputs: ["mobile", "suggestFn", "subjectMinLength", "subjectMaxLength", "bodyMaxLength", "bodyAutoHeight", "canSelectType", "canRecipientFilter", "recipientFilterCount", "canSearchRecipients", "canAttach", "uploadFn", "deleteFn", "maxAttachmentSizeMb", "bodyPreviewSideBySide"], outputs: ["searchRecipients", "attach", "bodyPreviewChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageModal, decorators: [{
             type: Component,
-            args: [{ selector: 'app-message-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n    [canSearchRecipients]=\"canSearchRecipients\"\n    [canAttach]=\"canAttach\"\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [maxAttachmentSizeMb]=\"maxAttachmentSizeMb\"\n    (searchRecipients)=\"openSelectUsers($event)\"\n    [debug]=\"debug\"\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-text>{{ 'COMMON.BTN_SEND' | translate }}</ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
+            args: [{ selector: 'app-message-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"secondary\">\n    <ion-buttons slot=\"start\">\n      <ion-button class=\"back-button\" (click)=\"cancel()\" visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button\n        class=\"back-button\"\n        (click)=\"doSubmit()\"\n        [disabled]=\"!form.valid\"\n        visible-xs\n        visible-sm\n        visible-mobile\n      >\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-message-form\n    #form\n    (onSubmit)=\"doSubmit()\"\n    (onCancel)=\"cancel()\"\n    [canSelectType]=\"canSelectType\"\n    [canRecipientFilter]=\"canRecipientFilter\"\n    [recipientFilterCount]=\"recipientFilterCount\"\n    [suggestFn]=\"suggestFn\"\n    [canSearchRecipients]=\"canSearchRecipients\"\n    [canAttach]=\"canAttach\"\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [maxAttachmentSizeMb]=\"maxAttachmentSizeMb\"\n    [bodyPreviewSideBySide]=\"bodyPreviewSideBySide\"\n    (bodyPreviewChange)=\"onBodyPreviewChange($event)\"\n    (searchRecipients)=\"openSelectUsers($event)\"\n    [debug]=\"debug\"\n  ></app-message-form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n\n      <!-- buttons -->\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n        </ion-button>\n\n        <ion-button\n          [fill]=\"form.invalid ? 'clear' : 'solid'\"\n          [disabled]=\"form.loading || form.invalid\"\n          (keyup.enter)=\"doSubmit()\"\n          (click)=\"doSubmit()\"\n          color=\"tertiary\"\n        >\n          <ion-text>{{ 'COMMON.BTN_SEND' | translate }}</ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n" }]
         }], ctorParameters: () => [{ type: LocalSettingsService }, { type: i2$2.ModalController }, { type: AccountService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -44618,6 +45291,7 @@ class UsersPage extends AppTable {
         this.debug = !environment.production;
     }
     filterExpansionPanel;
+    filterAutocompleteFields;
     get firstUserColumn() {
         const columnName = this.displayedColumns[RESERVED_START_COLUMNS.length];
         // Skip avatar column, if present
@@ -44728,6 +45402,9 @@ class UsersPage extends AppTable {
         this.markAsLoading();
         this.filterForm.reset();
         this.setFilter(null);
+        this.filterAutocompleteFields.forEach((field) => {
+            field.reloadItems('');
+        });
     }
     async restoreFilterOrLoad() {
         this.markAsLoading();
@@ -44868,11 +45545,11 @@ 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 }], 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                  [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"], 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,
-            args: [{ selector: 'app-users-table', providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], animations: [slideUpDownAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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                  [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"] }]
+            args: [{ selector: 'app-users-table', providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], animations: [slideUpDownAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: AccountService }, { type: i3$5.ValidatorService }, { type: ConfigService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_PERSON_SERVICE]
@@ -44935,6 +45612,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }], filterExpansionPanel: [{
                 type: ViewChild,
                 args: [MatExpansionPanel, { static: true }]
+            }], filterAutocompleteFields: [{
+                type: ViewChildren,
+                args: ['filterAutocompleteFields']
             }] } });
 
 class AppSelectUsersModal {
@@ -45136,14 +45816,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 class MessageModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: MessageModule, declarations: [MessageModal, MessageForm], imports: [CommonModule, SharedModule, CorePipesModule, MatChipsModule, SharedDebugModule], exports: [MessageModal, MessageForm] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageModule, providers: [provideChildTranslateService(), { provide: USER_CONTROLLER, useExisting: UserController }], imports: [CommonModule, SharedModule, CorePipesModule, MatChipsModule, SharedDebugModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: MessageModule, declarations: [MessageModal, MessageForm], imports: [CommonModule, SharedModule, CorePipesModule, MatChipsModule, SharedDebugModule, SharedMarkdownModule], exports: [MessageModal, MessageForm] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageModule, providers: [provideChildTranslateService(), { provide: USER_CONTROLLER, useExisting: UserController }], imports: [CommonModule, SharedModule, CorePipesModule, MatChipsModule, SharedDebugModule, SharedMarkdownModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageModule, decorators: [{
             type: NgModule,
             args: [{
                     // Do NOT import CoreModule here (circular dependency: CoreModule > home > FeedModule > MessageModule)
-                    imports: [CommonModule, SharedModule, CorePipesModule, MatChipsModule, SharedDebugModule],
+                    imports: [CommonModule, SharedModule, CorePipesModule, MatChipsModule, SharedDebugModule, SharedMarkdownModule],
                     declarations: [MessageModal, MessageForm],
                     exports: [MessageModal, MessageForm],
                     providers: [provideChildTranslateService(), { provide: USER_CONTROLLER, useExisting: UserController }],
@@ -52125,6 +52805,18 @@ function createApolloClientOptions() {
     const httpLinkInstance = httpLink.create({
         uri: (o) => $url.value,
     });
+    // Queries link
+    let queryLink = ApolloLink.from([retryLink, authLink, httpLinkInstance]);
+    // Enable @defer (incremental delivery): send queries with @defer using the Apollo fetch link,
+    // because the apollo-angular HttpLink (Angular HttpClient) cannot read a streamed multipart/mixed response
+    const enableDefer = environment.enableGraphqlDefer === true;
+    if (enableDefer) {
+        console.info('[graphql] Enable @defer directive (incremental delivery)');
+        const fetchHttpLink = new HttpLink$1({
+            uri: () => $url.value,
+        });
+        queryLink = ApolloLink.split(isDeferredOperation, ApolloLink.from([retryLink, authLink, httpHeadersToRecordLink, fetchHttpLink]), queryLink);
+    }
     // Cache
     const cache = new InMemoryCache({
         typePolicies,
@@ -52180,7 +52872,12 @@ function createApolloClientOptions() {
         // Handle subscriptions
         isSubscriptionOperation, wsLink, 
         // Handle queries
-        ApolloLink.from([retryLink, authLink, httpLinkInstance]))),
+        queryLink)),
+        // @defer support
+        ...(enableDefer
+            ? { incrementalHandler: new Defer20220824Handler() }
+            : // Remove @defer directives, when disabled
+                { documentTransform: new DocumentTransform(removeDeferDirectives) }),
         // For @apollo/client < 3.11
         //connectToDevTools: !environment.production,
         // For @apollo/client 3.11+
@@ -56895,7 +57592,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"] }, { 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"], 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,
@@ -57186,7 +57883,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"] }, { 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", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -57445,7 +58142,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"] }, { 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"], 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,
@@ -58762,12 +59459,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }] });
 
+// Free license (GPL version 3)
+// Fake recipients, used by the autocomplete field (no pod needed)
+const FAKE_PERSONS = [
+    { id: 1, firstName: 'Demo', lastName: 'Admin', department: { id: 1, label: 'FROM-NORD', name: 'FROM Nord' } },
+    { id: 2, firstName: 'Demo', lastName: 'Observer', department: { id: 1, label: 'FROM-NORD', name: 'FROM Nord' } },
+    { id: 3, firstName: 'Charles', lastName: 'Dupond', department: { id: 2, label: 'IFREMER', name: 'Ifremer' } },
+].map(Person.fromObject);
+const SAMPLE_BODY = `# Title
+
+Some **bold**, <u>underlined</u>, ~~strikethrough~~ text, and a ==highlighted== word.
+
+## Sub title
+
+- see [the docs](https://gitlab.ifremer.fr/sih-public/sumaris/ngx-sumaris-components)
+`;
+class MessageFormTestingPage {
+    modalCtrl;
+    cd;
+    form;
+    debug = false;
+    canSelectType = true;
+    canAttach = true;
+    bodyPreviewSideBySide = false;
+    modalResult;
+    suggestFn = async (value) => {
+        const search = typeof value === 'string' ? value.toLowerCase() : '';
+        return FAKE_PERSONS.filter((p) => !search || `${p.lastName} ${p.firstName}`.toLowerCase().includes(search));
+    };
+    /** Simulate an upload (with progression) */
+    uploadFn = (file) => {
+        const steps = 5;
+        return timer(0, 100).pipe(take(steps + 1), map((i) => i < steps
+            ? { type: HttpEventType.UploadProgress, total: file.size, loaded: (file.size * i) / steps }
+            : new HttpResponse({ body: { finalName: file.name } })));
+    };
+    deleteFn = async (_file) => {
+        await sleep(500);
+        return true;
+    };
+    constructor(modalCtrl, cd) {
+        this.modalCtrl = modalCtrl;
+        this.cd = cd;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.reset());
+    }
+    async reset(withSample) {
+        this.form.markAsReady({ emitEvent: false });
+        await this.form.setValue(Message.fromObject({
+            type: MessageTypes.INBOX_MESSAGE,
+            recipients: [FAKE_PERSONS[0]],
+            subject: withSample ? 'Markdown sample' : null,
+            body: withSample ? SAMPLE_BODY : null,
+        }));
+        this.form.markAsLoaded();
+        this.form.enable();
+        this.cd.markForCheck();
+    }
+    async openModal() {
+        const modal = await this.modalCtrl.create({
+            component: MessageModal,
+            componentProps: {
+                suggestFn: this.suggestFn,
+                canSelectType: this.canSelectType,
+                canAttach: this.canAttach,
+                uploadFn: this.uploadFn,
+                deleteFn: this.deleteFn,
+                debug: this.debug,
+                data: Message.fromObject({ recipients: [FAKE_PERSONS[0]] }),
+            },
+            keyboardClose: true,
+        });
+        await modal.present();
+        const { data } = await modal.onDidDismiss();
+        console.info('[message-form-testing] Modal result:', data);
+        this.modalResult = data;
+        this.cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageFormTestingPage, deps: [{ token: i2$2.ModalController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MessageFormTestingPage, isStandalone: false, selector: "app-message-form-testing", viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: 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    <ion-title>Message form test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-grid class=\"form-container ion-padding-top\">\n    <!-- options -->\n    <ion-row>\n      <ion-col>\n        <mat-checkbox [(ngModel)]=\"canSelectType\">canSelectType</mat-checkbox>\n        <mat-checkbox [(ngModel)]=\"canAttach\">canAttach</mat-checkbox>\n        <mat-checkbox [(ngModel)]=\"bodyPreviewSideBySide\">bodyPreviewSideBySide</mat-checkbox>\n        <mat-checkbox [(ngModel)]=\"debug\">debug</mat-checkbox>\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"outline\" (click)=\"reset()\">Reset</ion-button>\n        <ion-button fill=\"outline\" (click)=\"reset(true)\">Markdown sample</ion-button>\n        <ion-button (click)=\"openModal()\">Open in a modal</ion-button>\n      </ion-col>\n    </ion-row>\n\n    <!-- inline form -->\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-card>\n          <ion-card-content>\n            <app-message-form\n              #form\n              [suggestFn]=\"suggestFn\"\n              [canSelectType]=\"canSelectType\"\n              [canAttach]=\"canAttach\"\n              [bodyPreviewSideBySide]=\"bodyPreviewSideBySide\"\n              [uploadFn]=\"uploadFn\"\n              [deleteFn]=\"deleteFn\"\n              [debug]=\"debug\"\n            ></app-message-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n\n      <!-- form value -->\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-subtitle>Form value (valid: {{ form.valid }})</ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <pre>{{ form.form?.value | json }}</pre>\n          </ion-card-content>\n        </ion-card>\n\n        @if (modalResult) {\n          <ion-card>\n            <ion-card-header>\n              <ion-card-subtitle>Modal result</ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <pre>{{ modalResult | json }}</pre>\n            </ion-card-content>\n          </ion-card>\n        }\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\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.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.IonRow, selector: "ion-row" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MessageForm, selector: "app-message-form", inputs: ["mobile", "suggestFn", "subjectMinLength", "subjectMaxLength", "bodyMaxLength", "bodyAutoHeight", "canSelectType", "canRecipientFilter", "recipientFilterCount", "canSearchRecipients", "canAttach", "uploadFn", "deleteFn", "maxAttachmentSizeMb", "bodyPreviewSideBySide"], outputs: ["searchRecipients", "attach", "bodyPreviewChange"] }, { kind: "pipe", type: i2$3.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageFormTestingPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-message-form-testing', 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    <ion-title>Message form test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <ion-grid class=\"form-container ion-padding-top\">\n    <!-- options -->\n    <ion-row>\n      <ion-col>\n        <mat-checkbox [(ngModel)]=\"canSelectType\">canSelectType</mat-checkbox>\n        <mat-checkbox [(ngModel)]=\"canAttach\">canAttach</mat-checkbox>\n        <mat-checkbox [(ngModel)]=\"bodyPreviewSideBySide\">bodyPreviewSideBySide</mat-checkbox>\n        <mat-checkbox [(ngModel)]=\"debug\">debug</mat-checkbox>\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"outline\" (click)=\"reset()\">Reset</ion-button>\n        <ion-button fill=\"outline\" (click)=\"reset(true)\">Markdown sample</ion-button>\n        <ion-button (click)=\"openModal()\">Open in a modal</ion-button>\n      </ion-col>\n    </ion-row>\n\n    <!-- inline form -->\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-card>\n          <ion-card-content>\n            <app-message-form\n              #form\n              [suggestFn]=\"suggestFn\"\n              [canSelectType]=\"canSelectType\"\n              [canAttach]=\"canAttach\"\n              [bodyPreviewSideBySide]=\"bodyPreviewSideBySide\"\n              [uploadFn]=\"uploadFn\"\n              [deleteFn]=\"deleteFn\"\n              [debug]=\"debug\"\n            ></app-message-form>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n\n      <!-- form value -->\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-subtitle>Form value (valid: {{ form.valid }})</ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <pre>{{ form.form?.value | json }}</pre>\n          </ion-card-content>\n        </ion-card>\n\n        @if (modalResult) {\n          <ion-card>\n            <ion-card-header>\n              <ion-card-subtitle>Modal result</ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <pre>{{ modalResult | json }}</pre>\n            </ion-card-content>\n          </ion-card>\n        }\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n" }]
+        }], ctorParameters: () => [{ type: i2$2.ModalController }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
+                type: ViewChild,
+                args: ['form', { static: true }]
+            }] } });
+
+class MessageFormTestingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageFormTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: MessageFormTestingModule, declarations: [MessageFormTestingPage], imports: [SharedModule, FormsModule, MessageModule], exports: [MessageFormTestingPage] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageFormTestingModule, providers: [provideChildTranslateService()], imports: [SharedModule, FormsModule, MessageModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MessageFormTestingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SharedModule, FormsModule, MessageModule],
+                    declarations: [MessageFormTestingPage],
+                    exports: [MessageFormTestingPage],
+                    providers: [provideChildTranslateService()],
+                }]
+        }] });
+
 // Testing pages, declared outside the testing module, to be imported without loading the (lazy) testing module
 const SOCIAL_TESTING_PAGES = [
     { label: 'Social components', divider: true },
     { label: 'Job progression', page: '/testing/social/job-progression' },
     { label: 'User event', page: '/testing/social/user-event' },
     { label: 'Feed', page: '/testing/social/feed' },
+    { label: 'Message form', page: '/testing/social/message-form' },
 ];
 
 const routes = [
@@ -58786,6 +59588,11 @@ const routes = [
         pathMatch: 'full',
         component: FeedTestingPage,
     },
+    {
+        path: 'message-form',
+        pathMatch: 'full',
+        component: MessageFormTestingPage,
+    },
     {
         path: 'feed/page',
         pathMatch: 'full',
@@ -58798,13 +59605,15 @@ class SocialTestingModule {
             // Sub modules
             JobTestingModule,
             UserEventTestingModule,
-            FeedTestingModule] });
+            FeedTestingModule,
+            MessageFormTestingModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SocialTestingModule, providers: [provideChildTranslateService()], imports: [CommonModule,
             RouterModule.forChild(routes),
             // Sub modules
             JobTestingModule,
             UserEventTestingModule,
-            FeedTestingModule] });
+            FeedTestingModule,
+            MessageFormTestingModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SocialTestingModule, decorators: [{
             type: NgModule,
@@ -58816,6 +59625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         JobTestingModule,
                         UserEventTestingModule,
                         FeedTestingModule,
+                        MessageFormTestingModule,
                     ],
                     providers: [provideChildTranslateService()],
                 }]
@@ -58856,5 +59666,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, 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, 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, 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, hasFocusWithin, hexToRgb, hexToRgbArray, initArrayControlsFromValues, initializeSharedModule, interpolateString, intersectArrays, isAndroid, isAppInputField, isAppTextInputField, isBlankString, isCapacitor, isChrome, isControlHasInput, 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, 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, trimEmptyToNull, truncateHtml, typeTextIntoInput, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+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 };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map