@sumaris-net/ngx-components 21.3.3-rc1 → 21.3.4

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

@@ -104,7 +104,7 @@ import { AudioMode } from '@awesome-cordova-plugins/audio-management/ngx';
 import { Haptics } from '@capacitor/haptics';
 import { NativeAudio } from '@capacitor-community/native-audio';
 import * as i2$4 from '@angular/common/http';
-import { HttpEventType, HttpClient, HttpHeaders, HttpResponse, HttpErrorResponse, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { HttpEventType, HttpClient, HttpHeaders, HttpErrorResponse, provideHttpClient, withInterceptorsFromDi, HttpResponse } from '@angular/common/http';
 import { base64Decode, cryptoWaitReady, ed25519PairFromSeed, ed25519Sign, base64Encode, base58Decode, ed25519Verify, sha256AsU8a, sha512AsU8a } from '@polkadot/util-crypto';
 import { v4 } from 'uuid';
 import * as i4$6 from '@angular/cdk/drag-drop';
@@ -3151,7 +3151,9 @@ function firstNotNilPromise(obs, opts) {
     return firstNotNil(obs, { stopError: true, ...opts }).toPromise();
 }
 function firstPromise(obs, opts) {
-    return decorateWithTakeUntil(obs, { stopError: true, ...opts }).toPromise();
+    return decorateWithTakeUntil(
+    // Take the first value: toPromise() resolves only on complete (never for a Subject, e.g. a startSubject)
+    obs.pipe(first()), { stopError: true, ...opts }).toPromise();
 }
 function chainPromises(defers) {
     return (defers || []).reduce((previous, defer) => {
@@ -16191,6 +16193,8 @@ class UploadFile extends File {
     progress;
     deleting;
     error;
+    /** Kind of file (image, pdf, spreadsheet...), used to choose an icon */
+    kind;
     response;
 }
 class FileResponse {
@@ -16608,6 +16612,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i2.TranslateService }] });
 
+// GPL v3 License
+/**
+ * Material icon (font ligature) of each file kind
+ */
+const FILE_KIND_ICONS = Object.freeze({
+    image: 'image',
+    pdf: 'picture_as_pdf',
+    document: 'article',
+    spreadsheet: 'table_view',
+    presentation: 'slideshow',
+    archive: 'folder_zip',
+    video: 'movie',
+    audio: 'audiotrack',
+    text: 'text_snippet',
+    code: 'data_object',
+    other: 'insert_drive_file',
+});
+// File extensions of each kind (MS Office, LibreOffice / OpenDocument, Apple iWork...)
+const KIND_EXTENSIONS = Object.freeze({
+    image: ['png', 'jpg', 'jpeg', 'jfif', 'gif', 'bmp', 'webp', 'svg', 'tif', 'tiff', 'heic', 'heif', 'avif', 'ico'],
+    pdf: ['pdf'],
+    document: ['doc', 'docx', 'docm', 'dot', 'dotx', 'odt', 'ott', 'fodt', 'rtf', 'pages', 'wpd'],
+    spreadsheet: ['xls', 'xlsx', 'xlsm', 'xlsb', 'xlt', 'xltx', 'ods', 'ots', 'fods', 'csv', 'tsv', 'numbers'],
+    presentation: ['ppt', 'pptx', 'pptm', 'pps', 'ppsx', 'pot', 'potx', 'odp', 'otp', 'fodp', 'key'],
+    archive: ['zip', '7z', 'rar', 'gz', 'tgz', 'bz2', 'xz', 'tar'],
+    video: ['mp4', 'm4v', 'mov', 'avi', 'mkv', 'webm', 'mpg', 'mpeg', 'wmv'],
+    audio: ['mp3', 'wav', 'ogg', 'oga', 'flac', 'aac', 'm4a', 'wma'],
+    text: ['txt', 'md', 'log'],
+    code: ['json', 'xml', 'yaml', 'yml', 'html', 'htm', 'js', 'ts', 'css', 'sql', 'sh', 'py', 'java'],
+});
+// Patterns on the MIME type of each kind (checked in this order)
+const KIND_MIME_TYPES = Object.freeze([
+    ['pdf', /^application\/(x-)?pdf$/],
+    ['image', /^image\//],
+    ['video', /^video\//],
+    ['audio', /^audio\//],
+    ['spreadsheet', /(spreadsheet|ms-excel|apple\.numbers|^(text|application)\/csv$|^text\/tab-separated-values$)/],
+    ['presentation', /(presentation|ms-powerpoint|apple\.keynote)/],
+    ['document', /(wordprocessing|msword|ms-word|opendocument\.text|apple\.pages|^(application|text)\/rtf$)/],
+    ['archive', /(zip|compressed|x-tar|x-7z|vnd\.rar|x-rar|gzip|x-bzip|x-xz)/],
+    ['code', /(json|xml|yaml|javascript|x-sh|sql|x-python|x-java)/],
+    ['code', /^text\/(html|css)$/],
+    ['text', /^text\//],
+]);
+// MIME types of some extensions, to accept a file even if its extension is a variant (e.g. '.jpeg' when '.jpg' is expected)
+const EXTENSION_MIME_TYPES = Object.freeze({
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    tif: 'image/tiff',
+    tiff: 'image/tiff',
+    htm: 'text/html',
+    html: 'text/html',
+    yml: 'application/yaml',
+    yaml: 'application/yaml',
+});
+class FileTypeUtils {
+    /**
+     * Get the extension of a file name, lower-cased and without the dot (e.g. 'my.File.PDF' => 'pdf')
+     */
+    static getExtension(fileName) {
+        // Ignore the path, if any (e.g. 'my.dir/file' has no extension)
+        fileName = fileName?.substring(Math.max(fileName.lastIndexOf('/'), fileName.lastIndexOf('\\')) + 1);
+        const index = fileName?.lastIndexOf('.');
+        if (!index || index === -1 || index === fileName.length - 1)
+            return undefined;
+        return fileName.substring(index + 1).toLowerCase();
+    }
+    /**
+     * Get the kind of file, from its MIME type (e.g. 'application/pdf' => 'pdf')
+     */
+    static getKindByMimeType(mimeType) {
+        mimeType = mimeType?.trim().toLowerCase();
+        if (!mimeType)
+            return 'other';
+        const match = KIND_MIME_TYPES.find(([, pattern]) => pattern.test(mimeType));
+        return match ? match[0] : 'other';
+    }
+    /**
+     * Get the kind of file, from its name (or path), using its extension (e.g. 'my-file.csv' => 'spreadsheet')
+     */
+    static getKindByFileName(fileName) {
+        const extension = this.getExtension(fileName);
+        if (!extension)
+            return 'other';
+        const kind = Object.keys(KIND_EXTENSIONS).find((k) => KIND_EXTENSIONS[k].includes(extension));
+        return kind || 'other';
+    }
+    /**
+     * Get the kind of file, from its MIME type, or from its name if the MIME type is empty or unknown (e.g. for some files on Windows)
+     *
+     * @param file a file, or any object with a name and/or a MIME type
+     */
+    static getKindByFile(file) {
+        const kind = this.getKindByMimeType(file?.type);
+        return kind !== 'other' ? kind : this.getKindByFileName(file?.name);
+    }
+    /**
+     * Get the Material icon (font ligature) from a MIME type (e.g. 'application/pdf' => 'picture_as_pdf')
+     */
+    static getIconByMimeType(mimeType) {
+        return FILE_KIND_ICONS[this.getKindByMimeType(mimeType)];
+    }
+    /**
+     * Get the Material icon (font ligature) from a file name (or path), e.g. 'my-file.csv' => 'table_view'
+     */
+    static getIconByFileName(fileName) {
+        return FILE_KIND_ICONS[this.getKindByFileName(fileName)];
+    }
+    /**
+     * Get the Material icon (font ligature) of a file, from its MIME type, or from its name
+     *
+     * @param file a file, or any object with a name and/or a MIME type
+     */
+    static getIconByFile(file) {
+        return FILE_KIND_ICONS[this.getKindByFile(file)];
+    }
+    /**
+     * Check if a file matches an 'accept' string (same syntax as the HTML attribute: e.g. '.png, .jpg' or 'image/*, application/pdf').
+     * An empty 'accept' accepts all files.
+     */
+    static isAccepted(file, accept) {
+        const tokens = (accept || '')
+            .split(',')
+            .map((token) => token.trim().toLowerCase())
+            .filter((token) => token.length > 0);
+        if (!tokens.length)
+            return true;
+        const fileName = (file?.name || '').toLowerCase();
+        const mimeType = (file?.type || '').toLowerCase();
+        return tokens.some((token) => {
+            // Extension (e.g. '.jpg'): match the file name, or the MIME type of this extension (e.g. a '.jpeg' file)
+            if (token.startsWith('.')) {
+                if (fileName.endsWith(token))
+                    return true;
+                const extensionMimeType = EXTENSION_MIME_TYPES[token.substring(1)];
+                return !!extensionMimeType && extensionMimeType === mimeType;
+            }
+            // MIME type with wildcard (e.g. 'image/*')
+            if (token.endsWith('/*')) {
+                return mimeType.startsWith(token.substring(0, token.length - 1));
+            }
+            // Exact MIME type (e.g. 'application/pdf')
+            return mimeType === token;
+        });
+    }
+}
+
 class UploadFileComponent {
     cd;
     translate;
@@ -16621,9 +16772,17 @@ class UploadFileComponent {
     maxParallelUpload;
     maxFileSizeMb;
     autoHideDropArea = false;
+    /** Display a thumbnail for each file (the upload response body must be an image URL, e.g. a data URL), with a skeleton until it is ready */
+    showThumbnails = false;
     files = [];
     uploading = false;
     checks = [
+        // Check accepted types (extensions or MIME types - needed because the 'accept' attribute is ignored on drag and drop)
+        {
+            isEnabled: () => !!this.fileExtension?.trim(),
+            hasError: (file) => !FileTypeUtils.isAccepted(file, this.fileExtension),
+            error: 'FILE.UPLOAD.TYPE_NOT_ALLOWED_ERROR',
+        },
         // Check blacklisted extensions
         {
             isEnabled: () => !isEmptyArray(this.fileExtensionsExcluded),
@@ -16639,8 +16798,10 @@ class UploadFileComponent {
             error: 'FILE.UPLOAD.MAX_FILE_SIZE_ERROR',
         },
     ];
+    fileKindIcons = FILE_KIND_ICONS;
     get processingFiles() {
-        return this.files.filter((f) => !f.deleting && isNotNil(f.progress) && f.progress < 1);
+        // Exclude files in error: otherwise they would hold a parallel upload slot forever (and block the next uploads)
+        return this.files.filter((f) => !f.deleting && !f.error && isNotNil(f.progress) && f.progress < 1);
     }
     get processedFiles() {
         return this.files.filter((f) => !f.deleting && f.progress === 1);
@@ -16648,6 +16809,10 @@ class UploadFileComponent {
     get processingFilesCount() {
         return this.processingFiles.length;
     }
+    /** Count of finished files (processed, or in error) */
+    get doneFilesCount() {
+        return this.files.filter((f) => !!f.error || f.progress === 1).length;
+    }
     constructor(cd, translate) {
         this.cd = cd;
         this.translate = translate;
@@ -16718,9 +16883,12 @@ class UploadFileComponent {
         else {
             items = files;
         }
+        // Compute the kind of each file (used to choose an icon)
+        items.forEach((file) => (file.kind = FileTypeUtils.getKindByFile(file)));
         this.files.push(...items);
         this.checkFiles();
-        this.fileDropEl.nativeElement.value = '';
+        if (this.fileDropEl)
+            this.fileDropEl.nativeElement.value = '';
         this.cd.markForCheck();
         // Start upload
         if (this.instantUpload) {
@@ -16746,6 +16914,7 @@ class UploadFileComponent {
      */
     async uploadFiles(files) {
         this.uploading = true;
+        this.cd.markForCheck(); // Required by the zoneless change detection
         if (!files) {
             console.info('[upload-file] Uploading all files...');
             files = this.files;
@@ -16812,18 +16981,21 @@ class UploadFileComponent {
         })))));
         // Wait jobs to finish
         return forkJoin(jobs)
-            .pipe(tap$1((_) => $changes.complete()), finalize(() => (this.uploading = false)))
+            .pipe(tap$1((_) => $changes.complete()), finalize(() => {
+            this.uploading = false;
+            this.cd.markForCheck(); // Required by the zoneless change detection
+        }))
             .toPromise();
     }
     waitIdle(opts) {
         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" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "@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><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\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        <mat-icon slot=\"start\">description</mat-icon>\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) {\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]=\"file.error | translate: { fileExtensionsExcluded: fileExtensionsExcluded.join(', '), maxFileSizeMb: maxFileSizeMb }\"\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)}.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.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", showThumbnails: "showThumbnails" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "@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><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ '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]=\"file.error | translate: { fileExtension: fileExtension, fileExtensionsExcluded: fileExtensionsExcluded.join(', '), maxFileSizeMb: maxFileSizeMb }\"\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" }] });
 }
 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 ((!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><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\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        <mat-icon slot=\"start\">description</mat-icon>\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) {\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]=\"file.error | translate: { fileExtensionsExcluded: fileExtensionsExcluded.join(', '), maxFileSizeMb: maxFileSizeMb }\"\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)}.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 ((!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><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ '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]=\"file.error | translate: { fileExtension: fileExtension, fileExtensionsExcluded: fileExtensionsExcluded.join(', '), maxFileSizeMb: maxFileSizeMb }\"\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.TranslateService }], propDecorators: { fileDropEl: [{
                 type: ViewChild,
                 args: ['fileDropRef', { static: false }]
@@ -16845,6 +17017,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], autoHideDropArea: [{
                 type: Input
+            }], showThumbnails: [{
+                type: Input
             }] } });
 
 class UploadFilePopover {
@@ -16862,6 +17036,7 @@ class UploadFilePopover {
     maxParallelUpload;
     maxFileSizeMb;
     autoHideDropArea = false;
+    showThumbnails = false;
     okButtonText = 'COMMON.BTN_IMPORT';
     cancelButtonText = 'COMMON.BTN_CANCEL';
     importing = false;
@@ -16927,11 +17102,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", 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  ></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"] }, { 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" }, 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", "showThumbnails"] }, { 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  ></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  ></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"] }]
         }], ctorParameters: () => [{ type: i2$2.PopoverController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { uploader: [{
                 type: ViewChild,
                 args: ['uploader', { static: true }]
@@ -16955,6 +17130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], autoHideDropArea: [{
                 type: Input
+            }], showThumbnails: [{
+                type: Input
             }], okButtonText: [{
                 type: Input
             }], cancelButtonText: [{
@@ -17671,12 +17848,15 @@ const environment = Object.freeze({
         maxCount: 3,
     },
     buildDate: new Date().toISOString(),
+    // Theme
     // Example: override (or replace) server (Pod) configuration properties - e.g. theme colors -
-    // directly from the environment. Useful to customize the app without any server-side
-    // configuration (e.g. offline apps, on mobile). See CORE_CONFIG_OPTIONS for existing keys.
-    //properties: {
-    //  'sumaris.color.primary': '#5b5ef4',
-    //},
+    //   directly from the environment. Useful to customize the app without any server-side
+    //   configuration (e.g. offline apps, on mobile). See CORE_CONFIG_OPTIONS for existing keys.
+    /*properties: {
+      'sumaris.color.primary': '#0E7C86',
+      'sumaris.color.secondary': '#289DBD',
+      'sumaris.color.tertiary': '#F2994A',
+    },*/
 });
 
 class EntityClasses {
@@ -19797,9 +19977,13 @@ class NetworkUtils {
     }
     static statusChanges() {
         return new Observable((subscriber) => {
-            const handler = Network.addListener('networkStatusChange', (status) => subscriber.next(status));
+            const handler = Network.addListener('networkStatusChange', (status) => {
+                if (!subscriber.closed)
+                    subscriber.next(status);
+            });
+            handler.catch((err) => subscriber.error(err));
             return () => {
-                handler.then((listener) => listener.remove());
+                handler.then((listener) => listener.remove()).catch(() => { });
             };
         });
     }
@@ -26554,7 +26738,6 @@ class ConfigService extends BaseGraphqlService {
     mergeEnvironmentProperties(data) {
         const envProperties = this.environment.properties;
         if (envProperties && Object.keys(envProperties).length) {
-            debugger;
             data.properties = { ...envProperties, ...data.properties };
         }
         return data;
@@ -27081,53 +27264,48 @@ class PlatformService extends StartableService {
             });
         }
         // Set dark mode
-        if (isNotNil(options.darkMode)) {
-            await this.toggleDarkTheme(options.darkMode);
-        }
+        await this.toggleDarkTheme(options.darkMode ?? false, options?.colors?.primary);
     }
-    async toggleDarkTheme(enable) {
+    async toggleDarkTheme(enable, primaryColor) {
         const classList = document.documentElement.classList;
-        // Toggle the class
         const wasEnabled = classList.contains('dark');
         if (enable !== wasEnabled) {
             console.debug(`[platform] ${enable ? 'Enable' : 'Disable'} dark mode...`);
-            classList.toggle('dark', enable);
-            // If mobile (Android or iOS)
-            if (this.isApp() && (this.isIOS() || this.isAndroid())) {
-                // Read the primary color, if any
-                const style = getComputedStyle(document.documentElement);
-                const primaryColor = style.getPropertyValue('--ion-color-primary')?.trim();
-                const backgroundColor = !primaryColor || enable ? '#000000' : primaryColor;
-                // Configure status bar style
-                const statusBarStyle = isLightColor(backgroundColor) ? Style.Light : Style.Dark;
-                console.debug(`[platform] StatusBar icons style: ${statusBarStyle} ...`);
+        }
+        // Toggle the class
+        classList.toggle('dark', enable);
+        if (this.isApp() && (this.isIOS() || this.isAndroid())) {
+            // Read the primary color, if any
+            const style = getComputedStyle(document.documentElement);
+            primaryColor = primaryColor ?? style.getPropertyValue('--ion-color-primary')?.trim();
+            const backgroundColor = !primaryColor || enable ? '#000000' : primaryColor;
+            // Configure status bar style
+            const statusBarStyle = isLightColor(backgroundColor) ? Style.Light : Style.Dark;
+            console.debug(`[platform] StatusBar icons style: ${statusBarStyle} ...`);
+            try {
+                await StatusBar.setStyle({ style: statusBarStyle });
+            }
+            catch (err) {
+                console.error('[platform] Error while setting StatusBar icons style', err);
+            }
+            // Configure status bar background color (always use black on dark mode)
+            if (await this.isEdgeToEdgeEnabled()) {
                 try {
-                    await StatusBar.setStyle({ style: statusBarStyle });
+                    console.debug(`[platform] EdgeToEdge background color: ${backgroundColor}`);
+                    await EdgeToEdge.setBackgroundColor({ color: backgroundColor });
+                    return; // OK: stop here
                 }
                 catch (err) {
-                    console.error('[platform] Error while setting StatusBar icons style', err);
-                }
-                // Configure status bar background color (always use black on dark mode)
-                if (this.isAndroid()) {
-                    try {
-                        console.debug(`[platform] EdgeToEdge background color: ${backgroundColor}`);
-                        await EdgeToEdge.setBackgroundColor({ color: backgroundColor });
-                    }
-                    catch (err) {
-                        console.error('[platform] Error while setting EdgeToEdge background color', err);
-                        await StatusBar.setBackgroundColor({ color: backgroundColor });
-                    }
-                }
-                else {
-                    try {
-                        console.debug(`[platform] StatusBar background color: ${backgroundColor}`);
-                        await StatusBar.setBackgroundColor({ color: backgroundColor });
-                    }
-                    catch (err) {
-                        console.error('[platform] Error while setting StatusBar background color', err);
-                    }
+                    // Continue (fallback to StatusBar.setBackgroundColor)
                 }
             }
+            try {
+                console.debug(`[platform] StatusBar background color: ${backgroundColor}`);
+                await StatusBar.setBackgroundColor({ color: backgroundColor });
+            }
+            catch (err) {
+                console.error('[platform] Error while setting StatusBar background color', err);
+            }
         }
     }
     toggleHighContrast(enable) {
@@ -27202,6 +27380,15 @@ class PlatformService extends StartableService {
             this._logger?.error('deviceInfo', logMessage);
         }
     }
+    async isEdgeToEdgeEnabled(deviceInfo) {
+        if (!this.isApp() || !this.isAndroid())
+            return false;
+        deviceInfo = deviceInfo || (await this.getDeviceInfo());
+        // Enable Edge-to-edge plugin on Android version >=15 and <17
+        // - enable on Android <=15 (fix issue sumaris-app#2076)
+        // - disable for Android >=17 (edge to edge mode)
+        return VersionUtils.isCompatible('15', deviceInfo?.osVersion) && !VersionUtils.isCompatible('17', deviceInfo?.osVersion);
+    }
     /* -- protected methods -- */
     async applyEnvironmentTheme() {
         const properties = this.environment.properties;
@@ -27255,13 +27442,9 @@ class PlatformService extends StartableService {
             // Get device info
             pluginName = CapacitorPlugins.Device;
             const deviceInfo = await this.getDeviceInfo();
-            // Enable Edge-to-edge plugin on Android 15+
-            // - disable for Android <=15 (fix issue sumaris-app#2076)
-            // - disable for Android >=17 (edge to edge mode)
             pluginName = CapacitorPlugins.EdgeToEdge;
             if (this.isApp() && this.isAndroid()) {
-                const enabled = VersionUtils.isCompatible('15', deviceInfo?.osVersion)
-                    && !VersionUtils.isCompatible('17', deviceInfo?.osVersion);
+                const enabled = await this.isEdgeToEdgeEnabled(deviceInfo);
                 console.debug(`[platform] Android EdgeToEdge ${enabled ? 'enabled' : 'disabled'} - OS version: ${deviceInfo?.osVersion}`);
                 if (enabled) {
                     await EdgeToEdge.enable();
@@ -28948,14 +29131,9 @@ let ProgressInterceptor = class ProgressInterceptor {
     }
     intercept(req, next) {
         this.progressBarService.increase();
-        return next.handle(req).pipe(tap$1((event) => {
-            if (event instanceof HttpResponse) {
-                this.progressBarService.decrease();
-            }
-        }), catchError((err, event) => {
-            this.progressBarService.decrease();
-            throw err;
-        }));
+        return next.handle(req).pipe(
+        // Always decrease once: on response, on error, but also when the request is cancelled (unsubscribed)
+        finalize(() => this.progressBarService.decrease()));
     }
 };
 ProgressInterceptor = __decorate([
@@ -29022,6 +29200,7 @@ class AppImageGallerySlideshowComponent {
     /** Whether more rows may exist beyond the ones currently loaded (e.g. a further page, not yet fetched). When true, reaching the last slide asks the parent (via `fetchMore`) instead of looping/stopping. */
     canFetchMore = false;
     actionsTemplate;
+    showCloseButton = true;
     /** Requests deletion of the given row. The caller (gallery) owns the confirmation/deletion logic and resolves the promise with whether it actually happened. */
     deleteRequested = createPromiseEventEmitter();
     closeRequested = new EventEmitter();
@@ -29742,11 +29921,11 @@ class AppImageGallerySlideshowComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGallerySlideshowComponent, deps: [{ token: i2$2.AlertController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGallerySlideshowComponent, isStandalone: false, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: ["wheelZoomStep", "wheelZoomStep", numberAttribute], maxZoomRatio: ["maxZoomRatio", "maxZoomRatio", numberAttribute], enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: ["editionQuality", "editionQuality", numberAttribute], imageSizeQueryParam: "imageSizeQueryParam", imageSize: "imageSize", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], actionsTemplate: "actionsTemplate" }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-center\">\n          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: activeRow }\"></ng-container>\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i4$1.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.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { 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: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGallerySlideshowComponent, isStandalone: false, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: ["wheelZoomStep", "wheelZoomStep", numberAttribute], maxZoomRatio: ["maxZoomRatio", "maxZoomRatio", numberAttribute], enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: ["editionQuality", "editionQuality", numberAttribute], imageSizeQueryParam: "imageSizeQueryParam", imageSize: "imageSize", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], actionsTemplate: "actionsTemplate", showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-center\">\n          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: activeRow }\"></ng-container>\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else if(showCloseButton) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i4$1.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.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { 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: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGallerySlideshowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-center\">\n          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: activeRow }\"></ng-container>\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+            args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-center\">\n          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: activeRow }\"></ng-container>\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else if(showCloseButton) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.AlertController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { rows: [{
                 type: Input
             }], selectedIndex: [{
@@ -29803,6 +29982,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], actionsTemplate: [{
                 type: Input
+            }], showCloseButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], deleteRequested: [{
                 type: Output
             }], closeRequested: [{
@@ -29912,6 +30094,10 @@ class ImageService extends StartableService {
             autoHideDropArea: opts?.autoHideDropArea !== false,
             fileExtension: '.png, .jpg',
             instantUpload: true,
+            // Show a thumbnail (or a skeleton, while reading) for each image
+            showThumbnails: true,
+            // Read/resize a few images at a time: avoid decoding many images at once (e.g. 300 photos), that freezes the UI
+            maxParallelUpload: 4,
             okButtonText: opts?.uploadButtonText || 'COMMON.BTN_IMPORT',
             uploadFn: (file) => ImagesUtils.readAsDataURL(file, {
                 maxWidth: this.defaultMaxWidth,
@@ -30019,6 +30205,7 @@ class AppImageGalleryComponent {
      * The gallery has no opinion on how fetching is actually done: it's entirely up to the parent.
      */
     canFetchMore = false;
+    showCloseButton = true;
     set dataSource(dataSource) {
         if (this._dataSource !== dataSource) {
             this._switchDataSource(dataSource);
@@ -30385,11 +30572,11 @@ class AppImageGalleryComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i2$2.Platform }, { token: i2$2.AlertController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGalleryComponent, isStandalone: false, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", slideshowActionsTemplate: "slideshowActionsTemplate", imageSizeQueryParam: "imageSizeQueryParam", imageSizes: "imageSizes", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { modeChange: "modeChange", onDeleteRow: "onDeleteRow", onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore", slideshowOpened: "slideshowOpened", slideshowClosed: "slideshowClosed" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "inlineSlideshow", first: true, predicate: ["inlineSlideshow"], descendants: true }], ngImport: i0, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      [actionsTemplate]=\"slideshowActionsTemplate\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        [actionsTemplate]=\"slideshowActionsTemplate\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i4$1.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.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.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonPopover, selector: "ion-popover" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$2.IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "imageSizeQueryParam", "imageSize", "imageVersionQueryParam", "imageVersionFn", "enableLoop", "canFetchMore", "actionsTemplate"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "slideChanges", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGalleryComponent, isStandalone: false, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", slideshowActionsTemplate: "slideshowActionsTemplate", imageSizeQueryParam: "imageSizeQueryParam", imageSizes: "imageSizes", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute], dataSource: "dataSource" }, outputs: { modeChange: "modeChange", onDeleteRow: "onDeleteRow", onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore", slideshowOpened: "slideshowOpened", slideshowClosed: "slideshowClosed" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "inlineSlideshow", first: true, predicate: ["inlineSlideshow"], descendants: true }], ngImport: i0, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      [actionsTemplate]=\"slideshowActionsTemplate\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [showCloseButton]=\"showCloseButton\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        [actionsTemplate]=\"slideshowActionsTemplate\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"onSlidePrevious($event)\"\n        (nextSlide)=\"onSlideNext($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i4$1.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.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.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonPopover, selector: "ion-popover" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$2.IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "imageSizeQueryParam", "imageSize", "imageVersionQueryParam", "imageVersionFn", "enableLoop", "canFetchMore", "actionsTemplate", "showCloseButton"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "slideChanges", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      [actionsTemplate]=\"slideshowActionsTemplate\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        [actionsTemplate]=\"slideshowActionsTemplate\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
+            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      [actionsTemplate]=\"slideshowActionsTemplate\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [showCloseButton]=\"showCloseButton\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        [actionsTemplate]=\"slideshowActionsTemplate\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"onSlidePrevious($event)\"\n        (nextSlide)=\"onSlideNext($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
         }], ctorParameters: () => [{ type: ImageService }, { type: i2$2.Platform }, { type: i2$2.AlertController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Optional
                 }, {
@@ -30480,6 +30667,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }], canFetchMore: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], showCloseButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], dataSource: [{
                 type: Input
             }], zoomModal: [{
@@ -31770,9 +31960,10 @@ class InMemoryEntitiesService extends StartableObservableService {
             if (nextOffset < total) {
                 res.fetchMore = async () => {
                     const res = await this.loadAll(nextOffset, size, sortBy, sortDirection, filter, { ...opts, updateHiddenData: false });
-                    // Update hidden data (remove new fetched item)
+                    // Update hidden data (remove new fetched items, by equals and NOT by object
+                    // identity: onLoad() may have transformed/copied the entities — issue #2128)
                     if (res.data?.length) {
-                        this._hiddenData = this._hiddenData?.filter((item) => !res.data.includes(item));
+                        this._hiddenData = this._hiddenData?.filter((item) => !res.data.some((fetchedItem) => this.equals(fetchedItem, item)));
                     }
                     return res;
                 };
@@ -31800,8 +31991,15 @@ class InMemoryEntitiesService extends StartableObservableService {
         this.markAsSaving();
         try {
             // Restore hidden data
-            if (isNotEmptyArray(this._hiddenData))
-                data = data.concat(...this._hiddenData);
+            if (isNotEmptyArray(this._hiddenData)) {
+                // Concatenate hidden data, WITHOUT duplicates:
+                // an entity can be present both in the visible data and in _hiddenData
+                // (e.g. after fetchMore() when onLoad() transforms entities, which breaks
+                // removal by object identity). Saving it twice would duplicate it (issue #2128).
+                // The visible occurrence is kept, as it holds the latest changes.
+                const visibleData = data.slice();
+                data = visibleData.concat(this._hiddenData.filter((hiddenItem) => !visibleData.some((item) => this.equals(item, hiddenItem))));
+            }
             if (this._onSaveFn) {
                 const res = this._onSaveFn(data);
                 data = res instanceof Promise ? await res : res;
@@ -35096,11 +35294,11 @@ class MenuComponent {
         this.menuService.togglePinned(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MenuComponent, deps: [{ token: AccountService }, { token: i2$2.NavController }, { token: i2$2.MenuController }, { token: i2$2.ModalController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: i1$5.Router }, { token: ENVIRONMENT }, { token: APP_BASE_HREF, optional: true }, { token: i1$5.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MenuComponent, isStandalone: false, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu #menuElement [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item mat-icon svg,ion-menu ion-content ion-list ion-item ion-icon svg{fill:currentColor!important}ion-menu ion-content ion-list ion-item mat-icon[slot=start],ion-menu ion-content ion-list ion-item ion-icon[slot=start]{-webkit-margin-end:32px;margin-inline-end:32px}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item ion-label{white-space:break-spaces!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar{--ion-safe-area-bottom: 0}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { 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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.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.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.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "directive", type: i2$2.IonRouterLink, selector: ":not(a):not(area)[routerLink]" }, { 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.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { 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: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$2.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$3.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MenuComponent, isStandalone: false, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu #menuElement [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar:first-of-type,ion-menu ion-header mat-toolbar:first-of-type{position:relative;padding-top:var(--ion-safe-area-top, 0)}ion-menu ion-header ion-toolbar:first-of-type:before,ion-menu ion-header mat-toolbar:first-of-type:before{content:\"\";position:absolute;top:0;left:0;right:0;height:var(--ion-safe-area-top, 0);pointer-events:none;background-color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item mat-icon svg,ion-menu ion-content ion-list ion-item ion-icon svg{fill:currentColor!important}ion-menu ion-content ion-list ion-item mat-icon[slot=start],ion-menu ion-content ion-list ion-item ion-icon[slot=start]{-webkit-margin-end:32px;margin-inline-end:32px}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item ion-label{white-space:break-spaces!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar{--ion-safe-area-bottom: 0}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { 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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.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.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.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "directive", type: i2$2.IonRouterLink, selector: ":not(a):not(area)[routerLink]" }, { 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.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { 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: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$2.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$3.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu #menuElement [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item mat-icon svg,ion-menu ion-content ion-list ion-item ion-icon svg{fill:currentColor!important}ion-menu ion-content ion-list ion-item mat-icon[slot=start],ion-menu ion-content ion-list ion-item ion-icon[slot=start]{-webkit-margin-end:32px;margin-inline-end:32px}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item ion-label{white-space:break-spaces!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar{--ion-safe-area-bottom: 0}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
+            args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu #menuElement [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar:first-of-type,ion-menu ion-header mat-toolbar:first-of-type{position:relative;padding-top:var(--ion-safe-area-top, 0)}ion-menu ion-header ion-toolbar:first-of-type:before,ion-menu ion-header mat-toolbar:first-of-type:before{content:\"\";position:absolute;top:0;left:0;right:0;height:var(--ion-safe-area-top, 0);pointer-events:none;background-color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item mat-icon svg,ion-menu ion-content ion-list ion-item ion-icon svg{fill:currentColor!important}ion-menu ion-content ion-list ion-item mat-icon[slot=start],ion-menu ion-content ion-list ion-item ion-icon[slot=start]{-webkit-margin-end:32px;margin-inline-end:32px}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item ion-label{white-space:break-spaces!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar{--ion-safe-area-bottom: 0}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$2.NavController }, { type: i2$2.MenuController }, { type: i2$2.ModalController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: MenuService }, { type: i1$5.Router }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -51056,8 +51254,15 @@ class UsersPage extends AppTable {
         // Restore filter from settings, or load all
         this.restoreFilterOrLoad();
     }
-    applyFilterAndClosePanel(event) {
+    applyFilterForm(event) {
+        // Apply the current form value now (the valueChanges listener is debounced, and may not have updated the filter yet)
+        const filter = PersonFilter.fromObject(this.filterForm.value);
+        this.filterCriteriaCount = filter.countNotEmptyCriteria();
+        this.setFilter(filter, { emitEvent: false });
         this.emitRefresh();
+    }
+    applyFilterAndClosePanel(event) {
+        this.applyFilterForm(event);
         this.filterExpansionPanel.close();
     }
     resetFilter(event) {
@@ -51206,11 +51411,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: i1$6.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)=\"emitRefresh()\">\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      [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$5.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: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.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 }], 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$5.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: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.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)=\"emitRefresh()\">\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      [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                  [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: i1$6.ValidatorService }, { type: ConfigService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_PERSON_SERVICE]
@@ -53779,10 +53984,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }]
         }] });
 
+// Sample documents (with their MIME type), used to generate files of many types
+const SAMPLE_DOCUMENTS = [
+    { name: 'report', extension: 'pdf', type: 'application/pdf' },
+    { name: 'letter', extension: 'docx', type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
+    { name: 'letter', extension: 'odt', type: 'application/vnd.oasis.opendocument.text' },
+    { name: 'data', extension: 'xlsx', type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
+    { name: 'data', extension: 'ods', type: 'application/vnd.oasis.opendocument.spreadsheet' },
+    { name: 'data', extension: 'csv', type: 'text/csv' },
+    { name: 'slides', extension: 'pptx', type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
+    { name: 'slides', extension: 'odp', type: 'application/vnd.oasis.opendocument.presentation' },
+    { name: 'archive', extension: 'zip', type: 'application/zip' },
+    { name: 'config', extension: 'json', type: 'application/json' },
+    { name: 'notes', extension: 'txt', type: 'text/plain' },
+    { name: 'video', extension: 'mp4', type: 'video/mp4' },
+    { name: 'unknown', extension: 'xyz', type: '' },
+];
 class UploadFileTestingPage {
     popoverController;
-    constructor(popoverController) {
+    cd;
+    uploader;
+    fileCount = 300;
+    imagesOnly = false;
+    instantUpload = true;
+    maxParallelUpload = null; // Empty = unlimited
+    generating = false;
+    /** Read and resize an image (same as the image service, used by the image gallery) */
+    readImageFn = (file) => ImagesUtils.readAsDataURL(file, { maxWidth: 1024, maxHeight: 1024 });
+    /** Read images (to get a thumbnail), and simulate the upload of other files */
+    uploadAnyFileFn = (file) => FileTypeUtils.getKindByFile(file) === 'image' ? this.readImageFn(file) : this.uploadFile(file, { interval: 50 });
+    constructor(popoverController, cd) {
         this.popoverController = popoverController;
+        this.cd = cd;
+    }
+    /**
+     * Generate many files, then add them to the uploader (like a user selection of many files).
+     * If "images only": generate only images (JPEG), otherwise mix images and documents of many types (PDF, MS Office, LibreOffice...)
+     */
+    async addGeneratedFiles() {
+        this.generating = true;
+        this.cd.markForCheck();
+        try {
+            const files = [];
+            const count = Math.max(1, +this.fileCount || 1);
+            for (let i = 0; i < count; i++) {
+                files.push(await this.generateFile(i));
+            }
+            console.info(`[upload-file-testing] Adding ${files.length} generated files...`);
+            this.uploader.fileBrowseHandler(files);
+        }
+        finally {
+            this.generating = false;
+            this.cd.markForCheck();
+        }
+    }
+    generateFile(index) {
+        // One image, then one document of each type (if not "images only")
+        const sampleIndex = this.imagesOnly ? -1 : (index % (SAMPLE_DOCUMENTS.length + 1)) - 1;
+        if (sampleIndex === -1)
+            return this.generateImageFile(index);
+        const { name, extension, type } = SAMPLE_DOCUMENTS[sampleIndex];
+        const fileName = `${name}-${index + 1}.${extension}`;
+        return Promise.resolve(new File([`Sample content of ${fileName}`], fileName, { type }));
+    }
+    generateImageFile(index, width = 1600, height = 1200) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, width, height);
+        gradient.addColorStop(0, `hsl(${(index * 37) % 360}, 70%, 50%)`);
+        gradient.addColorStop(1, '#222428');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+        ctx.fillStyle = '#ffffff';
+        ctx.font = `bold ${Math.round(height / 4)}px sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(`#${index + 1}`, width / 2, height / 2);
+        return new Promise((resolve) => canvas.toBlob((blob) => resolve(new File([blob], `photo-${index + 1}.jpg`, { type: 'image/jpeg' })), 'image/jpeg', 0.9));
     }
     async showPopover(event, opts) {
         const { data } = await FilesUtils.showUploadPopover(this.popoverController, event, {
@@ -53797,12 +54077,13 @@ class UploadFileTestingPage {
      * Simulate a upload function, with progression
      *
      * @param file
+     * @param opts interval (in ms) between two progression steps (default: 250ms)
      */
-    uploadFile(file) {
+    uploadFile(file, opts) {
         const $stop = new Subject();
         const loadStep = file.size / 10;
         let loaded = 0;
-        return timer(0, 250).pipe(takeUntil($stop), map(() => {
+        return timer(0, opts?.interval ?? 250).pipe(takeUntil($stop), map(() => {
             // pause in middle
             // if (loaded > 0) return { type: HttpEventType.UploadProgress, total: file.size, loaded };
             loaded += loadStep;
@@ -53821,13 +54102,16 @@ class UploadFileTestingPage {
         await sleep(2000);
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingPage, deps: [{ token: i2$2.PopoverController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: UploadFileTestingPage, isStandalone: false, selector: "upload-file-testing", ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button\n    (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true, maxParallelUpload: 3 })\"\n    color=\"tertiary\"\n  >\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(max parallel upload)\n  </ion-button>\n</ion-content>\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.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingPage, deps: [{ token: i2$2.PopoverController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: UploadFileTestingPage, isStandalone: false, selector: "upload-file-testing", viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button\n    (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true, maxParallelUpload: 3 })\"\n    color=\"tertiary\"\n  >\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(max parallel upload)\n  </ion-button>\n\n  <p>Many files (an icon for each file type, and a thumbnail with a skeleton for images - as used by the image gallery):</p>\n\n  <!-- uploader options -->\n  <ion-item lines=\"none\">\n    <ion-input\n      id=\"max-parallel-upload\"\n      type=\"number\"\n      label=\"Max parallel upload\"\n      labelPlacement=\"stacked\"\n      placeholder=\"Unlimited\"\n      [(ngModel)]=\"maxParallelUpload\"\n      min=\"1\"\n    ></ion-input>\n    <ion-checkbox id=\"instant-upload\" slot=\"end\" labelPlacement=\"end\" [(ngModel)]=\"instantUpload\">Instant upload</ion-checkbox>\n    @if (!instantUpload) {\n      <ion-button id=\"upload-files\" slot=\"end\" color=\"tertiary\" [disabled]=\"!uploader.files.length\" (click)=\"uploader.uploadFiles()\">\n        Upload\n      </ion-button>\n    }\n  </ion-item>\n\n  <!-- generated files -->\n  <ion-item lines=\"none\">\n    <ion-input id=\"file-count\" type=\"number\" label=\"Generated files count\" labelPlacement=\"stacked\" [(ngModel)]=\"fileCount\" min=\"1\"></ion-input>\n    <ion-checkbox id=\"images-only\" slot=\"end\" labelPlacement=\"end\" [(ngModel)]=\"imagesOnly\">Images only</ion-checkbox>\n    <ion-button id=\"add-generated-files\" slot=\"end\" color=\"tertiary\" [disabled]=\"generating\" (click)=\"addGeneratedFiles()\">\n      @if (generating) {\n        <ion-spinner name=\"dots\"></ion-spinner>\n      } @else {\n        Generate and add files\n      }\n    </ion-button>\n    <ion-button slot=\"end\" fill=\"clear\" color=\"dark\" (click)=\"uploader.files = []\">Clear</ion-button>\n  </ion-item>\n\n  <!-- \"Images only\": accept only images (other files are rejected, e.g. a PDF dropped here) -->\n  <app-upload-file\n    #uploader\n    class=\"files-uploader\"\n    [uploadFn]=\"uploadAnyFileFn\"\n    [instantUpload]=\"instantUpload\"\n    [maxParallelUpload]=\"maxParallelUpload > 0 ? +maxParallelUpload : undefined\"\n    [showThumbnails]=\"true\"\n    [autoHideDropArea]=\"false\"\n    [fileExtension]=\"imagesOnly ? '.png, .jpg' : undefined\"\n  ></app-upload-file>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { 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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "fileExtensionsExcluded", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload", "maxFileSizeMb", "autoHideDropArea", "showThumbnails"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'upload-file-testing', standalone: false, template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button\n    (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true, maxParallelUpload: 3 })\"\n    color=\"tertiary\"\n  >\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(max parallel upload)\n  </ion-button>\n</ion-content>\n" }]
-        }], ctorParameters: () => [{ type: i2$2.PopoverController }] });
+            args: [{ selector: 'upload-file-testing', standalone: false, template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true })\" color=\"tertiary\">\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button\n    (click)=\"showPopover($event, { uniqueFile: false, instantUpload: true, maxParallelUpload: 3 })\"\n    color=\"tertiary\"\n  >\n    <span>{{ 'COMMON.BTN_IMPORT' | translate }}</span>\n    &nbsp;(max parallel upload)\n  </ion-button>\n\n  <p>Many files (an icon for each file type, and a thumbnail with a skeleton for images - as used by the image gallery):</p>\n\n  <!-- uploader options -->\n  <ion-item lines=\"none\">\n    <ion-input\n      id=\"max-parallel-upload\"\n      type=\"number\"\n      label=\"Max parallel upload\"\n      labelPlacement=\"stacked\"\n      placeholder=\"Unlimited\"\n      [(ngModel)]=\"maxParallelUpload\"\n      min=\"1\"\n    ></ion-input>\n    <ion-checkbox id=\"instant-upload\" slot=\"end\" labelPlacement=\"end\" [(ngModel)]=\"instantUpload\">Instant upload</ion-checkbox>\n    @if (!instantUpload) {\n      <ion-button id=\"upload-files\" slot=\"end\" color=\"tertiary\" [disabled]=\"!uploader.files.length\" (click)=\"uploader.uploadFiles()\">\n        Upload\n      </ion-button>\n    }\n  </ion-item>\n\n  <!-- generated files -->\n  <ion-item lines=\"none\">\n    <ion-input id=\"file-count\" type=\"number\" label=\"Generated files count\" labelPlacement=\"stacked\" [(ngModel)]=\"fileCount\" min=\"1\"></ion-input>\n    <ion-checkbox id=\"images-only\" slot=\"end\" labelPlacement=\"end\" [(ngModel)]=\"imagesOnly\">Images only</ion-checkbox>\n    <ion-button id=\"add-generated-files\" slot=\"end\" color=\"tertiary\" [disabled]=\"generating\" (click)=\"addGeneratedFiles()\">\n      @if (generating) {\n        <ion-spinner name=\"dots\"></ion-spinner>\n      } @else {\n        Generate and add files\n      }\n    </ion-button>\n    <ion-button slot=\"end\" fill=\"clear\" color=\"dark\" (click)=\"uploader.files = []\">Clear</ion-button>\n  </ion-item>\n\n  <!-- \"Images only\": accept only images (other files are rejected, e.g. a PDF dropped here) -->\n  <app-upload-file\n    #uploader\n    class=\"files-uploader\"\n    [uploadFn]=\"uploadAnyFileFn\"\n    [instantUpload]=\"instantUpload\"\n    [maxParallelUpload]=\"maxParallelUpload > 0 ? +maxParallelUpload : undefined\"\n    [showThumbnails]=\"true\"\n    [autoHideDropArea]=\"false\"\n    [fileExtension]=\"imagesOnly ? '.png, .jpg' : undefined\"\n  ></app-upload-file>\n</ion-content>\n" }]
+        }], ctorParameters: () => [{ type: i2$2.PopoverController }, { type: i0.ChangeDetectorRef }], propDecorators: { uploader: [{
+                type: ViewChild,
+                args: ['uploader', { static: true }]
+            }] } });
 
 const routes$b = [
     {
@@ -53838,13 +54122,13 @@ const routes$b = [
 ];
 class UploadFileTestingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingModule, declarations: [UploadFileTestingPage], imports: [CommonModule, SharedIonicModule, TranslatePipe, i1$5.RouterModule], exports: [RouterModule, UploadFileTestingPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingModule, imports: [CommonModule, SharedIonicModule, RouterModule.forChild(routes$b), RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingModule, declarations: [UploadFileTestingPage], imports: [CommonModule, FormsModule, SharedIonicModule, SharedModule, TranslatePipe, i1$5.RouterModule], exports: [RouterModule, UploadFileTestingPage] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingModule, imports: [CommonModule, FormsModule, SharedIonicModule, SharedModule, RouterModule.forChild(routes$b), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadFileTestingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedIonicModule, TranslatePipe, RouterModule.forChild(routes$b)],
+                    imports: [CommonModule, FormsModule, SharedIonicModule, SharedModule, TranslatePipe, RouterModule.forChild(routes$b)],
                     declarations: [UploadFileTestingPage],
                     exports: [RouterModule, UploadFileTestingPage],
                 }]
@@ -53873,17 +54157,39 @@ let ImageAttachmentFilter = class ImageAttachmentFilter extends EntityFilter {
 ImageAttachmentFilter = __decorate([
     EntityClass({ typename: 'ImageAttachmentFilterVO' })
 ], ImageAttachmentFilter);
+const TESTING_IMAGE_COLORS = ['#144391', '#75c4fd', '#5b5ef4', '#10dc60', '#ffce00', '#ff8d00', '#f53d3d'];
+/**
+ * Generate a testing image (a JPEG data URL), with a gradient background and a label
+ */
+function createTestingImageDataUrl(index, opts) {
+    const width = opts?.width ?? 800;
+    const height = opts?.height ?? 600;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return null;
+    // Gradient background
+    const color = TESTING_IMAGE_COLORS[index % TESTING_IMAGE_COLORS.length];
+    const gradient = ctx.createLinearGradient(0, 0, width, height);
+    gradient.addColorStop(0, color);
+    gradient.addColorStop(1, '#222428');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+    // Label (useful to check the rotation and the crop)
+    ctx.fillStyle = '#ffffff';
+    ctx.font = `bold ${Math.round(height / 6)}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(`#${index + 1}`, width / 2, height / 2);
+    return canvas.toDataURL('image/jpeg', 0.8);
+}
 class ImageAttachmentService extends StartableService {
     platform;
-    $images = new BehaviorSubject([
-        ImageAttachment.fromObject({ id: 0, url: 'https://test.sumaris.net/assets/img/bg/ray-1.jpg', title: 'ray #1' }),
-        ImageAttachment.fromObject({ id: 1, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #2' }),
-        ImageAttachment.fromObject({ id: 2, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #3' }),
-        ImageAttachment.fromObject({ id: 3, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #4' }),
-        ImageAttachment.fromObject({ id: 4, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #5' }),
-        ImageAttachment.fromObject({ id: 5, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #6' }),
-        ImageAttachment.fromObject({ id: 6, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #7' }),
-    ]);
+    $images = new BehaviorSubject(
+    // Generate images locally (no remote server needed, e.g. for e2e tests, or when offline)
+    Array.from({ length: 7 }, (_, index) => ImageAttachment.fromObject({ id: index, dataUrl: createTestingImageDataUrl(index), title: `ray #${index + 1}` })));
     constructor(platform) {
         super(platform);
         this.platform = platform;
@@ -53938,6 +54244,7 @@ class GalleryTestPage {
     enableSlideshowLoop = true;
     debug = false;
     slideToIndex;
+    outsideClickCount = 0;
     constructor(dataService, route) {
         this.dataService = dataService;
         this.route = route;
@@ -53967,11 +54274,11 @@ class GalleryTestPage {
         this.debug = !this.debug;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GalleryTestPage, isStandalone: false, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n\n    <ion-buttons slot=\"end\">\n      @if (gallery.slideshowMode === 'inline') {\n        <ion-input [(ngModel)]=\"slideToIndex\" placeholder=\"Slide index\">\n\n        </ion-input>\n        <ion-button [disabled]=\"!gallery.isSlideshowVisible\"\n                    (click)=\"gallery.slideTo(slideToIndex)\">Ok</ion-button>\n      }\n\n      <button mat-icon-button [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"toggleZoomPresentation()\">\n      <mat-icon>{{ slideshowMode === 'modal' ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_MODAL_ZOOM' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleSlideshowLoop()\">\n      <mat-icon>{{ enableSlideshowLoop ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_LOOP' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleDebug()\">\n      <mat-icon>{{ debug ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [slideshowMode]=\"slideshowMode\"\n    [enableSlideshowLoop]=\"enableSlideshowLoop\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$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.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.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { 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.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "slideshowActionsTemplate", "imageSizeQueryParam", "imageSizes", "imageVersionQueryParam", "imageVersionFn", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "slideshowMode", "inlineZoomHeight", "enableSlideshowLoop", "canFetchMore", "dataSource"], outputs: ["modeChange", "onDeleteRow", "onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "clickCard", "previousSlide", "nextSlide", "slideChanges", "fetchMore", "slideshowOpened", "slideshowClosed"] }, { 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: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GalleryTestPage, isStandalone: false, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n\n    <ion-buttons slot=\"end\">\n      @if (gallery.slideshowMode === 'inline') {\n        <ion-input [(ngModel)]=\"slideToIndex\" placeholder=\"Slide index\">\n\n        </ion-input>\n        <ion-button [disabled]=\"!gallery.isSlideshowVisible\"\n                    (click)=\"gallery.slideTo(slideToIndex)\">Ok</ion-button>\n      }\n\n      <!-- A button outside the gallery (used by e2e tests, to check the inline slideshow does not block the page) -->\n      <button id=\"outside-gallery-button\" mat-icon-button title=\"Outside button\" (click)=\"outsideClickCount = outsideClickCount + 1\">\n        <mat-icon [matBadge]=\"outsideClickCount || null\" matBadgeSize=\"small\" matBadgeColor=\"accent\">touch_app</mat-icon>\n      </button>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"toggleZoomPresentation()\">\n      <mat-icon>{{ slideshowMode === 'modal' ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_MODAL_ZOOM' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleSlideshowLoop()\">\n      <mat-icon>{{ enableSlideshowLoop ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_LOOP' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleDebug()\">\n      <mat-icon>{{ debug ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [slideshowMode]=\"slideshowMode\"\n    [enableSlideshowLoop]=\"enableSlideshowLoop\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$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.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.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { 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.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "slideshowActionsTemplate", "imageSizeQueryParam", "imageSizes", "imageVersionQueryParam", "imageVersionFn", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "slideshowMode", "inlineZoomHeight", "enableSlideshowLoop", "canFetchMore", "showCloseButton", "dataSource"], outputs: ["modeChange", "onDeleteRow", "onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "clickCard", "previousSlide", "nextSlide", "slideChanges", "fetchMore", "slideshowOpened", "slideshowClosed"] }, { 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: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GalleryTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gallery-test-page', providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n\n    <ion-buttons slot=\"end\">\n      @if (gallery.slideshowMode === 'inline') {\n        <ion-input [(ngModel)]=\"slideToIndex\" placeholder=\"Slide index\">\n\n        </ion-input>\n        <ion-button [disabled]=\"!gallery.isSlideshowVisible\"\n                    (click)=\"gallery.slideTo(slideToIndex)\">Ok</ion-button>\n      }\n\n      <button mat-icon-button [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"toggleZoomPresentation()\">\n      <mat-icon>{{ slideshowMode === 'modal' ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_MODAL_ZOOM' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleSlideshowLoop()\">\n      <mat-icon>{{ enableSlideshowLoop ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_LOOP' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleDebug()\">\n      <mat-icon>{{ debug ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [slideshowMode]=\"slideshowMode\"\n    [enableSlideshowLoop]=\"enableSlideshowLoop\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n" }]
+            args: [{ selector: 'app-gallery-test-page', providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n\n    <ion-buttons slot=\"end\">\n      @if (gallery.slideshowMode === 'inline') {\n        <ion-input [(ngModel)]=\"slideToIndex\" placeholder=\"Slide index\">\n\n        </ion-input>\n        <ion-button [disabled]=\"!gallery.isSlideshowVisible\"\n                    (click)=\"gallery.slideTo(slideToIndex)\">Ok</ion-button>\n      }\n\n      <!-- A button outside the gallery (used by e2e tests, to check the inline slideshow does not block the page) -->\n      <button id=\"outside-gallery-button\" mat-icon-button title=\"Outside button\" (click)=\"outsideClickCount = outsideClickCount + 1\">\n        <mat-icon [matBadge]=\"outsideClickCount || null\" matBadgeSize=\"small\" matBadgeColor=\"accent\">touch_app</mat-icon>\n      </button>\n\n      <button mat-icon-button [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"toggleZoomPresentation()\">\n      <mat-icon>{{ slideshowMode === 'modal' ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_MODAL_ZOOM' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleSlideshowLoop()\">\n      <mat-icon>{{ enableSlideshowLoop ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_LOOP' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleDebug()\">\n      <mat-icon>{{ debug ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [slideshowMode]=\"slideshowMode\"\n    [enableSlideshowLoop]=\"enableSlideshowLoop\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: ImageAttachmentService }, { type: i1$5.ActivatedRoute }] });
 
 const routes$a = [
@@ -56886,5 +57193,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_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_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, 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, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GitlabUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, ION_ICONS, IPosition, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImageSizes, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, 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, 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, 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, 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, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, initializeSharedModule, interpolateString, intersectArrays, isAndroid, 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, 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, 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_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_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, 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, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, 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, IMAGE_DEFAULTS, ION_ICONS, IPosition, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImageSizes, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, 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, 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, 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, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, initializeSharedModule, interpolateString, intersectArrays, isAndroid, 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, 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, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map