@sumaris-net/ngx-components 21.2.0 → 21.3.1

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

@@ -11,7 +11,7 @@ import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
 import { OverlayModule, FullscreenOverlayContainer, OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2$1 from '@angular/material/core';
-import { MatRippleModule } from '@angular/material/core';
+import { MatRippleModule, ShowOnDirtyErrorStateMatcher, ErrorStateMatcher } from '@angular/material/core';
 import * as i6$5 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
 import * as i11$2 from '@angular/material/expansion';
@@ -176,6 +176,10 @@ class Environment {
     externalEnvironmentUrl;
     baseUrl;
     connectionTimeout;
+    // Max time (in ms) to wait for the peer at startup, before starting in offline mode. The peer is still checked in background,
+    // and the app goes online as soon as it responds. Can depend on the connection type (e.g. { wifi: 3000, cellular: 10000 }).
+    // Default: connectionTimeout (the startup waits for the peer)
+    startupConnectionTimeout;
     sameUrlPeer;
     // The peer to use (if defined)
     peer;
@@ -17562,6 +17566,8 @@ const environment = Object.freeze({
     // TODO: make this works
     //offline: true,
     peerMinVersion: '1.8.0',
+    // Do not wait more than 3s for the peer at startup (except on cellular network: wait connectionTimeout)
+    startupConnectionTimeout: { wifi: 3000, unknown: 3000 },
     peerDefaultPrefix: 'http://',
     enableSelectPeerByFeature: true,
     sendAppVersionHeaders: true,
@@ -19761,6 +19767,16 @@ class HttpUtils {
 
 const PEER_URL_REGEXP = /^(http|https):\/\/[^ "?#@]+$/;
 class NetworkUtils {
+    /**
+     * Resolve a timeout (in ms), that can depend on the connection type (e.g. { wifi: 3000, cellular: 10000 })
+     * @param timeout - a timeout, or a timeout by connection type
+     * @param connectionType - the current connection type
+     * @param defaultTimeout - the timeout to use, if not defined (or not defined for the connection type)
+     */
+    static resolveTimeout(timeout, connectionType, defaultTimeout) {
+        const value = typeof timeout === 'object' && timeout !== null ? timeout[connectionType] : timeout;
+        return typeof value === 'number' && value >= 0 ? value : defaultTimeout;
+    }
     static async getNodeInfo(http, peer, opts) {
         if (!peer)
             throw Error("Missing argument 'peer'.");
@@ -20202,11 +20218,11 @@ class TextPopover {
         return button?.side !== 'start';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextPopover, deps: [{ token: i2$2.PopoverController }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextPopover, isStandalone: false, selector: "app-text-popover", inputs: { showHeader: "showHeader", headerColor: "headerColor", showFooter: "showFooter", title: "title", text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator", headerButtons: "headerButtons", mobile: "mobile" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "@if (showHeader) {\n  <ion-header>\n    <ion-toolbar [color]=\"headerColor\">\n      <ion-buttons slot=\"start\">\n        @if (mobile && editing) {\n          <ion-button\n            (click)=\"cancel()\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n          </ion-button>\n        }\n        @for (button of headerButtons | arrayFilter: isStartSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n      </ion-buttons>\n      @if (title) {\n        <ion-title>{{ title | translate }}</ion-title>\n      }\n      <ion-buttons slot=\"end\">\n        @for (button of headerButtons | arrayFilter: isEndSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n        @if (mobile) {\n          @if (editing) {\n            <ion-button\n              (click)=\"onValidate($event)\"\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-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n            </ion-button>\n          }\n          @if (!editing) {\n            <ion-button\n              (click)=\"cancel()\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n            </ion-button>\n          }\n        }\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n}\n\n<ion-content class=\"ion-padding\" [class.has-header]=\"showHeader\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-text-form\n    #form\n    [standalone]=\"true\"\n    [placeholder]=\"placeholder\"\n    [multiline]=\"multiline\"\n    [maxLength]=\"maxLength\"\n    [autoHeight]=\"autoHeight\"\n    [autofocus]=\"editing && autofocus\"\n    [validator]=\"validator\"\n    (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n@if (showFooter) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding\" nowrap>\n        <ion-col></ion-col>\n        <ion-col size=\"auto\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n            <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n          </ion-button>\n          <ion-button\n            [fill]=\"disabled ? 'clear' : 'solid'\"\n            (click)=\"onValidate($event)\"\n            (keyup.enter)=\"onValidate($event)\"\n            color=\"tertiary\"\n            [disabled]=\"disabled\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n          >\n            <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoSize", "autoSizeMinRows", "autoSizeMaxRows", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "required", "autoHeight"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextPopover, isStandalone: false, selector: "app-text-popover", inputs: { showHeader: "showHeader", headerColor: "headerColor", showFooter: "showFooter", title: "title", text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator", headerButtons: "headerButtons", mobile: "mobile" }, providers: [{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "@if (showHeader) {\n  <ion-header>\n    <ion-toolbar [color]=\"headerColor\">\n      <ion-buttons slot=\"start\">\n        @if (mobile && editing) {\n          <ion-button\n            (click)=\"cancel()\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n          </ion-button>\n        }\n        @for (button of headerButtons | arrayFilter: isStartSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n      </ion-buttons>\n      @if (title) {\n        <ion-title>{{ title | translate }}</ion-title>\n      }\n      <ion-buttons slot=\"end\">\n        @for (button of headerButtons | arrayFilter: isEndSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n        @if (mobile) {\n          @if (editing) {\n            <ion-button\n              (click)=\"onValidate($event)\"\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-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n            </ion-button>\n          }\n          @if (!editing) {\n            <ion-button\n              (click)=\"cancel()\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n            </ion-button>\n          }\n        }\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n}\n\n<ion-content class=\"ion-padding\" [class.has-header]=\"showHeader\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-text-form\n    #form\n    [standalone]=\"true\"\n    [placeholder]=\"placeholder\"\n    [multiline]=\"multiline\"\n    [maxLength]=\"maxLength\"\n    [autoHeight]=\"autoHeight\"\n    [autofocus]=\"editing && autofocus\"\n    [validator]=\"validator\"\n    (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n@if (showFooter) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding\" nowrap>\n        <ion-col></ion-col>\n        <ion-col size=\"auto\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n            <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n          </ion-button>\n          <ion-button\n            [fill]=\"disabled ? 'clear' : 'solid'\"\n            (click)=\"onValidate($event)\"\n            (keyup.enter)=\"onValidate($event)\"\n            color=\"tertiary\"\n            [disabled]=\"disabled\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n          >\n            <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoSize", "autoSizeMinRows", "autoSizeMaxRows", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "required", "autoHeight"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'app-text-popover', standalone: false, template: "@if (showHeader) {\n  <ion-header>\n    <ion-toolbar [color]=\"headerColor\">\n      <ion-buttons slot=\"start\">\n        @if (mobile && editing) {\n          <ion-button\n            (click)=\"cancel()\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n          </ion-button>\n        }\n        @for (button of headerButtons | arrayFilter: isStartSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n      </ion-buttons>\n      @if (title) {\n        <ion-title>{{ title | translate }}</ion-title>\n      }\n      <ion-buttons slot=\"end\">\n        @for (button of headerButtons | arrayFilter: isEndSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n        @if (mobile) {\n          @if (editing) {\n            <ion-button\n              (click)=\"onValidate($event)\"\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-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n            </ion-button>\n          }\n          @if (!editing) {\n            <ion-button\n              (click)=\"cancel()\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n            </ion-button>\n          }\n        }\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n}\n\n<ion-content class=\"ion-padding\" [class.has-header]=\"showHeader\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-text-form\n    #form\n    [standalone]=\"true\"\n    [placeholder]=\"placeholder\"\n    [multiline]=\"multiline\"\n    [maxLength]=\"maxLength\"\n    [autoHeight]=\"autoHeight\"\n    [autofocus]=\"editing && autofocus\"\n    [validator]=\"validator\"\n    (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n@if (showFooter) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding\" nowrap>\n        <ion-col></ion-col>\n        <ion-col size=\"auto\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n            <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n          </ion-button>\n          <ion-button\n            [fill]=\"disabled ? 'clear' : 'solid'\"\n            (click)=\"onValidate($event)\"\n            (keyup.enter)=\"onValidate($event)\"\n            color=\"tertiary\"\n            [disabled]=\"disabled\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n          >\n            <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"] }]
+            args: [{ providers: [{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }], selector: 'app-text-popover', standalone: false, template: "@if (showHeader) {\n  <ion-header>\n    <ion-toolbar [color]=\"headerColor\">\n      <ion-buttons slot=\"start\">\n        @if (mobile && editing) {\n          <ion-button\n            (click)=\"cancel()\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_CANCEL' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n          </ion-button>\n        }\n        @for (button of headerButtons | arrayFilter: isStartSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n      </ion-buttons>\n      @if (title) {\n        <ion-title>{{ title | translate }}</ion-title>\n      }\n      <ion-buttons slot=\"end\">\n        @for (button of headerButtons | arrayFilter: isEndSide; track button) {\n          <ion-button [fill]=\"button.fill\" [color]=\"button.color\" (click)=\"clickButton(button)\">\n            @if (button.icon) {\n              <ion-icon [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n            }\n            @if (button.text) {\n              <ion-text>{{ button.text | translate }}</ion-text>\n            }\n          </ion-button>\n        }\n        @if (mobile) {\n          @if (editing) {\n            <ion-button\n              (click)=\"onValidate($event)\"\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-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n            </ion-button>\n          }\n          @if (!editing) {\n            <ion-button\n              (click)=\"cancel()\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_CLOSE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n            </ion-button>\n          }\n        }\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n}\n\n<ion-content class=\"ion-padding\" [class.has-header]=\"showHeader\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  @if (form.error) {\n    <ion-item visible-xs visible-sm visible-mobile lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" class=\"error\"><span [innerHTML]=\"form.error | translate\"></span></ion-label>\n    </ion-item>\n  }\n\n  <app-text-form\n    #form\n    [standalone]=\"true\"\n    [placeholder]=\"placeholder\"\n    [multiline]=\"multiline\"\n    [maxLength]=\"maxLength\"\n    [autoHeight]=\"autoHeight\"\n    [autofocus]=\"editing && autofocus\"\n    [validator]=\"validator\"\n    (onSubmit)=\"onValidate($event)\"\n  ></app-text-form>\n</ion-content>\n\n@if (showFooter) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding\" nowrap>\n        <ion-col></ion-col>\n        <ion-col size=\"auto\">\n          <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n            <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n          </ion-button>\n          <ion-button\n            [fill]=\"disabled ? 'clear' : 'solid'\"\n            (click)=\"onValidate($event)\"\n            (keyup.enter)=\"onValidate($event)\"\n            color=\"tertiary\"\n            [disabled]=\"disabled\"\n            [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n          >\n            <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.PopoverController }, { type: i2.TranslateService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: true }]
@@ -20490,6 +20506,7 @@ class SelectPeerModal extends RxState {
     environment;
     loggingService;
     _subscription = new Subscription();
+    _setManuallyOpened = false;
     _logger;
     defaultPeers$ = this.select('defaultPeers');
     peers$ = this.select('peers');
@@ -20549,7 +20566,7 @@ class SelectPeerModal extends RxState {
         this.cd = cd;
         this.environment = environment;
         this.loggingService = loggingService;
-        this.set({ searchText: null, selectedTabIndex: 0 });
+        this.set({ searchText: null, selectedTabIndex: 0, peers: [] });
         this.mobile = isMobile(window);
         this._logger = loggingService?.getLogger('network-modal');
         this.peerMinVersion = environment.peerMinVersion;
@@ -20686,6 +20703,11 @@ class SelectPeerModal extends RxState {
         }
         this.loading = false;
         this.cd.markForCheck();
+        // No peer found (e.g. no default peers): open the manual form, to let the user set a peer URL
+        if (isEmptyArray(this.peers) && this.showSetManuallyButton && !this._setManuallyOpened) {
+            this._setManuallyOpened = true;
+            setTimeout(() => this.clickSetManually());
+        }
     }
     async refreshPeer(peer) {
         try {
@@ -20750,11 +20772,11 @@ class SelectPeerModal extends RxState {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SelectPeerModal, deps: [{ token: i2$2.ModalController }, { token: i2$2.PopoverController }, { token: i2.TranslateService }, { token: i2$4.HttpClient }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }, { token: APP_LOGGING_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SelectPeerModal, isStandalone: false, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", peerFilter: "peerFilter", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        @if (onRefresh.observed) {\n          <ion-button (click)=\"refresh($event)\" [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\">\n            <mat-icon slot=\"icon-only\">refresh</mat-icon>\n          </ion-button>\n        }\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  @if (showSearchBar) {\n    <ion-toolbar>\n      <ion-searchbar\n        #searchbar\n        animated\n        type=\"search\"\n        [class.cdk-visually-hidden]=\"!showSearchBar\"\n        show-clear-button=\"always\"\n        [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n        [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n        [(ngModel)]=\"searchText\"\n        (ionCancel)=\"toggleSearchBar()\"\n      ></ion-searchbar>\n    </ion-toolbar>\n  }\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span>{{ 'NETWORK.PEER.OFFLINE' | translate }}</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label>{{ 'NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "component", type: i2$2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SelectPeerModal, isStandalone: false, selector: "select-peer-modal", inputs: { selectedTabIndex: ["selectedTabIndex", "selectedTabIndex", numberAttribute], selectedPeer: "selectedPeer", peerFilter: "peerFilter", title: "title", canCancel: ["canCancel", "canCancel", booleanAttribute], allowSelectDownPeer: ["allowSelectDownPeer", "allowSelectDownPeer", booleanAttribute], showSetManuallyButton: ["showSetManuallyButton", "showSetManuallyButton", booleanAttribute], showSearchBar: ["showSearchBar", "showSearchBar", booleanAttribute], tabGroupAnimationDuration: "tabGroupAnimationDuration", onRefresh: "onRefresh", defaultPeers: "defaultPeers" }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        @if (onRefresh.observed) {\n          <ion-button (click)=\"refresh($event)\" [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\">\n            <mat-icon slot=\"icon-only\">refresh</mat-icon>\n          </ion-button>\n        }\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  @if (showSearchBar) {\n    <ion-toolbar>\n      <ion-searchbar\n        #searchbar\n        animated\n        type=\"search\"\n        [class.cdk-visually-hidden]=\"!showSearchBar\"\n        show-clear-button=\"always\"\n        [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n        [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n        [(ngModel)]=\"searchText\"\n        (ionCancel)=\"toggleSearchBar()\"\n      ></ion-searchbar>\n    </ion-toolbar>\n  }\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span>{{ 'NETWORK.PEER.OFFLINE' | translate }}</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">\n              @if (peers | isEmptyArray) {\n                {{ 'NETWORK.PEER.SELECT_MODAL.NO_PEER' | translate }}\n              } @else {\n                {{ 'COMMON.NO_RESULT' | translate }}\n              }\n            </ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label>{{ 'NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"], dependencies: [{ kind: "component", type: i2$2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: IsNilPipe, name: "isNil" }, { kind: "pipe", type: BadgeNumberPipe, name: "badgeNumber" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SelectPeerModal, decorators: [{
             type: Component,
-            args: [{ selector: 'select-peer-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation], standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        @if (onRefresh.observed) {\n          <ion-button (click)=\"refresh($event)\" [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\">\n            <mat-icon slot=\"icon-only\">refresh</mat-icon>\n          </ion-button>\n        }\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  @if (showSearchBar) {\n    <ion-toolbar>\n      <ion-searchbar\n        #searchbar\n        animated\n        type=\"search\"\n        [class.cdk-visually-hidden]=\"!showSearchBar\"\n        show-clear-button=\"always\"\n        [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n        [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n        [(ngModel)]=\"searchText\"\n        (ionCancel)=\"toggleSearchBar()\"\n      ></ion-searchbar>\n    </ion-toolbar>\n  }\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span>{{ 'NETWORK.PEER.OFFLINE' | translate }}</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label>{{ 'NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"] }]
+            args: [{ selector: 'select-peer-modal', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation], standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"light\" style=\"z-index: 900\">\n    <ion-buttons slot=\"start\">\n      @if (canCancel) {\n        <ion-button (click)=\"cancel()\" visible-mobile visible-sm visible-xs>\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n\n    <ion-title>\n      {{ title | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- loader -->\n      @if (loading) {\n        <ion-spinner></ion-spinner>\n      } @else {\n        <!-- refresh button -->\n        @if (onRefresh.observed) {\n          <ion-button (click)=\"refresh($event)\" [matTooltip]=\"'COMMON.BTN_REFRESH' | translate\">\n            <mat-icon slot=\"icon-only\">refresh</mat-icon>\n          </ion-button>\n        }\n      }\n      <!-- search button -->\n      @if (!showSearchBar) {\n        <ion-button (click)=\"toggleSearchBar()\">\n          <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- search bar -->\n  @if (showSearchBar) {\n    <ion-toolbar>\n      <ion-searchbar\n        #searchbar\n        animated\n        type=\"search\"\n        [class.cdk-visually-hidden]=\"!showSearchBar\"\n        show-clear-button=\"always\"\n        [placeholder]=\"'COMMON.BTN_SEARCH' | translate\"\n        [cancelButtonText]=\"'COMMON.BTN_CANCEL' | translate\"\n        [(ngModel)]=\"searchText\"\n        (ionCancel)=\"toggleSearchBar()\"\n      ></ion-searchbar>\n    </ion-toolbar>\n  }\n</ion-header>\n\n<ion-content>\n  <mat-tab-group\n    #tabGroup\n    [(selectedIndex)]=\"selectedTabIndex\"\n    class=\"mat-mdc-tab-disabled-hidden\"\n    [class.mat-mdc-tab-group-header-hidden]=\"!enableSelectPeerByFeature\"\n    [dynamicHeight]=\"false\"\n    [mat-stretch-tabs]=\"mobile\"\n    [animationDuration]=\"mobile ? tabGroupAnimationDuration : '0s'\"\n  >\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredPeerCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredPeerCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredPeerCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_NETWORK' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.NETWORK_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeers$ | async; track $index) {\n          <ion-item\n            (click)=\"selectPeer(peer)\"\n            @fadeInAnimation\n            [class.selected]=\"selectedPeer && selectedPeer === peer.url\"\n            detail\n            matRipple\n            tappable\n          >\n            <!-- Peer is UP -->\n            @if (peer.reachable) {\n              <!-- icon -->\n              @if (peer.favicon != 'skip') {\n                <ion-avatar slot=\"start\">\n                  <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                  <ion-icon name=\"server\" class=\"icon-secondary\" style=\"top: 12px; left: 44px\" color=\"dark\"></ion-icon>\n                </ion-avatar>\n              } @else {\n                <ion-icon slot=\"start\" name=\"server\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n              }\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label class=\"ion-text-wrap\">\n                      <ion-text>\n                        @let url = peer.hostAndPort + peer.path;\n                        <h3 [innerHTML]=\"url | highlight: searchText\"></h3>\n                      </ion-text>\n                      <ion-text color=\"primary\">\n                        <h4 [innerHTML]=\"peer.label | highlight: searchText\"></h4>\n                      </ion-text>\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"12\" size-sm=\"4\">\n                    <ion-label class=\"ion-text-wrap ion-text-sm-center\" color=\"medium\">\n                      <h4>\n                        <small>{{ peer.softwareName }}&nbsp;</small>\n                        <br class=\"hidden-xxs hidden-xs\" />\n                        <!-- Compatible -->\n                        @if (!peerMinVersion || isCompatible(peer)) {\n                          <small>v{{ peer.softwareVersion }}</small>\n                        } @else {\n                          <!-- Incompatible -->\n                          <ion-text\n                            color=\"danger\"\n                            [matTooltip]=\"\n                              'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                            \"\n                          >\n                            <small class=\"ion-color-danger\">\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </ion-text>\n                        }\n                      </h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            } @else {\n              <!-- Peer is DOWN -->\n              <ion-icon slot=\"start\" name=\"server\" class=\"disabled ion-icon-avatar\"></ion-icon>\n\n              <ion-label class=\"ion-text-wrap\">\n                <ion-text color=\"medium\">\n                  <h3>{{ peer.hostAndPort }}{{ peer.path }}</h3>\n                </ion-text>\n                <ion-text color=\"danger\">\n                  <h4>\n                    <small>\n                      <ion-icon size=\"small\" name=\"close-circle\"></ion-icon>\n                    </small>\n                    <span>{{ 'NETWORK.PEER.OFFLINE' | translate }}</span>\n                  </h4>\n                </ion-text>\n              </ion-label>\n            }\n          </ion-item>\n        }\n\n        <!-- no result -->\n        @if ((filteredPeerCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">\n              @if (peers | isEmptyArray) {\n                {{ 'NETWORK.PEER.SELECT_MODAL.NO_PEER' | translate }}\n              } @else {\n                {{ 'COMMON.NO_RESULT' | translate }}\n              }\n            </ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n\n    <!-- Select by features -->\n    <mat-tab [disabled]=\"!enableSelectPeerByFeature\">\n      <ng-template mat-tab-label>\n        <ion-label\n          [matBadge]=\"filteredFeaturesCount$ | async | badgeNumber\"\n          [matBadgeHidden]=\"filteredFeaturesCount$ | async | isNil\"\n          [matBadgeColor]=\"(filteredFeaturesCount$ | async) ? 'primary' : 'accent'\"\n          matBadgeOverlap=\"false\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n        >\n          {{ 'NETWORK.PEER.SELECT_MODAL.TAB_FEATURES' | translate }}\n        </ion-label>\n      </ng-template>\n      <ion-list>\n        <ion-list-header>\n          <ion-label class=\"ion-text-wrap ion-padding-end\">\n            <p [innerHTML]=\"'NETWORK.PEER.SELECT_MODAL.FEATURES_HELP' | translate\"></p>\n          </ion-label>\n        </ion-list-header>\n\n        @for (peer of filteredPeersByFeatures$ | async; track $index) {\n          @let peerUrl = peer.hostAndPort + peer.path;\n          <!-- Peer is UP -->\n          @if (peer.reachable && peer.features | isNotEmptyArray) {\n            @let collapsed = collapsedPeers[peerUrl];\n\n            <ion-item-divider (click)=\"togglePeerFeatures(peerUrl)\" tappable @fadeInAnimation>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-label>\n                      <h4>\n                        <ion-icon name=\"server\" color=\"medium\"></ion-icon>\n                        {{ peer.hostAndPort }}{{ peer.path }}\n                      </h4>\n                      @if (peerMinVersion && !isCompatible(peer)) {\n                        <ion-text\n                          color=\"danger\"\n                          [matTooltip]=\"\n                            'NETWORK.PEER.SELECT_MODAL.NOT_COMPATIBLE_HELP' | translate: { version: peerMinVersion }\n                          \"\n                        >\n                          <h4 class=\"ion-color-danger\">\n                            <small>\n                              <mat-icon>warning</mat-icon>\n                              v{{ peer.softwareVersion }}\n                            </small>\n                          </h4>\n                        </ion-text>\n                      }\n                    </ion-label>\n                  </ion-col>\n                  <ion-col size=\"4\" class=\"ion-text-end\">\n                    <ion-label class=\"text-italic\">\n                      <h4>({{ 'COMMON.RESULT_COUNT' | translate: { count: peer.features.length } }})</h4>\n                    </ion-label>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <mat-icon slot=\"end\">\n                @if (collapsed) {\n                  {{ mobile ? 'arrow_drop_down' : 'keyboard_arrow_down' }}\n                } @else {\n                  {{ mobile ? 'arrow_drop_up' : 'keyboard_arrow_up' }}\n                }\n              </mat-icon>\n            </ion-item-divider>\n\n            @if (!collapsed) {\n              @for (feature of peer.features; track feature.label) {\n                <ion-item (click)=\"selectPeer(peer)\" tappable matRipple detail @fadeInAnimation>\n                  <!-- icon -->\n                  @if (feature.logo && feature.logo != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"feature.logo\" (ionError)=\"clearLogo(feature)\"></ion-img>\n                    </ion-avatar>\n                  } @else if (peer.favicon != 'skip') {\n                    <ion-avatar slot=\"start\">\n                      <ion-img [src]=\"peer.favicon || peer.url + '/api/favicon'\" (ionError)=\"clearLogo(peer)\"></ion-img>\n                      <ion-icon\n                        name=\"contract\"\n                        class=\"icon-secondary\"\n                        style=\"top: 12px; left: 44px\"\n                        color=\"dark\"\n                      ></ion-icon>\n                    </ion-avatar>\n                  } @else {\n                    <ion-icon slot=\"start\" name=\"contract\" class=\"ion-icon-avatar\" color=\"dark\"></ion-icon>\n                  }\n\n                  <ion-label class=\"ion-text-wrap\">\n                    <ion-text color=\"primary\">\n                      <h3 [innerHTML]=\"feature | referentialToString | highlight: searchText\"></h3>\n                    </ion-text>\n                    <ion-text>\n                      <p [innerHTML]=\"feature.description | highlight: searchText\"></p>\n                    </ion-text>\n                  </ion-label>\n                </ion-item>\n              }\n            }\n          }\n        }\n\n        <!-- no result -->\n        @if ((filteredFeaturesCount$ | async) === 0) {\n          <ion-item>\n            <ion-text color=\"danger\" class=\"text-italic\">{{ 'COMMON.NO_RESULT' | translate }}</ion-text>\n          </ion-item>\n        }\n      </ion-list>\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n\n@if ((canCancel && !mobile) || showSetManuallyButton) {\n  <ion-footer>\n    <ion-toolbar>\n      <ion-row class=\"ion-no-padding ion-text-nowrap\">\n        <ion-col></ion-col>\n\n        <!-- buttons -->\n        @if (showSetManuallyButton) {\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" (click)=\"clickSetManually($event)\">\n              <ion-label>{{ 'NETWORK.PEER.SELECT_MODAL.BTN_SET_MANUALLY' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n\n        @if (canCancel) {\n          <ion-col size=\"auto\" hidden-xs hidden-sm hidden-mobile>\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    </ion-toolbar>\n  </ion-footer>\n}\n", styles: [".mat-mdc-tab-group{height:100%}.mat-mdc-tab-group .mat-tab-body-wrapper{height:calc(100% - var(--mat-tab-height))}ion-item-divider .ion-icon-avatar,ion-item .ion-icon-avatar{-webkit-margin-end:16px;margin-inline-end:16px;font-size:40px;width:40px;height:40px}ion-item-divider .ion-icon-avatar.disabled,ion-item .ion-icon-avatar.disabled{color:rgba(var(--ion-color-medium-rgb),.7)}ion-item-divider h4 ion-icon,ion-item-divider h4 mat-icon,ion-item h4 ion-icon,ion-item h4 mat-icon{height:14px;width:14px;font-size:14px;line-height:14px}ion-item-divider h4 small ion-icon,ion-item-divider h4 small mat-icon,ion-item h4 small ion-icon,ion-item h4 small mat-icon{height:12px;width:12px;font-size:12px;line-height:12px}ion-item-divider.selected,ion-item.selected{--ion-color-base: var(--ion-color-secondary100-contrast) !important;--ion-item-background: var(--ion-color-secondary100)}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.ModalController }, { type: i2$2.PopoverController }, { type: i2.TranslateService }, { type: i2$4.HttpClient }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -21170,6 +21192,39 @@ class NetworkService extends StartableObservableService {
         }
         return this.getNodeInfo(peer, { nocache: true, timeout: this._connectionTimeout });
     }
+    /**
+     * Check if the peer is alive, at startup. If the peer does not respond before the startup timeout
+     * (see environment.startupConnectionTimeout), returns 'timeout' and continue to wait for the peer in background:
+     * the app will go online as soon as the peer responds.
+     */
+    async checkPeerAliveAtStartup(peer) {
+        const alivePromise = this.checkPeerAlive(peer);
+        // Wait the peer (without startup timeout), when the peer should be at the same URL
+        if (this.environment.sameUrlPeer)
+            return alivePromise;
+        const connectionType = await NetworkUtils.getConnectionType();
+        const startupTimeout = NetworkUtils.resolveTimeout(this.environment.startupConnectionTimeout, connectionType, this._connectionTimeout);
+        if (startupTimeout >= this._connectionTimeout)
+            return alivePromise; // Same as the connection timeout: just wait
+        let timeoutSubscription;
+        const timeoutPromise = new Promise((resolve) => (timeoutSubscription = timer(startupTimeout).subscribe(() => resolve('timeout'))));
+        const result = await Promise.race([alivePromise, timeoutPromise]);
+        timeoutSubscription?.unsubscribe();
+        if (result !== 'timeout')
+            return result;
+        console.warn(`[network] Peer {${peer.url}} not responding after ${startupTimeout}ms (connection type: ${connectionType}). Starting in offline mode, and waiting the peer in background...`);
+        // When the peer respond: go online
+        alivePromise.then(async (peerInfo) => {
+            if (!peerInfo)
+                return; // Peer not alive: skip (will be checked again by the refresh timer)
+            await this.ready(); // Wait the end of the start
+            if (!this._forceOffline || this.peer?.url !== peer.url)
+                return; // Already online, or peer changed: skip
+            console.info(`[network] Peer {${peer.url}} is now alive. Going online...`);
+            await this.tryOnline({ showLoadingToast: false, showOfflineToast: false });
+        });
+        return 'timeout';
+    }
     /**
      * Checks whether a peer is compatible based on its software version and the required minimum version.
      * Optionally displays a toast notification if the peer is not compatible.
@@ -21383,8 +21438,12 @@ class NetworkService extends StartableObservableService {
         }
         else if (this.online) {
             // Check if alive. If not, force offline mode
-            const alive = await this.checkPeerAlive(peer);
-            if (!alive) {
+            const alive = await this.checkPeerAliveAtStartup(peer);
+            if (alive === 'timeout') {
+                // Continue, in offline mode (the peer is still checked in background)
+                this.setForceOffline(true);
+            }
+            else if (!alive) {
                 // Peer not alive, but should be at the same URL, retrying each 1s
                 if (this.environment.sameUrlPeer) {
                     const retryMs = this._connectionTimeout > 0 ? this._connectionTimeout : 1000;
@@ -22766,7 +22825,7 @@ const CORE_CONFIG_OPTIONS = Object.freeze({
     },
     AUTH_RESET_PASSWORD_ENABLE: {
         key: 'sumaris.auth.reset.enable',
-        label: 'CONFIGURATION.OPTIONS.HOME.CHANGE_PASSWORD',
+        label: 'CONFIGURATION.OPTIONS.ACCOUNT.CHANGE_PASSWORD',
         type: 'boolean',
         defaultValue: true,
     },
@@ -26447,6 +26506,9 @@ class ConfigService extends BaseGraphqlService {
     async loadOrRestoreLocally() {
         let data;
         let wasJustLoaded = false;
+        // Wait the network to be started: before, network.online is always true (connection type is 'unknown'),
+        // and loading the pod configuration may take a long time (e.g. retries) if the pod cannot be reached
+        await this.network.ready();
         if (this.network.online) {
             try {
                 data = await this.loadDefault({ fetchPolicy: 'network-only' });
@@ -26480,14 +26542,15 @@ class ConfigService extends BaseGraphqlService {
     }
     /**
      * Merge the environment's properties (if any) into the given configuration.
-     * Environment properties take precedence over the server (Pod) configuration,
+     * Server (Pod) configuration properties take precedence over the environment,
      * so the app can be fully customized (e.g. theme colors) using only the injected
-     * ENVIRONMENT token - without requiring any change on the server side.
+     * ENVIRONMENT token (useful on a specific mobile artifact) or from the server configuration.
      */
     mergeEnvironmentProperties(data) {
         const envProperties = this.environment.properties;
         if (envProperties && Object.keys(envProperties).length) {
-            data.properties = { ...data.properties, ...envProperties };
+            debugger;
+            data.properties = { ...envProperties, ...data.properties };
         }
         return data;
     }
@@ -28348,7 +28411,7 @@ class SharedModule {
             ngModule: SharedModule,
             providers: [
                 provideChildTranslateService(),
-                ...(config.icons ? [provideIonicIcons(config.icons)] : [provideAllIonicIcons()]),
+                config.icons ? provideIonicIcons(config.icons) : provideAllIonicIcons(),
                 provideIonicIconsInitializer(),
                 // Load environment (if a loader has been defined)
                 ...(config?.loader
@@ -28953,6 +29016,7 @@ class AppImageGallerySlideshowComponent {
     enableLoop = true;
     /** Whether more rows may exist beyond the ones currently loaded (e.g. a further page, not yet fetched). When true, reaching the last slide asks the parent (via `fetchMore`) instead of looping/stopping. */
     canFetchMore = false;
+    actionsTemplate;
     /** Requests deletion of the given row. The caller (gallery) owns the confirmation/deletion logic and resolves the promise with whether it actually happened. */
     deleteRequested = createPromiseEventEmitter();
     closeRequested = new EventEmitter();
@@ -28982,6 +29046,9 @@ class AppImageGallerySlideshowComponent {
     get isNextDisabled() {
         return !this.enableLoop && !this.canFetchMore && this._activeIndex === this.rows.length - 1;
     }
+    get activeRow() {
+        return this.rows?.[this._activeIndex];
+    }
     constructor(alterCtrl, translate, cd) {
         this.alterCtrl = alterCtrl;
         this.translate = translate;
@@ -29670,11 +29737,11 @@ class AppImageGallerySlideshowComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGallerySlideshowComponent, deps: [{ token: i2$2.AlertController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGallerySlideshowComponent, isStandalone: false, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: ["wheelZoomStep", "wheelZoomStep", numberAttribute], maxZoomRatio: ["maxZoomRatio", "maxZoomRatio", numberAttribute], enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: ["editionQuality", "editionQuality", numberAttribute], imageSizeQueryParam: "imageSizeQueryParam", imageSize: "imageSize", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute] }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGallerySlideshowComponent, isStandalone: false, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: ["wheelZoomStep", "wheelZoomStep", numberAttribute], maxZoomRatio: ["maxZoomRatio", "maxZoomRatio", numberAttribute], enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: ["editionQuality", "editionQuality", numberAttribute], imageSizeQueryParam: "imageSizeQueryParam", imageSize: "imageSize", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableLoop: ["enableLoop", "enableLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], actionsTemplate: "actionsTemplate" }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-center\">\n          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: activeRow }\"></ng-container>\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGallerySlideshowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+            args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, swiperContainer)\"\n  (mousemove)=\"onPointerMove($event, swiperContainer)\"\n  (mouseup)=\"onPointerUp($event, swiperContainer)\"\n  (mouseleave)=\"onPointerUp($event, swiperContainer)\"\n  (touchmove)=\"onCropPointerMove($event, swiperContainer)\"\n  (touchend)=\"onCropPointerUp($event, swiperContainer)\"\n  (touchcancel)=\"onCropPointerUp($event, swiperContainer)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ _activeIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(swiperContainer, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableRotate) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(swiperContainer, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && enableCrop) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(swiperContainer)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(swiperContainer)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back: hidden while a crop/rotation edit is pending, to keep the focus on validating/cancelling it -->\n  @if (!mobile && !hasPendingEdit && (rows | isArrayLength: { greaterThan: 1 })) {\n    <div class=\"side-buttons prev\" [class.disabled]=\"isPrevDisabled\" (click)=\"slidePrev(swiperContainer)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" [class.disabled]=\"isNextDisabled\" (click)=\"slideNext(swiperContainer)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  }\n\n  <!-- image slides -->\n  <swiper-container\n    #swiperContainer\n    [modules]=\"swiperModules\"\n    [zoom]=\"!enableMouseZoom\"\n    [initialSlide]=\"selectedIndex\"\n    (swiperslidechange)=\"onSlideChange(swiperContainer)\"\n    (swiperinit)=\"onSwiperInit(swiperContainer)\"\n  >\n    @for (row of rows; track row.id; let index = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\"\n             [class.cdk-visually-hidden]=\"!_swiper && index !== selectedIndex\">\n\n          <!-- the image -->\n          @if (image.dataUrl) {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title || ''\" />\n          } @else {\n            <ion-img class=\"swiper-zoom-target\"\n                     [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\"\n                     [alt]=\"image.title || ''\"/>\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && enableCrop && _cropToolActive && index === _activeIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, swiperContainer, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, swiperContainer, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <!-- delete button -->\n          @if (!readOnly && enableDelete && deleteRequested.observed) {\n            <ion-button\n              (click)=\"requestDelete(swiperContainer)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-center\">\n          <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: activeRow }\"></ng-container>\n        </ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          @if (mobile) {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          } @else {\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          }\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"12\" class=\"ion-text-end\">\n          <ion-button\n            (click)=\"discardEdit(swiperContainer)\"\n            color=\"dark\"\n            fill=\"clear\"\n            [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CANCEL_EDIT' | translate) : ''\"\n          >\n            <ion-icon slot=\"start\" name=\"arrow-undo\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n          <ion-button (click)=\"validateEdit(swiperContainer)\" color=\"danger\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;background:#00000080;padding:4px;border-radius:50%;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host .side-buttons.disabled{pointer-events:none}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.AlertController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { rows: [{
                 type: Input
             }], selectedIndex: [{
@@ -29729,6 +29796,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }], canFetchMore: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], actionsTemplate: [{
+                type: Input
             }], deleteRequested: [{
                 type: Output
             }], closeRequested: [{
@@ -29908,6 +29977,7 @@ class AppImageGalleryComponent {
     addButtonColor = 'tertiary';
     addButtonText = 'COMMON.BTN_ADD';
     cardTemplate;
+    slideshowActionsTemplate;
     imageSizeQueryParam = 'size';
     imageSizes = {
         mosaic: 'small',
@@ -30310,11 +30380,11 @@ class AppImageGalleryComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i2$2.Platform }, { token: i2$2.AlertController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGalleryComponent, isStandalone: false, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizeQueryParam: "imageSizeQueryParam", imageSizes: "imageSizes", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { modeChange: "modeChange", onDeleteRow: "onDeleteRow", onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore", slideshowOpened: "slideshowOpened", slideshowClosed: "slideshowClosed" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "inlineSlideshow", first: true, predicate: ["inlineSlideshow"], descendants: true }], ngImport: i0, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonPopover, selector: "ion-popover" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$2.IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "imageSizeQueryParam", "imageSize", "imageVersionQueryParam", "imageVersionFn", "enableLoop", "canFetchMore"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "slideChanges", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: AppImageGalleryComponent, isStandalone: false, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", slideshowActionsTemplate: "slideshowActionsTemplate", imageSizeQueryParam: "imageSizeQueryParam", imageSizes: "imageSizes", imageVersionQueryParam: "imageVersionQueryParam", imageVersionFn: "imageVersionFn", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], enableDelete: ["enableDelete", "enableDelete", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { modeChange: "modeChange", onDeleteRow: "onDeleteRow", onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", cardClicked: "clickCard", previousSlide: "previousSlide", nextSlide: "nextSlide", slideChanges: "slideChanges", fetchMore: "fetchMore", slideshowOpened: "slideshowOpened", slideshowClosed: "slideshowClosed" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "inlineSlideshow", first: true, predicate: ["inlineSlideshow"], descendants: true }], ngImport: i0, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      [actionsTemplate]=\"slideshowActionsTemplate\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        [actionsTemplate]=\"slideshowActionsTemplate\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonPopover, selector: "ion-popover" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$2.IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "imageSizeQueryParam", "imageSize", "imageVersionQueryParam", "imageVersionFn", "enableLoop", "canFetchMore", "actionsTemplate"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "slideChanges", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
+            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n    <!-- Add -->\n    @if (!readOnly && showAddToolbarButton && enabled) {\n      <button\n        mat-icon-button\n        [title]=\"!_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"_showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"add()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\">\n      <!-- Toggle view mode -->\n      <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n        <ion-segment-button [value]=\"4\">\n          <mat-icon>view_module</mat-icon>\n        </ion-segment-button>\n        <ion-segment-button [value]=\"12\">\n          <mat-icon>view_list</mat-icon>\n        </ion-segment-button>\n      </ion-segment>\n    </ion-buttons>\n  </ion-toolbar>\n}\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"isInlineSlideshowOpen\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  @if (mobile && zoomActive) {\n    <div class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n  }\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"isInlineSlideshowOpen\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickCard($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.dataUrl) {\n                <ion-img [src]=\"image.dataUrl\" />\n              } @else {\n                <ion-img [src]=\"image.url | appendQueryParams: computeImageUrlQueryParams(image)\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ 'IMAGE.GALLERY.BTN_EDIT_TITLE' | translate }}</span>\n                      } @else {\n                        <span>{{ 'IMAGE.GALLERY.BTN_ADD_TITLE' | translate }}</span>\n                      }\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                @if (!readOnly && enableDelete) {\n                  <button\n                    mat-icon-button\n                    slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"!_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [matTooltip]=\"_showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\"\n                  >\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                }\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow #inlineSlideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [enableDelete]=\"enableDelete\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [imageSize]=\"slideshowImageSize\"\n      [imageVersionQueryParam]=\"imageVersionQueryParam\"\n      [imageVersionFn]=\"imageVersionFn\"\n      [actionsTemplate]=\"slideshowActionsTemplate\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      (previousSlide)=\"onSlidePrevious($event)\"\n      (nextSlide)=\"onSlideNext($event)\"\n      [canFetchMore]=\"canFetchMore\"\n      (fetchMore)=\"fetchMore.emit($event)\"\n      [debug]=\"debug\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n@if (showFabButton && !readOnly) {\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" [class.cdk-visually-hidden]=\"disabled\" @fadeInOutAnimation>\n    <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n      <ion-icon name=\"camera\"></ion-icon>\n      <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n}\n\n<!-- Zoom modal -->\n@if (slideshowMode === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [enableMouseZoom]=\"enableMouseZoom\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [enableRotate]=\"enableRotate\"\n        [enableCrop]=\"enableCrop\"\n        [enableDelete]=\"enableDelete\"\n        [enableLoop]=\"enableSlideshowLoop\"\n        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [imageSize]=\"slideshowImageSize\"\n        [imageVersionQueryParam]=\"imageVersionQueryParam\"\n        [imageVersionFn]=\"imageVersionFn\"\n        [actionsTemplate]=\"slideshowActionsTemplate\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"closeSlideshow()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\n        [canFetchMore]=\"canFetchMore\"\n        (fetchMore)=\"fetchMore.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label>{{ 'IMAGE.GALLERY.TITLE' | translate }}</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"_showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 100%)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
         }], ctorParameters: () => [{ type: ImageService }, { type: i2$2.Platform }, { type: i2$2.AlertController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Optional
                 }, {
@@ -30365,6 +30435,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], cardTemplate: [{
                 type: Input
+            }], slideshowActionsTemplate: [{
+                type: Input
             }], imageSizeQueryParam: [{
                 type: Input
             }], imageSizes: [{
@@ -39798,11 +39870,11 @@ class HomePage extends RxState {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HomePage, deps: [{ token: AccountService }, { token: i2$2.ModalController }, { token: i2.TranslateService }, { token: i2$2.ToastController }, { token: ConfigService }, { token: PlatformService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: LocalSettingsService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_HOME_BUTTONS, optional: true }, { token: APP_HOME_TOOLBAR_BUTTONS, optional: true }, { token: APP_HOME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HomePage, isStandalone: false, selector: "app-page-home", viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- Injected toolbar buttons -->\n    @for (item of $filteredToolbarButtons | async; track item.title) {\n      <ion-button\n        [color]=\"item.color\"\n        (click)=\"onToolbarButtonClick($event, item)\"\n        [class]=\"item.cssClass\"\n        [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n        [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n        [matBadge]=\"item.$badge | push\"\n        [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n        [matBadgeHidden]=\"!(item.$badge | push)\"\n        matBadgeOverlap=\"true\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"above after\"\n      >\n        @if (item.icon) {\n          <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n        }\n        @if (item.matIcon) {\n          <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n        }\n        <ion-label *rxIf=\"item.$title; let title\">\n          <span [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      </ion-button>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"transparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- Injected toolbar buttons -->\n          @for (item of $filteredToolbarButtons | async; track item.title) {\n            <ion-button\n              fill=\"solid\"\n              [color]=\"item.color || 'secondary'\"\n              (click)=\"onToolbarButtonClick($event, item)\"\n              [class]=\"item.cssClass\"\n              [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n              [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n              [matBadge]=\"item.$badge | push\"\n              [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n              [matBadgeHidden]=\"!(item.$badge | push)\"\n              matBadgeOverlap=\"true\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n            >\n              @if (item.icon) {\n                <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n              }\n              @if (item.matIcon) {\n                <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n              }\n              <ion-label *rxIf=\"item.$title; let title\">\n                <span [innerHTML]=\"title | translate\"></span>\n              </ion-label>\n            </ion-button>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"!showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"!showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                @if (isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                }\n                @if (!isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n                }\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                @if (logo) {\n                  <img [attr.src]=\"logo\" alt=\"Logo\" />\n                }\n              </ion-text>\n              <!-- register help text -->\n              @if (!isLogin && canRegister) {\n                <ion-text>\n                  <br />\n                  <span>{{ 'HOME.REGISTER_HELP' | translate }}</span>\n                </ion-text>\n              }\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                @if (!isLogin) {\n                  @if (canRegister) {\n                    <ion-button expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                      <span>{{ 'HOME.BTN_REGISTER' | translate }}</span>\n                    </ion-button>\n                  }\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span>{{ 'AUTH.BTN_LOGIN' | translate }}</span>\n                  </ion-button>\n                } @else {\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    @for (item of buttons; track item) {\n                      @if (item.path) {\n                        <ion-button\n                          expand=\"block\"\n                          color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\"\n                        >\n                          @if (item.icon) {\n                            <ion-icon slot=\"start\" class=\"ion-float-start\" [name]=\"item.icon\"></ion-icon>\n                          }\n                          @if (item.matIcon) {\n                            <mat-icon slot=\"start\" class=\"ion-float-start\">\n                              {{ item.matIcon }}\n                            </mat-icon>\n                          }\n                          <ion-label>\n                            {{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}\n                          </ion-label>\n                          <ion-badge\n                            *rxIf=\"item.$badge; let badge\"\n                            slot=\"end\"\n                            [color]=\"(item.$badgeColor | push) || 'accent'\"\n                          >\n                            {{ badge }}\n                          </ion-badge>\n                        </ion-button>\n                      } @else {\n                        <!-- divider -->\n                        @if (!item.action) {\n                          <div [class]=\"item.cssClass\" class=\"button-divider\">\n                            <ion-label>{{ item.title | translate }}&nbsp;</ion-label>\n                          </div>\n                        }\n                      }\n                    }\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n                  @if (showAccountButton) {\n                    <ion-button expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                      <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                      <ion-text>{{ 'HOME.BTN_MY_ACCOUNT' | translate }}</ion-text>\n                    </ion-button>\n                  }\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span>{{ 'HOME.BTN_DISCONNECT' | translate }}</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                }\n\n                <!-- If user login -->\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label><span [innerHTML]=\"page.subtitle | translate\"></span></ion-label>\n                    <ion-text\n                      class=\"ion-float-end\"\n                      [title]=\"!showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                      [matTooltip]=\"showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                    >\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      @if (page.icon) {\n                        <ion-icon slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      }\n                      @if (page.matIcon) {\n                        <mat-icon slot=\"start\">{{ page.matIcon }}</mat-icon>\n                      }\n\n                      <ion-text color=\"primary\" [innerHTML]=\"page.title\"></ion-text>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          @if (childPage.icon) {\n                            <ion-icon slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          }\n                          @if (childPage.matIcon) {\n                            <mat-icon slot=\"start\" color=\"dark\">\n                              {{ childPage.matIcon }}\n                            </mat-icon>\n                          }\n\n                          <ion-text color=\"dark\" [innerHTML]=\"childPage.title\"></ion-text>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img\n                    class=\"logo\"\n                    src=\"{{ item.logo }}\"\n                    alt=\"{{ item.label }}\"\n                    [title]=\"!showTooltip ? item.label : ''\"\n                    [matTooltip]=\"showTooltip ? item.label : ''\"\n                  />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}ion-toolbar ion-button.mat-badge{--overflow: visible}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome .button-divider{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mat-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width:575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width:767px)and (min-width:576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width:768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width:1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width:992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"], dependencies: [{ kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "directive", type: i2$2.IonRouterLink, selector: ":not(a):not(area)[routerLink]" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i8$2.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: ["titleI18n", "disabled", "filter", "autoHide", "headerActions", "footerActions", "style", "color", "unreadColor", "fill", "mobile", "listStyle", "debug"], outputs: ["showList"] }, { 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: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HomePage, isStandalone: false, selector: "app-page-home", viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- Injected toolbar buttons -->\n    @for (item of $filteredToolbarButtons | async; track item.title) {\n      <ion-button\n        [color]=\"item.color\"\n        (click)=\"onToolbarButtonClick($event, item)\"\n        [class]=\"item.cssClass\"\n        [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n        [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n        [matBadge]=\"item.$badge | push\"\n        [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n        [matBadgeHidden]=\"!(item.$badge | push)\"\n        matBadgeOverlap=\"true\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"above after\"\n      >\n        @if (item.icon) {\n          <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n        }\n        @if (item.matIcon) {\n          <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n        }\n        <ion-label *rxIf=\"item.$title; let title\">\n          <span [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      </ion-button>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"transparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- Injected toolbar buttons -->\n          @for (item of $filteredToolbarButtons | async; track item.title) {\n            <ion-button\n              fill=\"solid\"\n              [color]=\"item.color || 'secondary'\"\n              (click)=\"onToolbarButtonClick($event, item)\"\n              [class]=\"item.cssClass\"\n              [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n              [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n              [matBadge]=\"item.$badge | push\"\n              [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n              [matBadgeHidden]=\"!(item.$badge | push)\"\n              matBadgeOverlap=\"true\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n            >\n              @if (item.icon) {\n                <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n              }\n              @if (item.matIcon) {\n                <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n              }\n              <ion-label *rxIf=\"item.$title; let title\">\n                <span [innerHTML]=\"title | translate\"></span>\n              </ion-label>\n            </ion-button>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"!showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"!showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                @if (isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                }\n                @if (!isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n                }\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                @if (logo) {\n                  <img [attr.src]=\"logo\" alt=\"Logo\" />\n                }\n              </ion-text>\n              <!-- register help text -->\n              @if (!isLogin && canRegister) {\n                <ion-text>\n                  <br />\n                  <span>{{ 'HOME.REGISTER_HELP' | translate }}</span>\n                </ion-text>\n              }\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                @if (!isLogin) {\n                  @if (canRegister) {\n                    <ion-button expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                      <span>{{ 'HOME.BTN_REGISTER' | translate }}</span>\n                    </ion-button>\n                  }\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span>{{ 'AUTH.BTN_LOGIN' | translate }}</span>\n                  </ion-button>\n                } @else {\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    @for (item of buttons; track item) {\n                      @if (item.path) {\n                        <ion-button\n                          expand=\"block\"\n                          color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\"\n                        >\n                          @if (item.icon) {\n                            <ion-icon slot=\"start\" class=\"ion-float-start\" [name]=\"item.icon\"></ion-icon>\n                          }\n                          @if (item.matIcon) {\n                            <mat-icon slot=\"start\" class=\"ion-float-start\">\n                              {{ item.matIcon }}\n                            </mat-icon>\n                          }\n                          <ion-label>\n                            {{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}\n                          </ion-label>\n                          <ion-badge\n                            *rxIf=\"item.$badge; let badge\"\n                            slot=\"end\"\n                            [color]=\"(item.$badgeColor | push) || 'accent'\"\n                          >\n                            {{ badge }}\n                          </ion-badge>\n                        </ion-button>\n                      } @else {\n                        <!-- divider -->\n                        @if (!item.action) {\n                          <div [class]=\"item.cssClass\" class=\"button-divider\">\n                            <ion-label>{{ item.title | translate }}&nbsp;</ion-label>\n                          </div>\n                        }\n                      }\n                    }\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n                  @if (showAccountButton) {\n                    <ion-button expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                      <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                      <ion-text>{{ 'HOME.BTN_MY_ACCOUNT' | translate }}</ion-text>\n                    </ion-button>\n                  }\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span>{{ 'HOME.BTN_DISCONNECT' | translate }}</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                }\n\n                <!-- If user login -->\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label><span [innerHTML]=\"page.subtitle | translate\"></span></ion-label>\n                    <ion-text\n                      class=\"ion-float-end\"\n                      [title]=\"!showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                      [matTooltip]=\"showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                    >\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      @if (page.icon) {\n                        <ion-icon slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      }\n                      @if (page.matIcon) {\n                        <mat-icon slot=\"start\">{{ page.matIcon }}</mat-icon>\n                      }\n\n                      <ion-text color=\"primary\" [innerHTML]=\"page.title\"></ion-text>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          @if (childPage.icon) {\n                            <ion-icon slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          }\n                          @if (childPage.matIcon) {\n                            <mat-icon slot=\"start\" color=\"dark\">\n                              {{ childPage.matIcon }}\n                            </mat-icon>\n                          }\n\n                          <ion-text color=\"dark\" [innerHTML]=\"childPage.title\"></ion-text>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img\n                    class=\"logo\"\n                    src=\"{{ item.logo }}\"\n                    alt=\"{{ item.label }}\"\n                    [title]=\"!showTooltip ? item.label : ''\"\n                    [matTooltip]=\"showTooltip ? item.label : ''\"\n                  />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}ion-toolbar ion-button.mat-badge{--overflow: visible}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page .spinner{color:var(--ion-color-primary)}ion-content .loading-page .spinner .sk-cube:before{background-color:var(--ion-color-primary)}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome .button-divider{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mat-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width:575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width:767px)and (min-width:576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width:768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width:1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width:992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"], dependencies: [{ kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "directive", type: i2$2.IonRouterLink, selector: ":not(a):not(area)[routerLink]" }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i8$2.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "subTitle", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearchInput", "onSearch"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton", "debug"] }, { kind: "component", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: ["titleI18n", "disabled", "filter", "autoHide", "headerActions", "footerActions", "style", "color", "unreadColor", "fill", "mobile", "listStyle", "debug"], outputs: ["showList"] }, { 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: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$4.RxPush, name: "push" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HomePage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], standalone: false, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- Injected toolbar buttons -->\n    @for (item of $filteredToolbarButtons | async; track item.title) {\n      <ion-button\n        [color]=\"item.color\"\n        (click)=\"onToolbarButtonClick($event, item)\"\n        [class]=\"item.cssClass\"\n        [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n        [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n        [matBadge]=\"item.$badge | push\"\n        [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n        [matBadgeHidden]=\"!(item.$badge | push)\"\n        matBadgeOverlap=\"true\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"above after\"\n      >\n        @if (item.icon) {\n          <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n        }\n        @if (item.matIcon) {\n          <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n        }\n        <ion-label *rxIf=\"item.$title; let title\">\n          <span [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      </ion-button>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"transparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- Injected toolbar buttons -->\n          @for (item of $filteredToolbarButtons | async; track item.title) {\n            <ion-button\n              fill=\"solid\"\n              [color]=\"item.color || 'secondary'\"\n              (click)=\"onToolbarButtonClick($event, item)\"\n              [class]=\"item.cssClass\"\n              [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n              [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n              [matBadge]=\"item.$badge | push\"\n              [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n              [matBadgeHidden]=\"!(item.$badge | push)\"\n              matBadgeOverlap=\"true\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n            >\n              @if (item.icon) {\n                <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n              }\n              @if (item.matIcon) {\n                <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n              }\n              <ion-label *rxIf=\"item.$title; let title\">\n                <span [innerHTML]=\"title | translate\"></span>\n              </ion-label>\n            </ion-button>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"!showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"!showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                @if (isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                }\n                @if (!isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n                }\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                @if (logo) {\n                  <img [attr.src]=\"logo\" alt=\"Logo\" />\n                }\n              </ion-text>\n              <!-- register help text -->\n              @if (!isLogin && canRegister) {\n                <ion-text>\n                  <br />\n                  <span>{{ 'HOME.REGISTER_HELP' | translate }}</span>\n                </ion-text>\n              }\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                @if (!isLogin) {\n                  @if (canRegister) {\n                    <ion-button expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                      <span>{{ 'HOME.BTN_REGISTER' | translate }}</span>\n                    </ion-button>\n                  }\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span>{{ 'AUTH.BTN_LOGIN' | translate }}</span>\n                  </ion-button>\n                } @else {\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    @for (item of buttons; track item) {\n                      @if (item.path) {\n                        <ion-button\n                          expand=\"block\"\n                          color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\"\n                        >\n                          @if (item.icon) {\n                            <ion-icon slot=\"start\" class=\"ion-float-start\" [name]=\"item.icon\"></ion-icon>\n                          }\n                          @if (item.matIcon) {\n                            <mat-icon slot=\"start\" class=\"ion-float-start\">\n                              {{ item.matIcon }}\n                            </mat-icon>\n                          }\n                          <ion-label>\n                            {{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}\n                          </ion-label>\n                          <ion-badge\n                            *rxIf=\"item.$badge; let badge\"\n                            slot=\"end\"\n                            [color]=\"(item.$badgeColor | push) || 'accent'\"\n                          >\n                            {{ badge }}\n                          </ion-badge>\n                        </ion-button>\n                      } @else {\n                        <!-- divider -->\n                        @if (!item.action) {\n                          <div [class]=\"item.cssClass\" class=\"button-divider\">\n                            <ion-label>{{ item.title | translate }}&nbsp;</ion-label>\n                          </div>\n                        }\n                      }\n                    }\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n                  @if (showAccountButton) {\n                    <ion-button expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                      <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                      <ion-text>{{ 'HOME.BTN_MY_ACCOUNT' | translate }}</ion-text>\n                    </ion-button>\n                  }\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span>{{ 'HOME.BTN_DISCONNECT' | translate }}</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                }\n\n                <!-- If user login -->\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label><span [innerHTML]=\"page.subtitle | translate\"></span></ion-label>\n                    <ion-text\n                      class=\"ion-float-end\"\n                      [title]=\"!showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                      [matTooltip]=\"showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                    >\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      @if (page.icon) {\n                        <ion-icon slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      }\n                      @if (page.matIcon) {\n                        <mat-icon slot=\"start\">{{ page.matIcon }}</mat-icon>\n                      }\n\n                      <ion-text color=\"primary\" [innerHTML]=\"page.title\"></ion-text>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          @if (childPage.icon) {\n                            <ion-icon slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          }\n                          @if (childPage.matIcon) {\n                            <mat-icon slot=\"start\" color=\"dark\">\n                              {{ childPage.matIcon }}\n                            </mat-icon>\n                          }\n\n                          <ion-text color=\"dark\" [innerHTML]=\"childPage.title\"></ion-text>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img\n                    class=\"logo\"\n                    src=\"{{ item.logo }}\"\n                    alt=\"{{ item.label }}\"\n                    [title]=\"!showTooltip ? item.label : ''\"\n                    [matTooltip]=\"showTooltip ? item.label : ''\"\n                  />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}ion-toolbar ion-button.mat-badge{--overflow: visible}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome .button-divider{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mat-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width:575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width:767px)and (min-width:576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width:768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width:1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width:992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"] }]
+            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation, slideInAnimation], standalone: false, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <ion-buttons slot=\"end\">\n    @if (showNotificationIcon) {\n      <app-user-event-notification-icon [autoHide]=\"autoHideNotificationIcon\"></app-user-event-notification-icon>\n    }\n\n    <!-- Injected toolbar buttons -->\n    @for (item of $filteredToolbarButtons | async; track item.title) {\n      <ion-button\n        [color]=\"item.color\"\n        (click)=\"onToolbarButtonClick($event, item)\"\n        [class]=\"item.cssClass\"\n        [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n        [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n        [matBadge]=\"item.$badge | push\"\n        [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n        [matBadgeHidden]=\"!(item.$badge | push)\"\n        matBadgeOverlap=\"true\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"above after\"\n      >\n        @if (item.icon) {\n          <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n        }\n        @if (item.matIcon) {\n          <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n        }\n        <ion-label *rxIf=\"item.$title; let title\">\n          <span [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      </ion-button>\n    }\n\n    <!-- dark mode (if allow by the environment token) -->\n    @if (settings.allowDarkMode) {\n      <ion-button (click)=\"toggleDarkMode()\">\n        <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'sunny' : 'moon'\"></ion-icon>\n      </ion-button>\n    }\n\n    <!-- Change locale button -->\n    <ion-button [matMenuTriggerFor]=\"localeMenu\">\n      <ion-icon slot=\"start\" name=\"language\"></ion-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (item of locales; track item.key) {\n      <button mat-menu-item (click)=\"changeLanguage(item.key)\">\n        <!--<mat-icon>{{ currentLocale === item.key ? 'checkmark' : undefined }}</mat-icon>-->\n        <ion-label>{{ item.value }}</ion-label>\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" [class.has-scrollbar]=\"hasScrollbar\" no-padding-xs>\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\n        <p [innerHTML]=\"'COMMON.LOADING_DOTS' | translate\"></p>\n        <div class=\"sk-cube1 sk-cube\"></div>\n        <div class=\"sk-cube2 sk-cube\"></div>\n        <div class=\"sk-cube4 sk-cube\"></div>\n        <div class=\"sk-cube3 sk-cube\"></div>\n      </div>\n    }\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  @if (!mobile) {\n    <div class=\"hidden-xs hidden-sm\">\n      <ion-toolbar color=\"transparent\" translucent>\n        <ion-buttons slot=\"start\">\n          <ion-menu-toggle>\n            <ion-button color=\"light\" fill=\"clear\">\n              <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n            </ion-button>\n          </ion-menu-toggle>\n        </ion-buttons>\n\n        <ion-buttons slot=\"end\">\n          @if (showNotificationIcon) {\n            <app-user-event-notification-icon\n              [style]=\"'ion-button'\"\n              color=\"secondary\"\n              unreadColor=\"tertiary\"\n              fill=\"solid\"\n              [autoHide]=\"autoHideNotificationIcon\"\n            ></app-user-event-notification-icon>\n          }\n\n          <!-- Injected toolbar buttons -->\n          @for (item of $filteredToolbarButtons | async; track item.title) {\n            <ion-button\n              fill=\"solid\"\n              [color]=\"item.color || 'secondary'\"\n              (click)=\"onToolbarButtonClick($event, item)\"\n              [class]=\"item.cssClass\"\n              [title]=\"!showTooltip ? (item.tooltip | translate) : ''\"\n              [matTooltip]=\"showTooltip ? (item.tooltip | translate) : ''\"\n              [matBadge]=\"item.$badge | push\"\n              [matBadgeColor]=\"item.$badgeColor | push | matColor\"\n              [matBadgeHidden]=\"!(item.$badge | push)\"\n              matBadgeOverlap=\"true\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n            >\n              @if (item.icon) {\n                <ion-icon slot=\"icon-only\" [name]=\"item.icon\"></ion-icon>\n              }\n              @if (item.matIcon) {\n                <mat-icon slot=\"icon-only\">{{ item.matIcon }}</mat-icon>\n              }\n              <ion-label *rxIf=\"item.$title; let title\">\n                <span [innerHTML]=\"title | translate\"></span>\n              </ion-label>\n            </ion-button>\n          }\n\n          <!-- dark mode (if allow by the environment token) -->\n          @if (settings.allowDarkMode) {\n            <ion-button\n              color=\"secondary\"\n              fill=\"solid\"\n              (click)=\"toggleDarkMode()\"\n              [title]=\"!showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('HOME.BTN_DARK_MODE' | translate) : ''\"\n            >\n              <ion-icon slot=\"icon-only\" [name]=\"(darkMode$ | push) ? 'moon' : 'sunny'\"></ion-icon>\n            </ion-button>\n          }\n          <!-- change locale button -->\n          <ion-button\n            color=\"secondary\"\n            fill=\"solid\"\n            [matMenuTriggerFor]=\"localeMenu\"\n            [title]=\"!showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n            [matTooltip]=\"showTooltip ? ('SETTINGS.LOCALE' | translate) : ''\"\n          >\n            <ion-icon slot=\"icon-only\" name=\"language\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </div>\n  }\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    @let hasFeed = hasFeed$ | async;\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 3 : 0\"></ion-col>\n        <ion-col>\n          <!-- Welcome card -->\n          <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @fadeInAnimation>\n            <ion-card-header>\n              <ion-card-title class=\"ion-text-center\">\n                @if (isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_WEB' | translate: { appName: appName }\"></span>\n                }\n                @if (!isWeb) {\n                  <span [innerHTML]=\"'HOME.WELCOME_APP' | translate: { appName: appName }\"></span>\n                }\n              </ion-card-title>\n              <ion-card-subtitle [innerHTML]=\"description\"></ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content class=\"ion-no-padding\">\n              <ion-text color=\"primary\">\n                @if (logo) {\n                  <img [attr.src]=\"logo\" alt=\"Logo\" />\n                }\n              </ion-text>\n              <!-- register help text -->\n              @if (!isLogin && canRegister) {\n                <ion-text>\n                  <br />\n                  <span>{{ 'HOME.REGISTER_HELP' | translate }}</span>\n                </ion-text>\n              }\n              <div class=\"ion-padding-top\">\n                <!-- If NOT login -->\n                @if (!isLogin) {\n                  @if (canRegister) {\n                    <ion-button expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n                      <span>{{ 'HOME.BTN_REGISTER' | translate }}</span>\n                    </ion-button>\n                  }\n                  <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n                    <span>{{ 'AUTH.BTN_LOGIN' | translate }}</span>\n                  </ion-button>\n                } @else {\n                  <!-- Feature buttons -->\n                  <ng-container *rxIf=\"$filteredButtons; let buttons\">\n                    @for (item of buttons; track item) {\n                      @if (item.path) {\n                        <ion-button\n                          expand=\"block\"\n                          color=\"tertiary\"\n                          [class]=\"item.cssClass\"\n                          [routerLink]=\"item.path\"\n                          routerDirection=\"root\"\n                        >\n                          @if (item.icon) {\n                            <ion-icon slot=\"start\" class=\"ion-float-start\" [name]=\"item.icon\"></ion-icon>\n                          }\n                          @if (item.matIcon) {\n                            <mat-icon slot=\"start\" class=\"ion-float-start\">\n                              {{ item.matIcon }}\n                            </mat-icon>\n                          }\n                          <ion-label>\n                            {{ 'HOME.BTN_DATA_ENTRY' | translate: { name: (item.title | translate) } }}\n                          </ion-label>\n                          <ion-badge\n                            *rxIf=\"item.$badge; let badge\"\n                            slot=\"end\"\n                            [color]=\"(item.$badgeColor | push) || 'accent'\"\n                          >\n                            {{ badge }}\n                          </ion-badge>\n                        </ion-button>\n                      } @else {\n                        <!-- divider -->\n                        @if (!item.action) {\n                          <div [class]=\"item.cssClass\" class=\"button-divider\">\n                            <ion-label>{{ item.title | translate }}&nbsp;</ion-label>\n                          </div>\n                        }\n                      }\n                    }\n                    <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n                  </ng-container>\n                  @if (showAccountButton) {\n                    <ion-button expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n                      <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n                      <ion-text>{{ 'HOME.BTN_MY_ACCOUNT' | translate }}</ion-text>\n                    </ion-button>\n                  }\n                  <p hidden-xs hidden-sm hidden-mobile>\n                    <ion-text\n                      [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n                    ></ion-text>\n                    <br />\n                    <ion-text>\n                      <a href=\"#\" (click)=\"logout($event)\">\n                        <span>{{ 'HOME.BTN_DISCONNECT' | translate }}</span>\n                      </a>\n                    </ion-text>\n                  </p>\n                }\n\n                <!-- If user login -->\n              </div>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        <ion-col size=\"0\" [sizeXl]=\"hasFeed ? 1 : 0\"></ion-col>\n        <ion-col [class.feed]=\"hasFeed\" [size]=\"hasFeed ? 12 : 0\" [sizeXl]=\"hasFeed ? 4 : 0\">\n          @if (showFeed) {\n            @if (mobile) {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @fadeInAnimation\n              ></app-feed>\n            } @else {\n              <app-feed\n                #feed\n                shape=\"round\"\n                [debug]=\"false\"\n                [urls]=\"feedUrls\"\n                [maxAgeInMonths]=\"feedMaxAgeInMonths\"\n                [maxContentLength]=\"feedMaxContentLength\"\n                (ngInit)=\"initFeed(feed)\"\n                @slideInAnimation\n                @fadeInAnimation\n              ></app-feed>\n            }\n          }\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Page history -->\n    @let pageHistory = isLogin && (pageHistory$ | push);\n    @if (pageHistory | isNotEmptyArray) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" class=\"ion-text-center\">\n              <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n                <ion-card-header class=\"ion-no-padding\">\n                  <!-- top bar -->\n                  <ion-card-subtitle>\n                    <button\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\n                      <mat-icon>close</mat-icon>\n                    </button>\n                    <ion-label><span [innerHTML]=\"page.subtitle | translate\"></span></ion-label>\n                    <ion-text\n                      class=\"ion-float-end\"\n                      [title]=\"!showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                      [matTooltip]=\"showTooltip ? (page.time | dateFormat: { time: true }) : ''\"\n                    >\n                      <small>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &nbsp;\n                    </ion-text>\n                  </ion-card-subtitle>\n\n                  <!-- main page -->\n                  <ion-card-title class=\"ion-no-margin ion-no-padding\">\n                    <ion-item\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\n                      <!-- page icon-->\n                      @if (page.icon) {\n                        <ion-icon slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                      }\n                      @if (page.matIcon) {\n                        <mat-icon slot=\"start\">{{ page.matIcon }}</mat-icon>\n                      }\n\n                      <ion-text color=\"primary\" [innerHTML]=\"page.title\"></ion-text>\n                    </ion-item>\n                  </ion-card-title>\n                </ion-card-header>\n\n                <!-- children pages -->\n                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\n                          <!-- page icon-->\n                          @if (childPage.icon) {\n                            <ion-icon slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                          }\n                          @if (childPage.matIcon) {\n                            <mat-icon slot=\"start\" color=\"dark\">\n                              {{ childPage.matIcon }}\n                            </mat-icon>\n                          }\n\n                          <ion-text color=\"dark\" [innerHTML]=\"childPage.title\"></ion-text>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Bottom banner -->\n    @if (showPartnerBanner || showLegalInformation) {\n      <ion-grid\n        class=\"bottom-banner ion-text-center\"\n        [class.floating]=\"!mobile && (pageHistory | isEmptyArray)\"\n        @fadeInAnimation\n      >\n        <ion-row>\n          <!-- partners logos -->\n          @if (showPartnerBanner) {\n            <ion-col size=\"12\" [sizeLg]=\"partnerBannerSize\" class=\"ion-text-center\">\n              @if (showLegalInformation) {\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.PARTNERS' | translate }}</ion-list-header>\n                </ion-list>\n              }\n              <!-- partners -->\n              @for (item of $partners | async; track $index) {\n                <a href=\"{{ item.siteUrl }}\">\n                  <img\n                    class=\"logo\"\n                    src=\"{{ item.logo }}\"\n                    alt=\"{{ item.label }}\"\n                    [title]=\"!showTooltip ? item.label : ''\"\n                    [matTooltip]=\"showTooltip ? item.label : ''\"\n                  />\n                </a>\n              }\n            </ion-col>\n          }\n\n          <!-- legal information -->\n          @if (showLegalInformation) {\n            <ion-col size=\"12\" size-sm=\"6\" size-lg=\"4\" [class.left-border]=\"showPartnerBanner\">\n              <ion-list class=\"legal-info\">\n                <ion-list-header class=\"ion-text-left\">{{ 'HOME.LEGAL_INFORMATION' | translate }}</ion-list-header>\n                @for (item of legalInformation; track item.path) {\n                  <ion-item (click)=\"openMarkdownModal($event, item)\" lines=\"none\" [button]=\"true\">\n                    <ion-label>\n                      <p>\n                        {{ item.title | translate: item.titleArgs }}\n                      </p>\n                    </ion-label>\n                  </ion-item>\n                }\n              </ion-list>\n            </ion-col>\n            @if (showInstallLinks) {\n              <ion-col size=\"12\" size-lg=\"3\" offset-lg=\"9\" [class.left-border]=\"showPartnerBanner\">\n                <ion-list class=\"legal-info\">\n                  <ion-list-header>{{ 'HOME.INSTALL_APP' | translate }}</ion-list-header>\n                  <!-- TODO -->\n                </ion-list>\n              </ion-col>\n            }\n          }\n        </ion-row>\n      </ion-grid>\n    }\n  }\n\n  <!-- image credits -->\n  @if (contentCredits | isNotNilOrBlank) {\n    <div class=\"content-credits\" [class.floating]=\"!mobile\">\n      <ion-text>{{ contentCredits }}</ion-text>\n    </div>\n  }\n</ion-content>\n", styles: [":host{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .7);--scrollbar-width: 0;--bottom-banner-height: 122px}ion-toolbar ion-button.mat-badge{--overflow: visible}h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content.has-scrollbar{--scrollbar-width: 8px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:transparent;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page .spinner{color:var(--ion-color-primary)}ion-content .loading-page .spinner .sk-cube:before{background-color:var(--ion-color-primary)}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:var(--ion-card-background-color)}ion-content ion-card.welcome .button-divider{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:var(--ion-card-background-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{--mat-icon-button-state-layer-size: 40px;padding:8px;z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{width:100%;--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{--ion-card-background-color: rgba(var(--ion-background-color-rgb), .5);background-color:var(--ion-card-background-color);min-width:240px;z-index:0;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);margin:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content .bottom-banner ion-list-header{min-height:30px}ion-content .bottom-banner ion-item{--min-height: 28px}ion-content .bottom-banner ion-item ion-label{margin-top:3px!important;margin-bottom:3px!important}ion-content ion-text{text-align:center}@media screen and (max-width:575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner.floating{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width:767px)and (min-width:576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width:768px){ion-content{min-height:calc(100% - var(--bottom-banner-height))}}@media screen and (min-width:1200px){ion-content ion-col.feed{height:fit-content;max-height:calc(100vh - var(--ion-toolbar-height) - var(--bottom-banner-height) - var(--ion-padding) * 2);padding-inline-end:calc(var(--ion-padding) - 10px);overflow:hidden}ion-content .bottom-banner.floating{position:fixed;left:0;right:0;bottom:0;overflow-y:auto;max-height:var(--bottom-banner-height);margin-top:0}}.content-credits{float:right}.content-credits.floating{float:unset;position:fixed;bottom:0;right:var(--scrollbar-width, 0)}.content-credits ion-text{padding-inline-start:4px;padding-inline-end:4px;font-size:.7rem;background-color:rgba(var(--ion-background-color-rgb),.5);color:rgba(var(--ion-text-color-rgb),.7)}@media screen and (min-width:992px){.left-border{border-left:1px solid var(--ion-color-medium)}}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$2.ModalController }, { type: i2.TranslateService }, { type: i2$2.ToastController }, { type: ConfigService }, { type: PlatformService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: LocalSettingsService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -53855,7 +53927,7 @@ class GalleryTestPage {
         this.debug = !this.debug;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GalleryTestPage, isStandalone: false, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n\n    <ion-buttons slot=\"end\">\n      @if (gallery.slideshowMode === 'inline') {\n        <ion-input [(ngModel)]=\"slideToIndex\" placeholder=\"Slide index\">\n\n        </ion-input>\n        <ion-button [disabled]=\"!gallery.isSlideshowVisible\"\n                    (click)=\"gallery.slideTo(slideToIndex)\">Ok</ion-button>\n      }\n\n      <button mat-icon-button [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"toggleZoomPresentation()\">\n      <mat-icon>{{ slideshowMode === 'modal' ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_MODAL_ZOOM' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleSlideshowLoop()\">\n      <mat-icon>{{ enableSlideshowLoop ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_LOOP' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleDebug()\">\n      <mat-icon>{{ debug ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [slideshowMode]=\"slideshowMode\"\n    [enableSlideshowLoop]=\"enableSlideshowLoop\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "imageSizeQueryParam", "imageSizes", "imageVersionQueryParam", "imageVersionFn", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "slideshowMode", "inlineZoomHeight", "enableSlideshowLoop", "canFetchMore", "dataSource"], outputs: ["modeChange", "onDeleteRow", "onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "clickCard", "previousSlide", "nextSlide", "slideChanges", "fetchMore", "slideshowOpened", "slideshowClosed"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GalleryTestPage, isStandalone: false, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n\n    <ion-buttons slot=\"end\">\n      @if (gallery.slideshowMode === 'inline') {\n        <ion-input [(ngModel)]=\"slideToIndex\" placeholder=\"Slide index\">\n\n        </ion-input>\n        <ion-button [disabled]=\"!gallery.isSlideshowVisible\"\n                    (click)=\"gallery.slideTo(slideToIndex)\">Ok</ion-button>\n      }\n\n      <button mat-icon-button [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n    <button mat-menu-item (click)=\"toggleZoomPresentation()\">\n      <mat-icon>{{ slideshowMode === 'modal' ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_MODAL_ZOOM' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleSlideshowLoop()\">\n      <mat-icon>{{ enableSlideshowLoop ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'IMAGE.GALLERY.BTN_ENABLE_LOOP' | translate }}</ion-label>\n    </button>\n\n    <button mat-menu-item (click)=\"toggleDebug()\">\n      <mat-icon>{{ debug ? 'check' : '' }}</mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [slideshowMode]=\"slideshowMode\"\n    [enableSlideshowLoop]=\"enableSlideshowLoop\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "slideshowActionsTemplate", "imageSizeQueryParam", "imageSizes", "imageVersionQueryParam", "imageVersionFn", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "enableDelete", "editionFormat", "editionQuality", "slideshowMode", "inlineZoomHeight", "enableSlideshowLoop", "canFetchMore", "dataSource"], outputs: ["modeChange", "onDeleteRow", "onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "clickCard", "previousSlide", "nextSlide", "slideChanges", "fetchMore", "slideshowOpened", "slideshowClosed"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GalleryTestPage, decorators: [{
             type: Component,