npm - @sumaris-net/ngx-components - Versions diffs - 18.26.13 → 18.26.15 - Mend

@sumaris-net/ngx-components 18.26.13 → 18.26.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

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

@@ -149,6 +149,7 @@ import { Style, StatusBar } from '@capacitor/status-bar';
 import { Browser } from '@capacitor/browser';
 import { Clipboard } from '@capacitor/clipboard';
 import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
+import { Device } from '@capacitor/device';
 import * as i2$6 from '@angular/cdk/platform';
 import * as i3$5 from '@angular/cdk/clipboard';
 import { select } from '@rx-angular/state/selections';
@@ -7018,6 +7019,7 @@ class CapacitorPlugins {
     static StatusBar = 'StatusBar';
     static Keyboard = 'Keyboard';
     static EdgeToEdge = 'EdgeToEdge';
+    static Device = 'Device';
     //static readonly BarcodeScanner = 'BarcodeScanner';
     static isAvailable = Capacitor.isPluginAvailable;
 }
@@ -8289,6 +8291,28 @@ function isMobile(win) {
 function isPrint(win) {
     return matchMedia(win, 'print');
 }
+function isWebAnimationsSupported() {
+    if (typeof document === 'undefined' || typeof Element === 'undefined') {
+        return false;
+    }
+    if (typeof Element.prototype.animate !== 'function') {
+        return false;
+    }
+    try {
+        // Test minimal
+        const el = document.createElement('div');
+        // On n’append plus forcément au body
+        const animation = el.animate([{ opacity: 0.5, offset: 0.5 }, { opacity: 1 }], { duration: 1 });
+        animation.cancel();
+        console.debug('[app] Web animations are well supported');
+        return true;
+    }
+    catch {
+        // Continue
+    }
+    console.warn('[app] Web animations are not supported');
+    return false;
+}
 class TreeItemEntityUtils {
     static forward(node, filterFn, loopCount) {
@@ -19504,8 +19528,15 @@ class VersionUtils {
  * @returns {number} -1 if v1 < v2, 0 if equal, 1 if v1 > v2
  */
 function compareVersionNumbers(v1, v2, comparePrerelease = false) {
-    const m1 = v1.match(SEMVER_2_REGEXP);
-    const m2 = v2.match(SEMVER_2_REGEXP);
+    const padVersion = (v) => {
+        const parts = v.split('.');
+        while (parts.length < 3) {
+            parts.push('0');
+        }
+        return parts.join('.');
+    };
+    const m1 = padVersion(v1).match(SEMVER_2_REGEXP);
+    const m2 = padVersion(v2).match(SEMVER_2_REGEXP);
     if (!m1 || !m2) {
         return NaN;
     }
@@ -26193,7 +26224,7 @@ class PlatformService extends StartableService {
     }
     download(request) {
         if (!request || !request.uri)
-            throw new Error("Missing argument 'request' or 'request.uri'");
+            throw new Error('Missing argument \'request\' or \'request.uri\'');
         if (this.canDownload) {
             // Check if not already downloading file
             let job$ = this._downloadingJobs.get(request.uri);
@@ -26443,7 +26474,7 @@ class PlatformService extends StartableService {
     }
     showToast(opts) {
         if (!this.toastController)
-            throw new Error("Missing toastController in component's constructor");
+            throw new Error('Missing toastController in component\'s constructor');
         return new Promise((resolve) => Toasts.show(this.toastController, this.translate, {
             ...opts,
             onWillPresent: (t) => resolve(t),
@@ -26452,6 +26483,18 @@ class PlatformService extends StartableService {
     async closeToast(id) {
         return this.toastController?.dismiss(null, null, id);
     }
+    async getDeviceInfo() {
+        if (!this.isApp())
+            return null;
+        try {
+            return await Device.getInfo();
+        }
+        catch (err) {
+            const logMessage = `Error while calling Device plugin: ${err.message || err}\n${err?.originalStack || JSON.stringify(err)}`;
+            console.error('[platform] ' + logMessage);
+            this._logger?.error('deviceInfo', logMessage);
+        }
+    }
     /* -- protected methods -- */
     async configureTheme(mobile, win = window) {
         // Listen for changes to settings dark mode
@@ -26480,19 +26523,36 @@ class PlatformService extends StartableService {
         console.info('[platform] Configuring Capacitor plugins...');
         let pluginName;
         try {
+            // 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()) {
-                await EdgeToEdge.enable();
+                const enabled = VersionUtils.isCompatible('15', deviceInfo?.osVersion)
+                    && !VersionUtils.isCompatible('17', deviceInfo?.osVersion);
+                console.debug(`[platform] Android EdgeToEdge ${enabled ? 'enabled' : 'disabled'} - OS version: ${deviceInfo?.osVersion}`);
+                if (enabled) {
+                    await EdgeToEdge.enable();
+                }
+                else {
+                    await EdgeToEdge.disable();
+                }
             }
+            // Avoid statusbar overlays on iOS and Android 14+
             pluginName = CapacitorPlugins.StatusBar;
             if (this.isApp()) {
-                // Avoid overlays (Android 15 or iOS)
-                await StatusBar.setOverlaysWebView({ overlay: false });
+                const statusBarOverlay = this.isAndroid() && VersionUtils.isCompatible('17', deviceInfo?.osVersion);
+                console.debug(`[platform] StatusBar overlay ${statusBarOverlay ? 'enabled' : 'disabled'} - OS version: ${deviceInfo?.osVersion}`);
+                await StatusBar.setOverlaysWebView({ overlay: statusBarOverlay });
             }
             // Hide accessory bar (iOS only)
             if (this.isApp() && this.isIOS()) {
                 pluginName = CapacitorPlugins.Keyboard;
                 // Let Capacitor config handle accessory bar
+                // Comment out, because we sometime we need the accessory bar
                 //await Keyboard.setAccessoryBarVisible({ isVisible: false });
             }
         }
@@ -26572,7 +26632,7 @@ class PlatformService extends StartableService {
             console.info('[platform] Checking remote app version...');
         const actualVersion = this.environment.version;
         if (isNilOrBlank(actualVersion)) {
-            console.error("[platform] Missing required value for 'environment.version'. Cannot check remote app version.");
+            console.error('[platform] Missing required value for \'environment.version\'. Cannot check remote app version.');
             this.checkAppVersionTimer?.unsubscribe(); // Stop timer if exists
             return; // Skip
         }
@@ -29309,11 +29369,11 @@ class AppImageGallerySlideshowComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, deps: [{ token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: "selectedIndex", mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", imageSizeQueryParam: "imageSizeQueryParam", modalImageSize: "modalImageSize", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", 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  <ng-container *ngIf=\"!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  </ng-container>\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      <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\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          @if (!readOnly) {\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\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"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\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n  <swiper-slide>\n    <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n      <!-- the image -->\n      @if (image?.url) {\n        <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n      } @else {\n        <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n      }\n\n      <!-- crop overlay: only rendered for the active slide -->\n      @if (!readOnly && 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</ng-template>\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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: "selectedIndex", mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", imageSizeQueryParam: "imageSizeQueryParam", modalImageSize: "modalImageSize", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", 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  <ng-container *ngIf=\"!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  </ng-container>\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      <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\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          @if (!readOnly) {\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\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"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\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n  <swiper-slide>\n    <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n      <!-- the image -->\n      @if (image?.url) {\n        <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n      } @else {\n        <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n      }\n\n      <!-- crop overlay: only rendered for the active slide -->\n      @if (!readOnly && 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</ng-template>\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:rgba(0,0,0,.5);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;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px rgba(0,0,0,.6)}: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;top:0;right:0;bottom:0;left:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:rgba(255,255,255,.45)}: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 rgba(0,0,0,.5);transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, 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  <ng-container *ngIf=\"!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  </ng-container>\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      <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\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          @if (!readOnly) {\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\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"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\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n  <swiper-slide>\n    <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n      <!-- the image -->\n      @if (image?.url) {\n        <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n      } @else {\n        <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n      }\n\n      <!-- crop overlay: only rendered for the active slide -->\n      @if (!readOnly && 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</ng-template>\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, 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  <ng-container *ngIf=\"!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  </ng-container>\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      <ng-container *ngTemplateOutlet=\"slideTemplate; context: { image: row.currentData, index }\"></ng-container>\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          @if (!readOnly) {\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\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"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\n<ng-template #slideTemplate let-image=\"image\" let-index=\"index\">\n  <swiper-slide>\n    <div class=\"swiper-zoom-container\" [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n      <!-- the image -->\n      @if (image?.url) {\n        <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n      } @else {\n        <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n      }\n\n      <!-- crop overlay: only rendered for the active slide -->\n      @if (!readOnly && 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</ng-template>\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:rgba(0,0,0,.5);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;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px rgba(0,0,0,.6)}: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;top:0;right:0;bottom:0;left:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:rgba(255,255,255,.45)}: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 rgba(0,0,0,.5);transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { rows: [{
                 type: Input
             }], selectedIndex: [{
@@ -29887,11 +29947,11 @@ class AppImageGalleryComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i2$1.Platform }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", 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.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                      } @else {\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ 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      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\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      [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        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\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 translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "editionFormat", "editionQuality", "imageSizeQueryParam", "modalImageSize", "enableLoop", "canFetchMore"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", 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.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                      } @else {\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ 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      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\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      [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        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\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 translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "editionFormat", "editionQuality", "imageSizeQueryParam", "modalImageSize", "enableLoop", "canFetchMore"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "@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.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                      } @else {\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ 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      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\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      [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        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\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 translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
+            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, 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.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                      } @else {\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ 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      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\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      [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        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\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 translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:#000}\n"] }]
         }], ctorParameters: () => [{ type: ImageService }, { type: i2$1.Platform }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Optional
                 }, {
@@ -34400,11 +34460,11 @@ class MenuComponent {
         this.menuService.togglePinned(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, deps: [{ token: AccountService }, { token: i2$1.NavController }, { token: i2$1.MenuController }, { token: i2$1.ModalController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: i1$7.Router }, { token: ENVIRONMENT }, { token: APP_BASE_HREF, optional: true }, { token: i1$7.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MenuComponent, 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 [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @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              <img\n                *ngIf=\"logo; else noLogo\"\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              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\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\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\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\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          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\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        <ion-list lines=\"none\" *ngIf=\"!loading\">\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      </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]=\"!showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\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        <span *ngIf=\"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  } @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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\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 #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\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\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 ::ng-deep mat-icon svg{fill:currentColor;stroke:currentColor}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 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-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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$1.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i20.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MenuComponent, 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 [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @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              <img\n                *ngIf=\"logo; else noLogo\"\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              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\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\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\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\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          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\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        <ion-list lines=\"none\" *ngIf=\"!loading\">\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      </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]=\"!showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\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        <span *ngIf=\"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  } @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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\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 #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\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\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 ::ng-deep mat-icon svg{fill:currentColor;stroke:currentColor}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 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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$1.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i10$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i20.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @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              <img\n                *ngIf=\"logo; else noLogo\"\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              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\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\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\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\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          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\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        <ion-list lines=\"none\" *ngIf=\"!loading\">\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      </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]=\"!showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\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        <span *ngIf=\"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  } @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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\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 #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\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\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 ::ng-deep mat-icon svg{fill:currentColor;stroke:currentColor}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 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-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, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      <ion-toolbar *ngIf=\"!loading && isLogin; else notLogin\" @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              <img\n                *ngIf=\"logo; else noLogo\"\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              <ng-template #noLogo>\n                <span style=\"width: 108px\">{{ appName }}</span>\n              </ng-template>\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\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\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar\n          class=\"ion-padding\"\n          *ngIf=\"!loading\"\n          style=\"height: unset; display: block; margin: auto; text-align: center\"\n        >\n          <img\n            *ngIf=\"logo\"\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          <span *ngIf=\"!logo\" style=\"width: 150px\">{{ appName }}</span>\n        </mat-toolbar>\n      </ng-template>\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        <ion-list lines=\"none\" *ngIf=\"!loading\">\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      </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]=\"!showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\"\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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n      <ion-label *ngIf=\"item.cssClass !== 'flex-spacer'\">\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n      </ion-label>\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        <span *ngIf=\"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  } @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      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\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 #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\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\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 ::ng-deep mat-icon svg{fill:currentColor;stroke:currentColor}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 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$1.NavController }, { type: i2$1.MenuController }, { type: i2$1.ModalController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: MenuService }, { type: i1$7.Router }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -38409,11 +38469,11 @@ class FeedsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedsComponent, deps: [{ token: LocalSettingsService }, { token: ENVIRONMENT }, { token: APP_FEED_SERVICE, optional: true }, { token: AccountService }, { token: i2$1.AlertController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FeedsComponent, selector: "app-feed", inputs: { debug: "debug", mobile: "mobile", showHeader: "showHeader", showReadMoreButton: "showReadMoreButton", headerColor: "headerColor", cardColor: "cardColor", shape: "shape", class: "class", itemId: "itemId", filterItem: "filterItem", feeds: "feeds", urls: "urls", maxAgeInMonths: "maxAgeInMonths", maxContentLength: "maxContentLength" }, outputs: { editItem: "editItem", deleteItem: "deleteItem" }, host: { properties: { "class": "this.hostClass" } }, providers: [RxState], viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<!-- debug -->\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      urls: {{ urls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@let feeds = feeds$ | async;\n@let userId = userId$ | async;\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items | arrayFilter: filterItem; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n          class=\"feed-item-card\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openFeedItem(item, feed)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @let editable = canEditItem(item, userId, feed);\n          @if (editable || showReadMoreButton) {\n            @if (editable) {\n\n              <!-- Delete button (visible hover)-->\n              <button\n                mat-icon-button\n                (click)=\"onDeleteItem($event, item)\"\n                class=\"visible-hover ion-float-start\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              >\n                <mat-icon>delete</mat-icon>\n              </button>\n              <!-- Edit button (visible hover) -->\n              <ion-button\n                (click)=\"onEditItem($event, item)\"\n                class=\"visible-hover ion-float-start\" fill=\"clear\"\n              >\n                <mat-icon slot=\"start\">edit</mat-icon>\n<!--                <ion-icon name=\"pencil\" slot=\"start\"></ion-icon>-->\n                <ion-label translate>COMMON.BTN_EDIT</ion-label>\n              </ion-button>\n            }\n            @if (showReadMoreButton) {\n              <ion-button  (click)=\"openFeedItem(item, feed)\" class=\"ion-float-end\" fill=\"clear\">\n                <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n              </ion-button>\n            }\n          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<!-- Details modal -->\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [urls]=\"urls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:auto;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card.feed-item-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card.first{--top-radius: 0}.feed-content ion-card.feed-item-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header .tags{display:inline}.feed-content ion-card.feed-item-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card.feed-item-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}.feed-content ion-card.feed-item-card .visible-hover{opacity:0;transition:opacity .2s ease-in-out}.feed-content ion-card.feed-item-card:hover .visible-hover{opacity:1}\n"], dependencies: [{ kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$2.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: MarkdownDirective, selector: "markdown,[markdown]" }, { kind: "component", type: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }, { kind: "directive", type: FeedDirective, selector: "feed,[feed]", inputs: ["feed"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }, { kind: "pipe", type: MapPipe, name: "map" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FeedsComponent, selector: "app-feed", inputs: { debug: "debug", mobile: "mobile", showHeader: "showHeader", showReadMoreButton: "showReadMoreButton", headerColor: "headerColor", cardColor: "cardColor", shape: "shape", class: "class", itemId: "itemId", filterItem: "filterItem", feeds: "feeds", urls: "urls", maxAgeInMonths: "maxAgeInMonths", maxContentLength: "maxContentLength" }, outputs: { editItem: "editItem", deleteItem: "deleteItem" }, host: { properties: { "class": "this.hostClass" } }, providers: [RxState], viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<!-- debug -->\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      urls: {{ urls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@let feeds = feeds$ | async;\n@let userId = userId$ | async;\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items | arrayFilter: filterItem; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n          class=\"feed-item-card\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openFeedItem(item, feed)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @let editable = canEditItem(item, userId, feed);\n          @if (editable || showReadMoreButton) {\n            @if (editable) {\n\n              <!-- Delete button (visible hover)-->\n              <button\n                mat-icon-button\n                (click)=\"onDeleteItem($event, item)\"\n                class=\"visible-hover ion-float-start\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              >\n                <mat-icon>delete</mat-icon>\n              </button>\n              <!-- Edit button (visible hover) -->\n              <ion-button\n                (click)=\"onEditItem($event, item)\"\n                class=\"visible-hover ion-float-start\" fill=\"clear\"\n              >\n                <mat-icon slot=\"start\">edit</mat-icon>\n<!--                <ion-icon name=\"pencil\" slot=\"start\"></ion-icon>-->\n                <ion-label translate>COMMON.BTN_EDIT</ion-label>\n              </ion-button>\n            }\n            @if (showReadMoreButton) {\n              <ion-button  (click)=\"openFeedItem(item, feed)\" class=\"ion-float-end\" fill=\"clear\">\n                <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n              </ion-button>\n            }\n          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<!-- Details modal -->\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [urls]=\"urls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:auto;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card.feed-item-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card.first{--top-radius: 0}.feed-content ion-card.feed-item-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header .tags{display:inline}.feed-content ion-card.feed-item-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card.feed-item-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}.feed-content ion-card.feed-item-card .visible-hover{opacity:0;transition:opacity .2s ease-in-out}.feed-content ion-card.feed-item-card:hover .visible-hover{opacity:1}\n"], dependencies: [{ kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$2.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: MarkdownDirective, selector: "markdown,[markdown]" }, { kind: "component", type: FeedsComponent, selector: "app-feed", inputs: ["debug", "mobile", "showHeader", "showReadMoreButton", "headerColor", "cardColor", "shape", "class", "itemId", "filterItem", "feeds", "urls", "maxAgeInMonths", "maxContentLength"], outputs: ["editItem", "deleteItem"] }, { kind: "directive", type: FeedDirective, selector: "feed,[feed]", inputs: ["feed"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }, { kind: "pipe", type: MapPipe, name: "map" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-feed', providers: [RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- debug -->\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      urls: {{ urls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@let feeds = feeds$ | async;\n@let userId = userId$ | async;\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items | arrayFilter: filterItem; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n          class=\"feed-item-card\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openFeedItem(item, feed)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @let editable = canEditItem(item, userId, feed);\n          @if (editable || showReadMoreButton) {\n            @if (editable) {\n\n              <!-- Delete button (visible hover)-->\n              <button\n                mat-icon-button\n                (click)=\"onDeleteItem($event, item)\"\n                class=\"visible-hover ion-float-start\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              >\n                <mat-icon>delete</mat-icon>\n              </button>\n              <!-- Edit button (visible hover) -->\n              <ion-button\n                (click)=\"onEditItem($event, item)\"\n                class=\"visible-hover ion-float-start\" fill=\"clear\"\n              >\n                <mat-icon slot=\"start\">edit</mat-icon>\n<!--                <ion-icon name=\"pencil\" slot=\"start\"></ion-icon>-->\n                <ion-label translate>COMMON.BTN_EDIT</ion-label>\n              </ion-button>\n            }\n            @if (showReadMoreButton) {\n              <ion-button  (click)=\"openFeedItem(item, feed)\" class=\"ion-float-end\" fill=\"clear\">\n                <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n              </ion-button>\n            }\n          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<!-- Details modal -->\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [urls]=\"urls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:auto;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card.feed-item-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card.first{--top-radius: 0}.feed-content ion-card.feed-item-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header .tags{display:inline}.feed-content ion-card.feed-item-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card.feed-item-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}.feed-content ion-card.feed-item-card .visible-hover{opacity:0;transition:opacity .2s ease-in-out}.feed-content ion-card.feed-item-card:hover .visible-hover{opacity:1}\n"] }]
+            args: [{ selector: 'app-feed', providers: [RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- debug -->\n@if (debug) {\n  <app-debug [title]=\"'Feed'\">\n    <p>\n      hasFeeds?: {{ hasFeeds$ | async }}\n      <br />\n      urls: {{ urls$ | async | json }}\n      <br />\n      shape: {{ shape }}\n    </p>\n  </app-debug>\n}\n\n@let feeds = feeds$ | async;\n@let userId = userId$ | async;\n\n@if (feeds | isNotEmptyArray) {\n  <!-- top header -->\n  @if (showHeader && (feeds | arrayFirst); as feed) {\n    <ion-item lines=\"none\" [color]=\"headerColor\" class=\"feed-header shape-{{ shape }}\">\n      <ion-icon slot=\"start\" name=\"megaphone\"></ion-icon>\n      <ion-label>\n        <b>{{ feed.title || ('SOCIAL.FEED.NEWS' | translate) }}</b>\n      </ion-label>\n      <ion-button slot=\"end\" fill=\"clear\" (click)=\"openFeedHome()\" shape=\"\">\n        <ion-label translate>SOCIAL.FEED.SHOW_ALL_FEED</ion-label>\n        <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n      </ion-button>\n    </ion-item>\n  }\n\n  <div class=\"feed-content shape-{{ shape }} ion-no-padding\" [class.has-header]=\"showHeader\">\n    <!-- feeds -->\n    @for (feed of feeds; track feed.feed_url; let firstFeed = $first; let lastFeed = $last) {\n      <!-- items -->\n      @for (item of feed.items | arrayFilter: filterItem; track item.id; let firstItem = $first; let lastItem = $last) {\n        <ion-card\n          [class.first]=\"firstFeed && firstItem\"\n          [class.last]=\"lastFeed && lastItem\"\n          [color]=\"cardColor !== 'light-transparent' ? cardColor : undefined\"\n          class=\"feed-item-card\"\n        >\n          <ion-card-header>\n            <ion-card-subtitle style=\"vertical-align: middle\">\n              <!-- Authors -->\n              @for (author of item.authors || feed.authors; track author) {\n                @if (author.name || author.avatar) {\n                  <ion-chip (click)=\"openUrl(author.url)\" tappable>\n                    @if (author.avatar) {\n                      <ion-avatar>\n                        <ion-img [src]=\"author.avatar\" [alt]=\"author.name\"></ion-img>\n                      </ion-avatar>\n                    }\n                    @if (author.name) {\n                      <ion-label class=\"author\">{{ author.name }}</ion-label>\n                    }\n                  </ion-chip>\n                }\n              }\n              <ion-note class=\"ion-float-end\">\n                <small>{{ item.date_published | dateFromNow }}</small>\n              </ion-note>\n            </ion-card-subtitle>\n\n            <!-- title -->\n            <ion-card-title (click)=\"openFeedItem(item, feed)\" tappable>{{ item?.title }}</ion-card-title>\n\n            <!-- tags -->\n            @let tags = item | map: getTags;\n            @if (tags | isNotEmptyArray) {\n              <ion-text class=\"tags\">\n                @for (tag of tags; track tag; let last = $last) {\n                  <a (click)=\"openTag(feed, tag)\" tappable>\n                    <ion-text>#{{ tag }}</ion-text>\n                  </a>\n                  @if (!last) {\n                    &nbsp;\n                  }\n                }\n              </ion-text>\n            }\n          </ion-card-header>\n\n          <!-- Feed content -->\n          <ion-card-content>\n            <ion-text [feed]=\"item.url || feed.feed_url\">\n              @if (item.content_html) {\n                <p [innerHTML]=\"item.content_html\"></p>\n              } @else if (item.content_text) {\n                <p>\n                  <markdown [data]=\"item.content_text\" emoji></markdown>\n                </p>\n              }\n            </ion-text>\n          </ion-card-content>\n\n          @let editable = canEditItem(item, userId, feed);\n          @if (editable || showReadMoreButton) {\n            @if (editable) {\n\n              <!-- Delete button (visible hover)-->\n              <button\n                mat-icon-button\n                (click)=\"onDeleteItem($event, item)\"\n                class=\"visible-hover ion-float-start\"\n                [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n              >\n                <mat-icon>delete</mat-icon>\n              </button>\n              <!-- Edit button (visible hover) -->\n              <ion-button\n                (click)=\"onEditItem($event, item)\"\n                class=\"visible-hover ion-float-start\" fill=\"clear\"\n              >\n                <mat-icon slot=\"start\">edit</mat-icon>\n<!--                <ion-icon name=\"pencil\" slot=\"start\"></ion-icon>-->\n                <ion-label translate>COMMON.BTN_EDIT</ion-label>\n              </ion-button>\n            }\n            @if (showReadMoreButton) {\n              <ion-button  (click)=\"openFeedItem(item, feed)\" class=\"ion-float-end\" fill=\"clear\">\n                <ion-label>{{ (item.truncated ? 'SOCIAL.FEED.READ_MORE' : 'COMMON.BTN_SHOW') | translate }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward-outline\"></ion-icon>\n              </ion-button>\n            }\n          }\n        </ion-card>\n      }\n    }\n  </div>\n}\n\n<!-- Details modal -->\n<ion-modal #modal [showBackdrop]=\"false\"\n           class=\"stack-modal\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar color=\"secondary\">\n        <ion-title>{{ 'SOCIAL.FEED.NEWS' | translate }}</ion-title>\n        <ion-buttons slot=\"end\">\n          <ion-button (click)=\"modal.dismiss()\">\n            <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content>\n      <div class=\"ion-padding\">\n        <app-feed\n          [urls]=\"urls\"\n          [showHeader]=\"false\"\n          [showReadMoreButton]=\"false\"\n          [maxContentLength]=\"-1\"\n          [maxAgeInMonths]=\"-1\"\n          [itemId]=\"modalItemId\"\n          cardColor=\"light\"\n          [debug]=\"debug\"\n        ></app-feed>\n      </div>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [":host{display:block;height:calc(100% - 10px);max-height:fit-content;overflow:hidden;--feed-header-height: 48px;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:10px;--feed-border-radius: 4px;border-radius:var(--feed-border-radius);--ion-card-background: rgba(var(--ion-background-color-rgb), .6)}:host.shape-round{--feed-border-radius: 12px}ion-button{text-transform:unset;--color: rgba(var(--ion-color-contrast-rgb), .7)}ion-item.feed-header{height:var(--feed-header-height);margin:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--feed-border-radius) var(--feed-border-radius) 0 0}ion-item.feed-header ion-icon[slot=start]{-webkit-margin-end:8px;margin-inline-end:8px}.feed-content{height:auto;overflow-y:auto;--margin-bottom: 8px}.feed-content.has-header{height:calc(100% - var(--feed-header-height, 0))}.feed-content ion-card.feed-item-card{--top-radius: 4px;--bottom-radius: 4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:0 0 var(--margin-bottom) 0;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius);--ion-card-color-contrast-rgb: var(--ion-color-contrast-rgb, var(--ion-color-dark-rgb, 0, 0, 0));--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card.first{--top-radius: 0}.feed-content ion-card.feed-item-card.last{--margin-bottom: 0;--bottom-radius: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-title{--color: rgba(var(--ion-card-color-contrast-rgb), .87)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip{--background: transparent;--border-color: transparent;--border-width: 0}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-avatar{--color: rgba(var(--ion-card-color-contrast-rgb), .6);border:1px solid var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-chip ion-label{--color: rgba(var(--ion-card-color-contrast-rgb), .8);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header ion-card-subtitle ion-note{--color: rgba(var(--ion-card-color-contrast-rgb), .6);color:var(--color)}.feed-content ion-card.feed-item-card ion-card-header .tags{display:inline}.feed-content ion-card.feed-item-card ion-card-header .tags a{color:rgba(var(--ion-card-color-contrast-rgb),.6)!important}.feed-content ion-card.feed-item-card ion-card-content ion-text ::ng-deep img{max-width:100%;height:auto!important}.feed-content ion-card.feed-item-card .visible-hover{opacity:0;transition:opacity .2s ease-in-out}.feed-content ion-card.feed-item-card:hover .visible-hover{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: LocalSettingsService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -40089,7 +40149,11 @@ class SettingsPage extends AppForm {
             this.markForCheck();
         }
     }
-    async showSelectPeerModal(opts) {
+    async showSelectPeerModal(event, opts) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         const selectedPeer = this._form.get('peerUrl').value;
         const peer = await this.network.showSelectPeerModal({
             showSetManuallyButton: false, // Make no sense here, because same as cancel (already inside the settings page)
@@ -40216,11 +40280,11 @@ class SettingsPage extends AppForm {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingsPage, deps: [{ token: i0.Injector }, { token: PlatformService }, { token: i2$1.NavController }, { token: LocalSettingsValidatorService }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: APP_LOCALES }, { token: APP_SETTINGS_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SettingsPage, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\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><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.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: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i12$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["showToolbar", "formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "canDownload", "canImport", "showMoreButtonTitle", "definitions", "importPolicy"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SettingsPage, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\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><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal($event)\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.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: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i12$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["showToolbar", "formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "canDownload", "canImport", "showMoreButtonTitle", "definitions", "importPolicy"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingsPage, decorators: [{
             type: Component,
-            args: [{ selector: 'page-settings', providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\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><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n" }]
+            args: [{ selector: 'page-settings', providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\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><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal($event)\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: PlatformService }, { type: i2$1.NavController }, { type: LocalSettingsValidatorService }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: AccountService }, { type: LocalSettingsService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LOCALES]
@@ -55137,5 +55201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, 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, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, IconSelectorService, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialAutocompleteFooterDirective, MaterialAutocompleteHeaderDirective, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, UsersUtils, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, decorateWithTakeUntil, deepMergeSkipUndefined, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, 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, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, IconSelectorService, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialAutocompleteFooterDirective, MaterialAutocompleteHeaderDirective, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, UsersUtils, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, decorateWithTakeUntil, deepMergeSkipUndefined, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWebAnimationsSupported, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map