@sumaris-net/ngx-components 21.0.0-rc15 → 21.0.0-rc16

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, inject, NgModule, forwardRef, booleanAttribute, ViewChildren, Input, ChangeDetectionStrategy, Component, HostListener, HostBinding, ElementRef, numberAttribute, ViewChild, ANIMATION_MODULE_TYPE, RendererStyleFlags2, DOCUMENT, TemplateRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Self, ViewEncapsulation, Injector, APP_INITIALIZER, DestroyRef, input, output, Renderer2, effect, signal, SecurityContext, viewChildren, viewChild, model, computed, untracked } from '@angular/core';
+import { InjectionToken, Directive, inject, Pipe, Injectable, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, booleanAttribute, ViewChildren, Input, ChangeDetectionStrategy, Component, HostListener, HostBinding, ElementRef, numberAttribute, ViewChild, ANIMATION_MODULE_TYPE, RendererStyleFlags2, DOCUMENT, TemplateRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Self, ViewEncapsulation, Injector, APP_INITIALIZER, DestroyRef, input, output, Renderer2, effect, signal, SecurityContext, viewChildren, viewChild, model, computed, untracked } from '@angular/core';
 import { firstValueFrom, shareReplay, tap, of, timer, Subject, merge, delay, isObservable, from, Subscription, BehaviorSubject, fromEvent, noop as noop$a, Observable, forkJoin, timeout, defer, combineLatest, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, mergeMap as mergeMap$1, switchMap as switchMap$1, EMPTY, interval } from 'rxjs';
 import { catchError, map, filter, takeUntil, first, switchMap, tap as tap$1, throttleTime, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import * as cloneImported from 'clone';
@@ -30,7 +30,7 @@ import { IonicModule, Platform, ToastController, IonicSafeString, AlertControlle
 import * as momentImported from 'moment';
 import { isMoment, locale, now } from 'moment';
 import * as i1 from '@angular/material-moment-adapter';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MomentDateAdapter, MatMomentDateModule } from '@angular/material-moment-adapter';
 import * as i2 from '@ngx-translate/core';
 import { TranslateService, TranslatePipe, provideChildTranslateService, TranslateDirective } from '@ngx-translate/core';
 import { isMoment as isMoment$1 } from 'moment/moment';
@@ -141,6 +141,7 @@ import { Style, StatusBar } from '@capacitor/status-bar';
 import { Browser } from '@capacitor/browser';
 import { Clipboard } from '@capacitor/clipboard';
 import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
+import { Device } from '@capacitor/device';
 import * as i2$6 from '@angular/cdk/platform';
 import * as i3$3 from '@angular/cdk/clipboard';
 import { checkmarkCircle, flag, warning, trash, starOutline, star, search, save, remove as remove$1, print, play, people, navigate, menu, hourglass, contract, colorFill, close, chevronForward, chevronBack, checkmark, camera, calendarOutline, bug, backspace, arrowUp, arrowForward, arrowDown, arrowBack, alertCircle, alert, add } from 'ionicons/icons';
@@ -1329,38 +1330,12 @@ class EnvironmentHttpLoader extends EnvironmentLoader {
     }
 }
 
-class AbstractDateFormat {
-    dateAdapter;
-    translate;
-    datePattern;
-    dateTimePattern;
-    dateTimeSecondsPattern;
-    constructor(dateAdapter, translate) {
-        this.dateAdapter = dateAdapter;
-        this.translate = translate;
-        const translations = translate.instant(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_TIME_SECONDS_PATTERN']);
-        this._updateTranslations(translations);
-    }
+class DateFormatPipe {
+    service = inject(DateFormatService);
     transform(value, args) {
-        const pattern = (args && args.pattern) || (args && args.time ? (args.seconds ? this.dateTimeSecondsPattern : this.dateTimePattern) : this.datePattern);
-        // Keep original moment object, if possible (to avoid a conversion)
-        const date = isMoment(value) ? value : this.dateAdapter.parse(value, DATE_ISO_PATTERN);
-        return (date && this.dateAdapter.format(date, pattern)) || '';
-    }
-    _updateTranslations(translations) {
-        this.datePattern = this._getTranslationValue(translations, 'COMMON.DATE_PATTERN', 'DD/MM/YYYY');
-        this.dateTimePattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_PATTERN', 'DD/MM/YYYY HH:mm');
-        this.dateTimeSecondsPattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_SECONDS_PATTERN', 'DD/MM/YYYY HH:mm:ss');
+        return this.service.transform(value, args);
     }
-    _getTranslationValue(translations, key, defaultValue) {
-        return translations[key] !== key ? translations[key] : defaultValue;
-    }
-}
-class DateFormatPipe extends AbstractDateFormat {
-    constructor(dateAdapter, translate) {
-        super(dateAdapter, translate);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DateFormatPipe, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.21", ngImport: i0, type: DateFormatPipe, isStandalone: false, name: "dateFormat" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DateFormatPipe, decorators: [{
@@ -1369,11 +1344,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                     name: 'dateFormat',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i2.TranslateService }] });
-class DateFormatService extends AbstractDateFormat {
+        }] });
+class DateFormatService {
+    dateAdapter;
+    translate;
+    _datePattern;
+    _dateTimePattern;
+    _dateTimeSecondsPattern;
     _subscription;
+    get datePattern() {
+        return this._datePattern;
+    }
+    get dateTimePattern() {
+        return this._dateTimePattern;
+    }
+    get dateTimeSecondsPattern() {
+        return this._dateTimeSecondsPattern;
+    }
     constructor(dateAdapter, translate) {
-        super(dateAdapter, translate);
+        this.dateAdapter = dateAdapter;
+        this.translate = translate;
+        const translations = translate.instant(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_TIME_SECONDS_PATTERN']);
+        this._updateTranslations(translations);
         // Subscribe to changes (e.g. when platform not ready yet)
         this._subscription = translate
             .get(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_TIME_SECONDS_PATTERN'])
@@ -1382,12 +1374,26 @@ class DateFormatService extends AbstractDateFormat {
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
-    format(date, pattern) {
-        return this.dateAdapter.format(date, pattern);
+    transform(value, args) {
+        const pattern = (args && args.pattern) || (args && args.time ? (args.seconds ? this.dateTimeSecondsPattern : this.dateTimePattern) : this.datePattern);
+        // Keep original moment object, if possible (to avoid a conversion)
+        const date = isMoment(value) ? value : this.dateAdapter.parse(value, DATE_ISO_PATTERN);
+        return (date && this.dateAdapter.format(date, pattern)) || '';
+    }
+    format(date, displayFormat) {
+        return this.dateAdapter.format(date, displayFormat);
     }
     parse(value, parseFormat) {
         return isMoment(value) ? value : this.dateAdapter.parse(value, parseFormat || DATE_ISO_PATTERN);
     }
+    _updateTranslations(translations) {
+        this._datePattern = this._getTranslationValue(translations, 'COMMON.DATE_PATTERN', 'DD/MM/YYYY');
+        this._dateTimePattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_PATTERN', 'DD/MM/YYYY HH:mm');
+        this._dateTimeSecondsPattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_SECONDS_PATTERN', 'DD/MM/YYYY HH:mm:ss');
+    }
+    _getTranslationValue(translations, key, defaultValue) {
+        return translations[key] !== key ? translations[key] : defaultValue;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DateFormatService, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DateFormatService, providedIn: 'root' });
 }
@@ -6538,6 +6544,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }] });
 
+class TimeFormatPipe {
+    dateAdapter = inject(MomentDateAdapter);
+    transform(value, args) {
+        const pattern = args?.pattern || (args?.seconds ? 'HH:mm:ss' : 'HH:mm');
+        // Keep original moment object, if possible (to avoid a conversion)
+        const date = isMoment(value) ? value : this.dateAdapter.parse(value, DATE_ISO_PATTERN);
+        return (date && this.dateAdapter.format(date, pattern)) || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TimeFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.21", ngImport: i0, type: TimeFormatPipe, isStandalone: false, name: "timeFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TimeFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'timeFormat',
+                    standalone: false
+                }]
+        }] });
+
 const components$1 = [
     PropertyGetPipe,
     PropertyFormatPipe,
@@ -6547,6 +6572,7 @@ const components$1 = [
     DurationPipe,
     DateFromPipe,
     DateFromNowPipe,
+    TimeFormatPipe,
     LatLongFormatPipe,
     LatitudeFormatPipe,
     LongitudeFormatPipe,
@@ -6640,6 +6666,7 @@ class SharedPipesModule {
             DurationPipe,
             DateFromPipe,
             DateFromNowPipe,
+            TimeFormatPipe,
             LatLongFormatPipe,
             LatitudeFormatPipe,
             LongitudeFormatPipe,
@@ -6729,6 +6756,7 @@ class SharedPipesModule {
             DurationPipe,
             DateFromPipe,
             DateFromNowPipe,
+            TimeFormatPipe,
             LatLongFormatPipe,
             LatitudeFormatPipe,
             LongitudeFormatPipe,
@@ -7105,6 +7133,7 @@ class CapacitorPlugins {
     static StatusBar = 'StatusBar';
     static Keyboard = 'Keyboard';
     static EdgeToEdge = 'EdgeToEdge';
+    static Device = 'Device';
     //static readonly BarcodeScanner = 'BarcodeScanner';
     static isAvailable = Capacitor.isPluginAvailable;
 }
@@ -8379,6 +8408,28 @@ function isMobile(win) {
 function isPrint(win) {
     return matchMedia(win, 'print');
 }
+function isWebAnimationsSupported() {
+    if (typeof document === 'undefined' || typeof Element === 'undefined') {
+        return false;
+    }
+    if (typeof Element.prototype.animate !== 'function') {
+        return false;
+    }
+    try {
+        // Test minimal
+        const el = document.createElement('div');
+        // On n’append plus forcément au body
+        const animation = el.animate([{ opacity: 0.5, offset: 0.5 }, { opacity: 1 }], { duration: 1 });
+        animation.cancel();
+        console.debug('[app] Web animations are well supported');
+        return true;
+    }
+    catch {
+        // Continue
+    }
+    console.warn('[app] Web animations are not supported');
+    return false;
+}
 
 class TreeItemEntityUtils {
     static forward(node, filterFn, loopCount) {
@@ -11483,18 +11534,33 @@ class MatDateTime {
         }
     }
     openTimePicker(event, timePicker = this.timePicker) {
-        if (!timePicker || this.disabled)
+        if (!timePicker || this.disabled || event?.defaultPrevented)
             return; // Skip
         this._preventEvent(event);
+        this._watchTimePickerOverlay();
         timePicker.open();
-        setTimeout(() => {
-            this.fixTimePickerPosition();
+    }
+    /**
+     * Watches for the ngx-mat-timepicker overlay pane being attached to the DOM, so its position can
+     * be fixed (see `fixTimePickerPosition()`) before the browser paints it - otherwise the popover
+     * would briefly flash at its (wrong) initial position before jumping to the corrected one.
+     */
+    _watchTimePickerOverlay() {
+        // Observe `document.body` rather than `.cdk-overlay-container`: on the very first overlay
+        // opened on the page, that container does not exist yet - it is itself created lazily as part
+        // of this very `open()` call.
+        const observer = new MutationObserver(() => {
+            const overlayPane = document.querySelector('.cdk-overlay-pane:has(ngx-mat-timepicker-provider)');
+            if (!overlayPane)
+                return;
+            observer.disconnect();
+            this.fixTimePickerPosition(overlayPane);
         });
+        observer.observe(document.body, { childList: true, subtree: true });
+        // Safety net: never watch indefinitely if the overlay pane was somehow never attached.
+        setTimeout(() => observer.disconnect(), 2000);
     }
-    fixTimePickerPosition() {
-        const overlayPane = document.querySelector('.cdk-overlay-pane:has(ngx-mat-timepicker-provider)');
-        if (!overlayPane)
-            return;
+    fixTimePickerPosition(overlayPane) {
         const rect = overlayPane.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
@@ -11648,7 +11714,8 @@ class MatDateTime {
     }
     _onTimePickerChanged(timeStr) {
         // Update the time control, if need
-        if (this.timeControl.value !== timeStr) {
+        // Note: should always emit in mobile mode, because when date picker is validated, for some reason, the time is resetted
+        if (this.timeControl.value !== timeStr || this.mobile) {
             // DEBUG
             // console.debug("[mat-date-time] onTimePickerChange() new value:", timeStr);
             this.timeControl.setValue(timeStr, {
@@ -11730,7 +11797,7 @@ class MatDateTime {
             const dateStr = this.dateControl.value;
             // Auto fill data time/in case of partial input
             if (isNotNilOrBlank(dateStr)) {
-                const timeStr = this.timeControl.value;
+                let timeStr = this.timeControl.value;
                 const date = this.dateAdapter.parse(dateStr, this.datePattern);
                 let validDate = true;
                 if (isNotNilOrBlank(timeStr)) {
@@ -11741,6 +11808,7 @@ class MatDateTime {
                 }
                 // No time, and not required: mark
                 else {
+                    console.debug("[mat-date-time] TODO _onBlur()", date);
                     DateUtils.markNoTime(date);
                     validDate = this.allowNoTime;
                 }
@@ -11965,11 +12033,11 @@ class MatDateTime {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: MatDateTime, isStandalone: false, selector: "mat-date-time-field", inputs: { logPrefix: "logPrefix", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", allowNoTime: ["allowNoTime", "allowNoTime", booleanAttribute], dottedMinutesInGap: ["dottedMinutesInGap", "dottedMinutesInGap", booleanAttribute], timeHoursOnly: ["timeHoursOnly", "timeHoursOnly", booleanAttribute], debug: ["debug", "debug", booleanAttribute], classList: ["class", "classList"], style: "style", hourMinWidth: "hourMinWidth", hourMaxWidth: "hourMaxWidth", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, outputs: { focused: "focus", blurred: "blur", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [DEFAULT_VALUE_ACCESSOR$2], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "_matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{classList}}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }} {{classList}}\" [style]=\"style\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- Day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event, datePicker)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Day input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Day input (desktop) -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\" [disabled]=\"disabled\"\n                        [startAt]=\"startDate\"\n                        [xPosition]=\"!mobile ? 'end' : undefined\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-text>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-text>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- Hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"(compact ? 0 : 1)\"\n               [style.--hour-min-width]=\"hourMinWidth\"\n               [style.--hour-max-width]=\"hourMaxWidth\"\n      >\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ 'COMMON.TIME' | translate }}</mat-label>\n          }\n\n          <!-- Hour input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n\n            <!-- Hide the final (hidden) input -->\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"required\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          } @else {\n            <!-- Hour input (desktop) -->\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n            <!-- Hide the final (hidden) input -->\n            <input\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          }\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <ngx-mat-timepicker\n            #timePicker\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            [dottedMinutesInGap]=\"dottedMinutesInGap\"\n            [hoursOnly]=\"timeHoursOnly\"\n            [appendToInput]=\"!mobile\"\n            (timeSet)=\"_onTimePickerChanged($event)\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_TIME' | translate }}</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_RANGE' | translate }}</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION' | translate }}</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION' | translate }}</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-text>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: var(--hour-min-width, calc(55px + var(--button-count, 0px) * 24px));--max-width: var(--hour-max-width, calc(var(--min-width) + 10px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.fill ion-col.hour mat-form-field ::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i13.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "directive", type: i13.NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: MatDateTime, isStandalone: false, selector: "mat-date-time-field", inputs: { logPrefix: "logPrefix", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", allowNoTime: ["allowNoTime", "allowNoTime", booleanAttribute], dottedMinutesInGap: ["dottedMinutesInGap", "dottedMinutesInGap", booleanAttribute], timeHoursOnly: ["timeHoursOnly", "timeHoursOnly", booleanAttribute], debug: ["debug", "debug", booleanAttribute], classList: ["class", "classList"], style: "style", hourMinWidth: "hourMinWidth", hourMaxWidth: "hourMaxWidth", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, outputs: { focused: "focus", blurred: "blur", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [DEFAULT_VALUE_ACCESSOR$2], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "_matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{classList}}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }} {{classList}}\" [style]=\"style\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- Day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event, datePicker)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Day input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Day input (desktop) -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\" [disabled]=\"disabled\"\n                        [startAt]=\"startDate\"\n                        [xPosition]=\"!mobile ? 'end' : undefined\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-text>{{ (_formControl.value | timeFormat ) || ('COMMON.TIME' | translate) }}</ion-text>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- Hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"(compact ? 0 : 1)\"\n               [style.--hour-min-width]=\"hourMinWidth\"\n               [style.--hour-max-width]=\"hourMaxWidth\"\n      >\n        <!-- Hour (mobile) -->\n        @if (mobile) {\n          <mat-form-field\n            [floatLabel]=\"floatLabel | asFloatLabelType\"\n            [appearance]=\"appearance\"\n            [subscriptSizing]=\"'dynamic'\"\n            [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n            [ngxMatTimepicker]=\"timePicker\"\n            [disableClick]=\"true\"\n            (click)=\"openTimePicker($event)\"\n            [format]=\"24\"\n          >\n            @if (floatLabel !== 'never' && !!placeholder) {\n              <mat-label>{{ 'COMMON.TIME' | translate }}</mat-label>\n            }\n\n            <input matInput\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              readonly\n            />\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n\n            @if (!compact) {\n              <button\n                matSuffix\n                type=\"button\"\n                mat-icon-button\n                tabindex=\"-1\"\n                [disabled]=\"_formControl.disabled\"\n                (click)=\"openTimePicker($event)\"\n              >\n                <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n              </button>\n            }\n\n            <ngx-mat-timepicker\n              #timePicker\n              [isEsc]=\"!mobile\"\n              [defaultTime]=\"_formControl.value | timeFormat\"\n              [cancelBtnTmpl]=\"timePickerCancelButton\"\n              [confirmBtnTmpl]=\"timePickerOkButton\"\n              [preventOverlayClick]=\"true\"\n              [enableKeyboardInput]=\"false\"\n              [dottedMinutesInGap]=\"dottedMinutesInGap\"\n              [hoursOnly]=\"timeHoursOnly\"\n              [appendToInput]=\"false\"\n              (timeSet)=\"_onTimePickerChanged($event)\"\n              color=\"accent\"\n            ></ngx-mat-timepicker>\n          </mat-form-field>\n\n          <!-- Hour (desktop) -->\n        } @else {\n          <mat-form-field\n            [floatLabel]=\"floatLabel | asFloatLabelType\"\n            [appearance]=\"appearance\"\n            [subscriptSizing]=\"'dynamic'\"\n            [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n            [ngxMatTimepicker]=\"timePicker\"\n            [disableClick]=\"true\"\n            [format]=\"24\"\n          >\n\n            @if (floatLabel !== 'never' && !!placeholder) {\n              <mat-label>{{ 'COMMON.TIME' | translate }}</mat-label>\n            }\n            <!-- Hour input (desktop) -->\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n\n            @if (!compact) {\n              <button\n                matSuffix\n                type=\"button\"\n                mat-icon-button\n                tabindex=\"-1\"\n                [disabled]=\"_formControl.disabled\"\n                (click)=\"openTimePicker($event)\"\n              >\n                <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n              </button>\n            }\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n\n            <ngx-mat-timepicker\n              #timePicker\n              [isEsc]=\"true\"\n              [defaultTime]=\"_formControl.value | timeFormat\"\n              [cancelBtnTmpl]=\"timePickerCancelButton\"\n              [confirmBtnTmpl]=\"timePickerOkButton\"\n              [preventOverlayClick]=\"false\"\n              [enableKeyboardInput]=\"true\"\n              [dottedMinutesInGap]=\"dottedMinutesInGap\"\n              [hoursOnly]=\"timeHoursOnly\"\n              [appendToInput]=\"true\"\n              (timeSet)=\"_onTimePickerChanged($event)\"\n              color=\"accent\"\n            ></ngx-mat-timepicker>\n          </mat-form-field>\n        }\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_TIME' | translate }}</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_RANGE' | translate }}</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION' | translate }}</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION' | translate }}</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-text>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: var(--hour-min-width, calc(55px + var(--button-count, 0px) * 24px));--max-width: var(--hour-max-width, calc(var(--min-width) + 10px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.fill ion-col.hour mat-form-field ::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i13.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "directive", type: i13.NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: TimeFormatPipe, name: "timeFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{classList}}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }} {{classList}}\" [style]=\"style\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- Day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event, datePicker)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Day input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Day input (desktop) -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\" [disabled]=\"disabled\"\n                        [startAt]=\"startDate\"\n                        [xPosition]=\"!mobile ? 'end' : undefined\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-text>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-text>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- Hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"(compact ? 0 : 1)\"\n               [style.--hour-min-width]=\"hourMinWidth\"\n               [style.--hour-max-width]=\"hourMaxWidth\"\n      >\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ 'COMMON.TIME' | translate }}</mat-label>\n          }\n\n          <!-- Hour input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n\n            <!-- Hide the final (hidden) input -->\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"required\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          } @else {\n            <!-- Hour input (desktop) -->\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n            <!-- Hide the final (hidden) input -->\n            <input\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          }\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <ngx-mat-timepicker\n            #timePicker\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            [dottedMinutesInGap]=\"dottedMinutesInGap\"\n            [hoursOnly]=\"timeHoursOnly\"\n            [appendToInput]=\"!mobile\"\n            (timeSet)=\"_onTimePickerChanged($event)\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_TIME' | translate }}</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_RANGE' | translate }}</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION' | translate }}</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION' | translate }}</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-text>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: var(--hour-min-width, calc(55px + var(--button-count, 0px) * 24px));--max-width: var(--hour-max-width, calc(var(--min-width) + 10px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.fill ion-col.hour mat-form-field ::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
+            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{classList}}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }} {{classList}}\" [style]=\"style\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- Day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event, datePicker)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Day input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Day input (desktop) -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\" [disabled]=\"disabled\"\n                        [startAt]=\"startDate\"\n                        [xPosition]=\"!mobile ? 'end' : undefined\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-text>{{ (_formControl.value | timeFormat ) || ('COMMON.TIME' | translate) }}</ion-text>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- Hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"(compact ? 0 : 1)\"\n               [style.--hour-min-width]=\"hourMinWidth\"\n               [style.--hour-max-width]=\"hourMaxWidth\"\n      >\n        <!-- Hour (mobile) -->\n        @if (mobile) {\n          <mat-form-field\n            [floatLabel]=\"floatLabel | asFloatLabelType\"\n            [appearance]=\"appearance\"\n            [subscriptSizing]=\"'dynamic'\"\n            [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n            [ngxMatTimepicker]=\"timePicker\"\n            [disableClick]=\"true\"\n            (click)=\"openTimePicker($event)\"\n            [format]=\"24\"\n          >\n            @if (floatLabel !== 'never' && !!placeholder) {\n              <mat-label>{{ 'COMMON.TIME' | translate }}</mat-label>\n            }\n\n            <input matInput\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              readonly\n            />\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n\n            @if (!compact) {\n              <button\n                matSuffix\n                type=\"button\"\n                mat-icon-button\n                tabindex=\"-1\"\n                [disabled]=\"_formControl.disabled\"\n                (click)=\"openTimePicker($event)\"\n              >\n                <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n              </button>\n            }\n\n            <ngx-mat-timepicker\n              #timePicker\n              [isEsc]=\"!mobile\"\n              [defaultTime]=\"_formControl.value | timeFormat\"\n              [cancelBtnTmpl]=\"timePickerCancelButton\"\n              [confirmBtnTmpl]=\"timePickerOkButton\"\n              [preventOverlayClick]=\"true\"\n              [enableKeyboardInput]=\"false\"\n              [dottedMinutesInGap]=\"dottedMinutesInGap\"\n              [hoursOnly]=\"timeHoursOnly\"\n              [appendToInput]=\"false\"\n              (timeSet)=\"_onTimePickerChanged($event)\"\n              color=\"accent\"\n            ></ngx-mat-timepicker>\n          </mat-form-field>\n\n          <!-- Hour (desktop) -->\n        } @else {\n          <mat-form-field\n            [floatLabel]=\"floatLabel | asFloatLabelType\"\n            [appearance]=\"appearance\"\n            [subscriptSizing]=\"'dynamic'\"\n            [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n            [ngxMatTimepicker]=\"timePicker\"\n            [disableClick]=\"true\"\n            [format]=\"24\"\n          >\n\n            @if (floatLabel !== 'never' && !!placeholder) {\n              <mat-label>{{ 'COMMON.TIME' | translate }}</mat-label>\n            }\n            <!-- Hour input (desktop) -->\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n\n            @if (!compact) {\n              <button\n                matSuffix\n                type=\"button\"\n                mat-icon-button\n                tabindex=\"-1\"\n                [disabled]=\"_formControl.disabled\"\n                (click)=\"openTimePicker($event)\"\n              >\n                <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n              </button>\n            }\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n\n            <ngx-mat-timepicker\n              #timePicker\n              [isEsc]=\"true\"\n              [defaultTime]=\"_formControl.value | timeFormat\"\n              [cancelBtnTmpl]=\"timePickerCancelButton\"\n              [confirmBtnTmpl]=\"timePickerOkButton\"\n              [preventOverlayClick]=\"false\"\n              [enableKeyboardInput]=\"true\"\n              [dottedMinutesInGap]=\"dottedMinutesInGap\"\n              [hoursOnly]=\"timeHoursOnly\"\n              [appendToInput]=\"true\"\n              (timeSet)=\"_onTimePickerChanged($event)\"\n              color=\"accent\"\n            ></ngx-mat-timepicker>\n          </mat-form-field>\n        }\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_TIME' | translate }}</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_RANGE' | translate }}</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION' | translate }}</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error>{{ 'ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION' | translate }}</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-text>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-text>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-text>\n  </ion-button>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: var(--hour-min-width, calc(55px + var(--button-count, 0px) * 24px));--max-width: var(--hour-max-width, calc(var(--min-width) + 10px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.fill ion-col.hour mat-form-field ::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i2.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -16188,14 +16256,32 @@ class UploadFileComponent {
     translate;
     fileDropEl;
     fileExtension;
+    fileExtensionsExcluded = [];
     uniqueFile = false;
     instantUpload = false;
     uploadFn;
     deleteFn;
     maxParallelUpload;
+    maxFileSizeMb;
     autoHideDropArea = false;
     files = [];
     uploading = false;
+    checks = [
+        // Check blacklisted extensions
+        {
+            isEnabled: () => !isEmptyArray(this.fileExtensionsExcluded),
+            hasError: (file) => this.fileExtensionsExcluded
+                .map((ext) => ext.toLowerCase())
+                .some((ext) => file.name.toLowerCase().endsWith(ext)),
+            error: 'FILE.UPLOAD.EXTENSION_NOT_ALLOWED_ERROR',
+        },
+        // Check max file size
+        {
+            isEnabled: () => isNotNil(this.maxFileSizeMb) && this.maxFileSizeMb > 0,
+            hasError: (file) => file.size > this.maxFileSizeMb * 1024 * 1024,
+            error: 'FILE.UPLOAD.MAX_FILE_SIZE_ERROR',
+        },
+    ];
     get processingFiles() {
         return this.files.filter((f) => !f.deleting && isNotNil(f.progress) && f.progress < 1);
     }
@@ -16276,6 +16362,7 @@ class UploadFileComponent {
             items = files;
         }
         this.files.push(...items);
+        this.checkFiles();
         this.fileDropEl.nativeElement.value = '';
         this.cd.markForCheck();
         // Start upload
@@ -16283,6 +16370,20 @@ class UploadFileComponent {
             this.uploadFiles(items);
         }
     }
+    checkFiles() {
+        const noCheckToDo = isEmptyArray(this.checks) || this.checks.every((check) => !check.isEnabled()) || isEmptyArray(this.files);
+        if (noCheckToDo) {
+            return;
+        }
+        this.checks
+            .filter((check) => check.isEnabled())
+            .flatMap((check) => this.files.map((file) => file).map((file) => ({ file, check })))
+            .forEach((c) => {
+            if (!c.file.error && c.check.hasError(c.file)) {
+                c.file.error = c.check.error;
+            }
+        });
+    }
     /**
      * Execute upload
      */
@@ -16361,16 +16462,18 @@ class UploadFileComponent {
         return waitFor(() => this.processingFilesCount === 0, opts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: UploadFileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: UploadFileComponent, isStandalone: false, selector: "app-upload-file", inputs: { fileExtension: "fileExtension", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", autoHideDropArea: "autoHideDropArea" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "@if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        <mat-icon slot=\"start\">description</mat-icon>\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DragAndDropDirective, selector: "[appDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: UploadFileComponent, isStandalone: false, selector: "app-upload-file", inputs: { fileExtension: "fileExtension", fileExtensionsExcluded: "fileExtensionsExcluded", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", maxFileSizeMb: "maxFileSizeMb", autoHideDropArea: "autoHideDropArea" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "@if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        <mat-icon slot=\"start\">description</mat-icon>\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text\n              color=\"danger\"\n              [innerHTML]=\"file.error | translate: { fileExtensionsExcluded: fileExtensionsExcluded.join(', '), maxFileSizeMb: maxFileSizeMb }\"\n            ></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DragAndDropDirective, selector: "[appDragAndDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: UploadFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-upload-file', standalone: false, template: "@if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        <mat-icon slot=\"start\">description</mat-icon>\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"] }]
+            args: [{ selector: 'app-upload-file', standalone: false, template: "@if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {\n  <div class=\"container\" appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n    <input\n      type=\"file\"\n      #fileDropRef\n      id=\"fileDropRef\"\n      [multiple]=\"!uniqueFile\"\n      [accept]=\"fileExtension\"\n      (change)=\"fileBrowseHandler($any($event.target).files)\"\n    />\n    <mat-icon style=\"font-size: xx-large\" color=\"accent\" class=\"text-size\">upload</mat-icon>\n    <ion-label><span\n      [innerHTML]=\"\n        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n      \"\n    ></span></ion-label>\n    <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n  </div>\n}\n<div class=\"files-list\">\n  <ion-list>\n    @for (file of files; track file; let i = $index) {\n      <ion-item>\n        <mat-icon slot=\"start\">description</mat-icon>\n        <div class=\"single-file\">\n          <ion-label>\n            <h4 class=\"name\" [class.deleting]=\"file.deleting\">\n              {{ file.name }}\n            </h4>\n            <p>\n              {{ file.size | fileSize }}\n            </p>\n          </ion-label>\n          @if (uploading && !file.error) {\n            <ion-progress-bar\n              [value]=\"file.progress || 0\"\n              [type]=\"file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'\"\n            ></ion-progress-bar>\n          }\n          @if (file.error) {\n            <ion-text\n              color=\"danger\"\n              [innerHTML]=\"file.error | translate: { fileExtensionsExcluded: fileExtensionsExcluded.join(', '), maxFileSizeMb: maxFileSizeMb }\"\n            ></ion-text>\n          }\n        </div>\n        <!-- remote from list (before importation) -->\n        @if (!file.progress || file.error) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n        <!-- delete file (remotely - after importation) -->\n        @if (file.progress === 1 && !!deleteFn && !file.deleting) {\n          <button mat-icon-button slot=\"end\" (click)=\"deleteFile(i)\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        }\n      </ion-item>\n    }\n  </ion-list>\n</div>\n", styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:dashed 1px #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{border:solid 1px var(--ion-color-accent)}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-direction:column}.files-list .single-file .name{word-break:break-all}.files-list .single-file .name.deleting{color:gray!important;font-style:italic!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.TranslateService }], propDecorators: { fileDropEl: [{
                 type: ViewChild,
                 args: ['fileDropRef', { static: false }]
             }], fileExtension: [{
                 type: Input
+            }], fileExtensionsExcluded: [{
+                type: Input
             }], uniqueFile: [{
                 type: Input
             }], instantUpload: [{
@@ -16381,6 +16484,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                 type: Input
             }], maxParallelUpload: [{
                 type: Input
+            }], maxFileSizeMb: [{
+                type: Input
             }], autoHideDropArea: [{
                 type: Input
             }] } });
@@ -16391,12 +16496,14 @@ class UploadFilePopover {
     cd;
     uploader;
     fileExtension;
+    fileExtensionsExcluded = [];
     title;
     uniqueFile = false;
     instantUpload = false;
     uploadFn;
     deleteFn;
     maxParallelUpload;
+    maxFileSizeMb;
     autoHideDropArea = false;
     okButtonText = 'COMMON.BTN_IMPORT';
     cancelButtonText = 'COMMON.BTN_CANCEL';
@@ -16406,7 +16513,7 @@ class UploadFilePopover {
         return this.uploader.files;
     }
     get disabled() {
-        return this.importing || isEmptyArray(this.files);
+        return this.importing || isEmptyArray(this.files) || this.files.every((file) => file.error);
     }
     get valid() {
         return isNotEmptyArray(this.files);
@@ -16463,16 +16570,18 @@ class UploadFilePopover {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: UploadFilePopover, deps: [{ token: i2$2.PopoverController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: UploadFilePopover, isStandalone: false, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", autoHideDropArea: "autoHideDropArea", okButtonText: "okButtonText", cancelButtonText: "cancelButtonText" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload", "autoHideDropArea"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: UploadFilePopover, isStandalone: false, selector: "app-upload-file-popover", inputs: { fileExtension: "fileExtension", fileExtensionsExcluded: "fileExtensionsExcluded", title: "title", uniqueFile: "uniqueFile", instantUpload: "instantUpload", uploadFn: "uploadFn", deleteFn: "deleteFn", maxParallelUpload: "maxParallelUpload", maxFileSizeMb: "maxFileSizeMb", autoHideDropArea: "autoHideDropArea", okButtonText: "okButtonText", cancelButtonText: "cancelButtonText" }, viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true, static: true }], ngImport: i0, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [fileExtensionsExcluded]=\"fileExtensionsExcluded\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [maxFileSizeMb]=\"maxFileSizeMb\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: UploadFileComponent, selector: "app-upload-file", inputs: ["fileExtension", "fileExtensionsExcluded", "uniqueFile", "instantUpload", "uploadFn", "deleteFn", "maxParallelUpload", "maxFileSizeMb", "autoHideDropArea"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: UploadFilePopover, decorators: [{
             type: Component,
-            args: [{ selector: 'app-upload-file-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"] }]
+            args: [{ selector: 'app-upload-file-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <app-upload-file\n    #uploader\n    [uploadFn]=\"uploadFn\"\n    [deleteFn]=\"deleteFn\"\n    [fileExtension]=\"fileExtension\"\n    [fileExtensionsExcluded]=\"fileExtensionsExcluded\"\n    [instantUpload]=\"instantUpload\"\n    [uniqueFile]=\"uniqueFile\"\n    [maxParallelUpload]=\"maxParallelUpload\"\n    [maxFileSizeMb]=\"maxFileSizeMb\"\n    [autoHideDropArea]=\"autoHideDropArea\"\n  ></app-upload-file>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding ion-nowrap\">\n      <ion-col>\n        @if (importing) {\n          <div class=\"importing-info\">\n            <ion-text color=\"medium\"><small>{{ 'FILE.UPLOAD.IMPORTING' | translate }}</small></ion-text>\n            &nbsp;\n            <ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n          </div>\n        }\n        @if (error) {\n          <ion-item lines=\"none\" color=\"transparent\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"ion-text-wrap\">\n              <small [innerHTML]=\"error | translate\"></small>\n            </ion-label>\n          </ion-item>\n        }\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-text [innerHTML]=\"cancelButtonText | translate\"></ion-text>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-text [innerHTML]=\"okButtonText | translate\"></ion-text>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.PopoverController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { uploader: [{
                 type: ViewChild,
                 args: ['uploader', { static: true }]
             }], fileExtension: [{
                 type: Input
+            }], fileExtensionsExcluded: [{
+                type: Input
             }], title: [{
                 type: Input
             }], uniqueFile: [{
@@ -16485,6 +16594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                 type: Input
             }], maxParallelUpload: [{
                 type: Input
+            }], maxFileSizeMb: [{
+                type: Input
             }], autoHideDropArea: [{
                 type: Input
             }], okButtonText: [{
@@ -19339,8 +19450,15 @@ class VersionUtils {
  * @returns {number} -1 if v1 < v2, 0 if equal, 1 if v1 > v2
  */
 function compareVersionNumbers(v1, v2, comparePrerelease = false) {
-    const m1 = v1.match(SEMVER_2_REGEXP);
-    const m2 = v2.match(SEMVER_2_REGEXP);
+    const padVersion = (v) => {
+        const parts = v.split('.');
+        while (parts.length < 3) {
+            parts.push('0');
+        }
+        return parts.join('.');
+    };
+    const m1 = padVersion(v1).match(SEMVER_2_REGEXP);
+    const m2 = padVersion(v2).match(SEMVER_2_REGEXP);
     if (!m1 || !m2) {
         return NaN;
     }
@@ -21127,6 +21245,12 @@ class NetworkService extends StartableObservableService {
         return Promise.resolve(peers);
     }
     showToast(opts) {
+        // Make sure local has been load
+        if (!this.started) {
+            return this.ready().then(() => {
+                return Toasts.show(this.toastController, this.translate, opts);
+            });
+        }
         return Toasts.show(this.toastController, this.translate, opts);
     }
     addListener(name, callback) {
@@ -23982,8 +24106,11 @@ class Alerts {
      * @param alertCtrl
      * @param translate
      * @param event
+     * @param opts
+     * @param opts.backdropDismiss Whether the alert can be dismissed by clicking the backdrop (default: false)
+     * @param opts.keyboardClose Whether the alert can be dismissed by pressing the back button (default: true)
      */
-    static async askSaveBeforeLeave(alertCtrl, translate, event) {
+    static async askSaveBeforeLeave(alertCtrl, translate, event, opts) {
         let confirm = false;
         let cancel = false;
         const translations = translate.instant([
@@ -24017,8 +24144,8 @@ class Alerts {
                     },
                 },
             ],
-            backdropDismiss: false,
-            keyboardClose: false,
+            backdropDismiss: opts?.backdropDismiss ?? false,
+            keyboardClose: opts?.keyboardClose ?? false,
         });
         await alert.present();
         await alert.onDidDismiss();
@@ -24040,10 +24167,12 @@ class Alerts {
      * @param immediate is action has an immediate effect ?
      * @param event
      * @param interpolateParams
+     * @param opts
+     * @param opts.backdropDismiss Whether the alert can be dismissed by clicking the backdrop (default: false)
      */
-    static async askActionConfirmation(alertCtrl, translate, immediate, event, interpolateParams) {
+    static async askActionConfirmation(alertCtrl, translate, immediate, event, opts, interpolateParams) {
         const messageKey = immediate === true ? 'CONFIRM.ACTION_IMMEDIATE' : 'CONFIRM.ACTION';
-        return Alerts.askConfirmation(messageKey, alertCtrl, translate, event, interpolateParams);
+        return Alerts.askConfirmation(messageKey, alertCtrl, translate, event, opts, interpolateParams);
     }
     /**
      * Ask the user to confirm. If return undefined: user has cancelled
@@ -24054,13 +24183,18 @@ class Alerts {
      * @param translate
      * @param event
      * @param interpolateParams
+     * @param opts
+     * @param opts.backdropDismiss Whether the alert can be dismissed by clicking the backdrop (default: false)
      */
-    static async askConfirmation(messageKey, alertCtrl, translate, event, interpolateParams) {
+    static async askConfirmation(messageKey, alertCtrl, translate, event, opts, interpolateParams) {
         if (!alertCtrl || !translate)
             throw new Error("Missing required argument 'alertCtrl' or 'translate'");
         let confirm = false;
         let cancel = false;
-        const translations = translate.instant(['COMMON.BTN_YES_CONTINUE', 'COMMON.BTN_CANCEL', messageKey, 'CONFIRM.ALERT_HEADER'], interpolateParams);
+        const translations = translate.instant(['COMMON.BTN_YES_CONTINUE', 'COMMON.BTN_CANCEL', messageKey, 'CONFIRM.ALERT_HEADER'], {
+            ...interpolateParams,
+            ...opts,
+        });
         const alert = await alertCtrl.create({
             header: translations['CONFIRM.ALERT_HEADER'],
             message: translations[messageKey],
@@ -24080,8 +24214,8 @@ class Alerts {
                     },
                 },
             ],
-            backdropDismiss: false,
-            keyboardClose: false,
+            backdropDismiss: opts?.backdropDismiss ?? false,
+            keyboardClose: opts?.keyboardClose ?? false,
         });
         await alert.present();
         await alert.onDidDismiss();
@@ -24102,11 +24236,16 @@ class Alerts {
      * @param translate
      * @param event
      * @param interpolateParams
+     * @param opts
+     * @param opts.backdropDismiss Whether the alert can be dismissed by clicking the backdrop (default: false)
      */
-    static async askDeleteConfirmation(alertCtrl, translate, event, interpolateParams) {
+    static async askDeleteConfirmation(alertCtrl, translate, event, opts, interpolateParams) {
         let confirm = false;
         let cancel = false;
-        const translations = translate.instant(['COMMON.BTN_YES_DELETE', 'COMMON.BTN_CANCEL', 'CONFIRM.DELETE', 'CONFIRM.ALERT_HEADER'], interpolateParams);
+        const translations = translate.instant(['COMMON.BTN_YES_DELETE', 'COMMON.BTN_CANCEL', 'CONFIRM.DELETE', 'CONFIRM.ALERT_HEADER'], {
+            ...interpolateParams,
+            ...opts,
+        });
         const alert = await alertCtrl.create({
             header: translations['CONFIRM.ALERT_HEADER'],
             message: translations['CONFIRM.DELETE'],
@@ -24126,8 +24265,8 @@ class Alerts {
                     },
                 },
             ],
-            backdropDismiss: false,
-            keyboardClose: false,
+            backdropDismiss: opts?.backdropDismiss ?? false,
+            keyboardClose: opts?.keyboardClose ?? false,
         });
         await alert.present();
         await alert.onDidDismiss();
@@ -24175,8 +24314,8 @@ class Alerts {
                         },
                     },
                 ],
-                backdropDismiss: false,
-                keyboardClose: false,
+                backdropDismiss: opts?.backdropDismiss ?? false,
+                keyboardClose: opts?.keyboardClose ?? false,
             });
         }
         else {
@@ -24198,8 +24337,8 @@ class Alerts {
                         handler: () => { },
                     },
                 ],
-                backdropDismiss: false,
-                keyboardClose: false,
+                backdropDismiss: opts?.backdropDismiss ?? false,
+                keyboardClose: opts?.keyboardClose ?? false,
             });
         }
         await alert.present();
@@ -24220,8 +24359,8 @@ class Alerts {
                     role: 'cancel',
                 },
             ],
-            backdropDismiss: false,
-            keyboardClose: false,
+            backdropDismiss: opts?.backdropDismiss ?? false,
+            keyboardClose: opts?.keyboardClose ?? false,
         });
         await alert.present();
         await alert.onDidDismiss();
@@ -26328,7 +26467,7 @@ class PlatformService extends StartableService {
     }
     download(request) {
         if (!request || !request.uri)
-            throw new Error("Missing argument 'request' or 'request.uri'");
+            throw new Error('Missing argument \'request\' or \'request.uri\'');
         if (this.canDownload) {
             // Check if not already downloading file
             let job$ = this._downloadingJobs.get(request.uri);
@@ -26578,7 +26717,7 @@ class PlatformService extends StartableService {
     }
     showToast(opts) {
         if (!this.toastController)
-            throw new Error("Missing toastController in component's constructor");
+            throw new Error('Missing toastController in component\'s constructor');
         return new Promise((resolve) => Toasts.show(this.toastController, this.translate, {
             ...opts,
             onWillPresent: (t) => resolve(t),
@@ -26587,6 +26726,18 @@ class PlatformService extends StartableService {
     async closeToast(id) {
         return this.toastController?.dismiss(null, null, id);
     }
+    async getDeviceInfo() {
+        if (!this.isApp())
+            return null;
+        try {
+            return await Device.getInfo();
+        }
+        catch (err) {
+            const logMessage = `Error while calling Device plugin: ${err.message || err}\n${err?.originalStack || JSON.stringify(err)}`;
+            console.error('[platform] ' + logMessage);
+            this._logger?.error('deviceInfo', logMessage);
+        }
+    }
     /* -- protected methods -- */
     async configureTheme(mobile, win = window) {
         // Listen for changes to settings dark mode
@@ -26615,19 +26766,37 @@ class PlatformService extends StartableService {
         console.info('[platform] Configuring Capacitor plugins...');
         let pluginName;
         try {
+            // Get device info
+            pluginName = CapacitorPlugins.Device;
+            const deviceInfo = await this.getDeviceInfo();
+            // Enable Edge-to-edge plugin on Android 15+
+            // - disable for Android <=15 (fix issue sumaris-app#2076)
+            // - disable for Android >=17 (edge to edge mode)
             pluginName = CapacitorPlugins.EdgeToEdge;
             if (this.isApp() && this.isAndroid()) {
-                await EdgeToEdge.enable();
+                const enabled = VersionUtils.isCompatible('15', deviceInfo?.osVersion)
+                    && !VersionUtils.isCompatible('17', deviceInfo?.osVersion);
+                console.debug(`[platform] Android EdgeToEdge ${enabled ? 'enabled' : 'disabled'} - OS version: ${deviceInfo?.osVersion}`);
+                if (enabled) {
+                    await EdgeToEdge.enable();
+                }
+                else {
+                    await EdgeToEdge.disable();
+                }
             }
+            // Avoid statusbar overlays on iOS and Android 14+
             pluginName = CapacitorPlugins.StatusBar;
             if (this.isApp()) {
-                // Avoid overlays (Android 15 or iOS)
-                await StatusBar.setOverlaysWebView({ overlay: false });
+                const statusBarOverlay = this.isAndroid() && VersionUtils.isCompatible('17', deviceInfo?.osVersion);
+                console.debug(`[platform] StatusBar overlay ${statusBarOverlay ? 'enabled' : 'disabled'} - OS version: ${deviceInfo?.osVersion}`);
+                await StatusBar.setOverlaysWebView({ overlay: statusBarOverlay });
             }
             // Hide accessory bar (iOS only)
             if (this.isApp() && this.isIOS()) {
                 pluginName = CapacitorPlugins.Keyboard;
-                await Keyboard.setAccessoryBarVisible({ isVisible: false });
+                // Let Capacitor config handle accessory bar
+                // Comment out, because we sometime we need the accessory bar
+                //await Keyboard.setAccessoryBarVisible({ isVisible: false });
             }
         }
         catch (err) {
@@ -26706,7 +26875,7 @@ class PlatformService extends StartableService {
             console.info('[platform] Checking remote app version...');
         const actualVersion = this.environment.version;
         if (isNilOrBlank(actualVersion)) {
-            console.error("[platform] Missing required value for 'environment.version'. Cannot check remote app version.");
+            console.error('[platform] Missing required value for \'environment.version\'. Cannot check remote app version.');
             this.checkAppVersionTimer?.unsubscribe(); // Stop timer if exists
             return; // Skip
         }
@@ -28302,6 +28471,9 @@ class AppImageGallerySlideshowComponent {
     cd;
     activeSlideIndex = 0;
     swiperModules = [IonicSlides];
+    get activeIndex() {
+        return this.activeSlideIndex;
+    }
     _swiper;
     // Mouse wheel zoom & rotation state
     _zoomState = { scale: 1, tx: 0, ty: 0 };
@@ -29288,6 +29460,14 @@ class AppImageGalleryComponent {
      */
     fetchMore = createPromiseEventEmitter();
     showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
+    slideshowOpened = new EventEmitter();
+    slideshowClosed = new EventEmitter();
+    get activeIndex() {
+        if (!this.inlineSlideshow)
+            throw new Error('Cannot get slide active index while inline slideshow is open');
+        return this.inlineSlideshow.activeIndex;
+    }
+    inlineSlideshow;
     constructor(imageService, platform, alterCtrl, translate, cd, environment) {
         this.imageService = imageService;
         this.platform = platform;
@@ -29355,7 +29535,7 @@ class AppImageGalleryComponent {
         event?.preventDefault();
         event?.stopPropagation();
         // Check using emitter
-        const confirmed = await this.canDeleteRows([row]);
+        const confirmed = await this.canDeleteRows([row], opts);
         if (!confirmed)
             return false;
         let deleted;
@@ -29520,7 +29700,7 @@ class AppImageGalleryComponent {
             }
         }
         if (this.confirmBeforeDelete) {
-            const confirmed = await Alerts.askDeleteConfirmation(this.alterCtrl, this.translate, event);
+            const confirmed = await Alerts.askDeleteConfirmation(this.alterCtrl, this.translate, undefined, opts);
             if (!confirmed)
                 return false; // Cancelled
         }
@@ -29538,7 +29718,7 @@ class AppImageGalleryComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", 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.21", 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", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", click: "click", previousSlide: "previousSlide", nextSlide: "nextSlide", fetchMore: "fetchMore" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], 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    <!-- 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    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\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$; index as index; 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)=\"clickRow($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ '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                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [debug]=\"debug\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\n      [canFetchMore]=\"canFetchMore\"\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      (fetchMore)=\"fetchMore.emit($event)\"\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        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\n        [loop]=\"enableSlideshowLoop\"\n        [canFetchMore]=\"canFetchMore\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"zoomModal.dismiss()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\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.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.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: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$2.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { 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: i7.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: i16.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", "editionFormat", "editionQuality", "imageSizeQueryParam", "modalImageSize", "enableLoop", "canFetchMore"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", 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", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotate: ["enableRotate", "enableRotate", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], editionFormat: "editionFormat", editionQuality: "editionQuality", slideshowMode: "slideshowMode", inlineZoomHeight: "inlineZoomHeight", enableSlideshowLoop: ["enableSlideshowLoop", "enableSlideshowLoop", booleanAttribute], canFetchMore: ["canFetchMore", "canFetchMore", booleanAttribute], dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", click: "click", previousSlide: "previousSlide", nextSlide: "nextSlide", fetchMore: "fetchMore", slideshowOpened: "slideshowOpened", slideshowClosed: "slideshowClosed" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "inlineSlideshow", first: true, predicate: ["inlineSlideshow"], descendants: true }], ngImport: i0, template: "@if (showToolbar && !isInlineSlideshowOpen) {\n  <ion-toolbar color=\"light\" class=\"gallery-toolbar\">\n    <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n    <!-- 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    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\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$; index as index; 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)=\"clickRow($event, row)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      @if (row.currentData.title | isNotNilOrBlank) {\n                        <span>{{ '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                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label>{{ addButtonText | translate }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? (addButtonText | translate) : ''\"\n              [matTooltip]=\"showTooltip ? (addButtonText | translate) : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (isInlineSlideshowOpen) {\n    <app-image-gallery-slideshow\n      class=\"inline-overlay\"\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [debug]=\"debug\"\n      [enableMouseZoom]=\"enableMouseZoom\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [enableRotate]=\"enableRotate\"\n      [enableCrop]=\"enableCrop\"\n      [enableLoop]=\"enableSlideshowLoop\"\n      [editionFormat]=\"editionFormat\"\n      [editionQuality]=\"editionQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\n      [canFetchMore]=\"canFetchMore\"\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      (fetchMore)=\"fetchMore.emit($event)\"\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        [editionFormat]=\"editionFormat\"\n        [editionQuality]=\"editionQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\n        [loop]=\"enableSlideshowLoop\"\n        [canFetchMore]=\"canFetchMore\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"zoomModal.dismiss()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n        (previousSlide)=\"previousSlide.emit($event)\"\n        (nextSlide)=\"nextSlide.emit($event)\"\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.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.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: "component", type: i2$2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$2.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$2.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { 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: i7.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: i16.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", "editionFormat", "editionQuality", "imageSizeQueryParam", "modalImageSize", "enableLoop", "canFetchMore"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow", "previousSlide", "nextSlide", "fetchMore"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
             type: Component,
@@ -29648,6 +29828,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                 type: Output
             }], fetchMore: [{
                 type: Output
+            }], slideshowOpened: [{
+                type: Output
+            }], slideshowClosed: [{
+                type: Output
+            }], inlineSlideshow: [{
+                type: ViewChild,
+                args: ['inlineSlideshow', { static: false }]
             }] } });
 
 class ImageGalleryModule {
@@ -31669,6 +31856,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                 }]
         }] });
 
+class GitlabUtils {
+    static API_V4_PATH = '/api/v4/';
+    static API_V4_PROJECTS_PATH = '/api/v4/projects/';
+    /**
+     * Checks whether a URL points to a Gitlab instance.
+     *
+     * A URL is considered a Gitlab URL either when its host starts with 'gitlab.'
+     * (e.g. 'https://gitlab.ifremer.fr/...'), or when it is a repository file URL
+     * (see {@link isRepoFileUrl}) - in which case the host is NOT checked, since
+     * a self-hosted Gitlab instance may use a custom domain name.
+     *
+     * @example
+     * GitlabUtils.isGitlabUrl('https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-app'); // true
+     * GitlabUtils.isGitlabUrl('https://my-custom-domain.com/foo/-/raw/master/README.md'); // true (repo file URL)
+     * GitlabUtils.isGitlabUrl('https://github.com/foo/bar'); // false
+     */
+    static isGitlabUrl(url) {
+        if (!url)
+            return false;
+        return url.startsWith('https://gitlab.') || GitlabUtils.isRepoFileUrl(url);
+    }
+    /**
+     * Checks whether a URL is a Gitlab repository file URL, i.e. a URL used to
+     * view a single file in a repository ('/-/blob/') or to download its raw
+     * content ('/-/raw/').
+     *
+     * @example
+     * GitlabUtils.isRepoFileUrl('https://gitlab.ifremer.fr/a/b/-/raw/master/README.md'); // true
+     * GitlabUtils.isRepoFileUrl('https://gitlab.ifremer.fr/a/b/-/blob/master/README.md'); // true
+     * GitlabUtils.isRepoFileUrl('https://gitlab.ifremer.fr/api/v4/projects/a%2Fb'); // false
+     */
+    static isRepoFileUrl(url) {
+        if (!url)
+            return false;
+        return url.includes('/-/raw/') || url.includes('/-/blob/');
+    }
+    /**
+     * Converts a repository file URL into its 'raw content' equivalent, by
+     * replacing the '/-/blob/' (file viewer) or '/-/tree/' (directory viewer)
+     * segment with '/-/raw/'.
+     *
+     * If the URL is not a repository file URL (see {@link isRepoFileUrl}), it is
+     * returned unchanged.
+     *
+     * @example
+     * GitlabUtils.getRawRepoFileUrl('https://gitlab.ifremer.fr/a/b/-/blob/master/README.md');
+     * // 'https://gitlab.ifremer.fr/a/b/-/raw/master/README.md'
+     */
+    static getRawRepoFileUrl(url) {
+        if (!GitlabUtils.isRepoFileUrl(url))
+            return url;
+        return url.replace('/-/blob/', '/-/raw/').replace('/-/tree/', '/-/raw/');
+    }
+    /**
+     * Checks whether a URL targets the Gitlab REST API (any endpoint under
+     * '/api/v4/'). Repository file URLs (see {@link isRepoFileUrl}) are always
+     * excluded, even if they happen to contain '/api/v4/' somewhere in their path.
+     */
+    static isApiUrl(url) {
+        if (!url || GitlabUtils.isRepoFileUrl(url))
+            return false;
+        return url.includes(GitlabUtils.API_V4_PATH);
+    }
+    /**
+     * Checks whether a URL targets the Gitlab 'projects' REST API (any endpoint
+     * under '/api/v4/projects/'), e.g. project releases, branches, etc.
+     */
+    static isApiProjectsUrl(url) {
+        if (!url || GitlabUtils.isRepoFileUrl(url))
+            return false;
+        return url.includes(GitlabUtils.API_V4_PROJECTS_PATH);
+    }
+    /**
+     * Checks whether a URL targets the Gitlab project releases REST API, e.g.
+     * 'https://gitlab.ifremer.fr/api/v4/projects/{id}/releases' (all releases)
+     * or 'https://gitlab.ifremer.fr/api/v4/projects/{id}/releases/{tag_name}'
+     * (a single release).
+     */
+    static isProjectReleasesApiUrl(url) {
+        return GitlabUtils.isApiProjectsUrl(url) && url.includes('/releases');
+    }
+    /**
+     * Fetches releases from the Gitlab project releases REST API.
+     *
+     * The given URL can either target the collection endpoint
+     * ('.../releases', returning all releases), or a single release endpoint
+     * ('.../releases/{tag_name}', returning one release, wrapped into an array).
+     *
+     * @return the list of releases, an empty array if the API call failed for a
+     *   single release, or `null` if the URL is not a project releases API URL.
+     */
+    static async getProjectReleases(http, url) {
+        if (!GitlabUtils.isProjectReleasesApiUrl(url))
+            return null;
+        // Many releases API urls end with /releases
+        if (url.trim().endsWith('/releases')) {
+            return await HttpUtils.getJson(http, url);
+        }
+        // One release API url
+        try {
+            const release = await HttpUtils.getJson(http, url);
+            return release ? [release] : [];
+        }
+        catch (err) {
+            console.error('Failed to fetch release from the Gitlab API ' + url, err);
+            return null;
+        }
+    }
+    /**
+     * Extracts the URL-encoded project path (e.g. 'group%2Fsubgroup%2Fproject')
+     * from a Gitlab 'projects' API URL. The returned value is NOT decoded, so it
+     * still contains '%2F' in place of '/'.
+     *
+     * @example
+     * GitlabUtils.getProjectNameFromApiUrl('https://gitlab.ifremer.fr/api/v4/projects/sih-public%2Fsumaris%2Fsumaris-app/releases');
+     * // 'sih-public%2Fsumaris%2Fsumaris-app'
+     */
+    static getProjectNameFromApiUrl(url) {
+        if (!url?.includes(GitlabUtils.API_V4_PROJECTS_PATH))
+            return null;
+        return url.slice(url.indexOf(GitlabUtils.API_V4_PROJECTS_PATH) + GitlabUtils.API_V4_PROJECTS_PATH.length)
+            .split('/', 2)[0];
+    }
+    /**
+     * Resolves the Gitlab web page associated to a URL:
+     * - for an API 'projects' URL (see {@link isApiUrl}), this is the project's
+     *   home page, e.g. 'https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-app';
+     * - for a repository file URL (see {@link isRepoFileUrl}), this is the
+     *   project's raw content base path (e.g. '.../my-project/-/raw/'), since
+     *   the project path cannot be reliably distinguished from the file path
+     *   once slashes are un-encoded.
+     *
+     * @return `null` if the project page cannot be resolved from the given URL.
+     */
+    static getProjectPage(url) {
+        if (GitlabUtils.isRepoFileUrl(url)) {
+            const fixUrl = GitlabUtils.getRawRepoFileUrl(url);
+            const index = fixUrl.indexOf('/-/raw/');
+            if (index >= 0)
+                return fixUrl.slice(0, index + '/-/raw/'.length);
+        }
+        else if (GitlabUtils.isApiUrl(url)) {
+            const index = url.indexOf(GitlabUtils.API_V4_PROJECTS_PATH);
+            if (index >= 0) {
+                const baseUrl = url.slice(0, index);
+                const projectName = GitlabUtils.getProjectNameFromApiUrl(url);
+                return UrlUtils.concat(baseUrl, projectName.replace(/%2F/g, '/'));
+            }
+        }
+        return null;
+    }
+    /**
+     * Builds the URL of the Gitlab web page listing a project's releases (e.g.
+     * 'https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-app/-/releases'),
+     * optionally anchored on a specific version/tag.
+     *
+     * @param url any URL from which the project page can be resolved (see {@link getProjectPage})
+     * @param version optional tag name (e.g. '2.16.2') appended to the releases page
+     * @return `null` if the project page cannot be resolved from the given URL.
+     */
+    static getProjectReleasePage(url, version) {
+        const basePath = GitlabUtils.getProjectPage(url);
+        if (!basePath)
+            return null;
+        return UrlUtils.concat(UrlUtils.concat(basePath, '/-/releases'), version);
+    }
+}
+
 class MarkdownUtils {
     static HTML_ENTITIES_MAP = {
         '&#39;': "'", // Single quote
@@ -31729,18 +32084,8 @@ class MarkdownUtils {
         }
         return UrlUtils.normalizeUrl(UrlUtils.concat(baseUrl, relativePath));
     }
-    static isGitlabUrl(url) {
-        if (!url)
-            return false;
-        return url.startsWith('https://gitlab.') || url.includes('/-/raw/') || url.includes('/-/blob/');
-    }
-    static fixGitlabUrlToRaw(url) {
-        if (!this.isGitlabUrl(url))
-            return url;
-        return url.replace('/-/blob/', '/-/raw/').replace('/-/tree/', '/-/raw/');
-    }
     static getRootUrl(url) {
-        if (this.isGitlabUrl(url)) {
+        if (GitlabUtils.isRepoFileUrl(url)) {
             console.debug('[markdown] Gitlab URL detected: ' + url);
             url = url.replace('/-/blob/', '/-/raw/');
             if (url.includes('/-/raw/')) {
@@ -32436,9 +32781,9 @@ class AppMarkdownContent {
         // Clean URL (remove fragment and query)
         const anchor = opts?.anchor || UrlUtils.getFragment(src);
         src = UrlUtils.stripFragmentAndQuery(src);
-        src = MarkdownUtils.isGitlabUrl(src) ? MarkdownUtils.fixGitlabUrlToRaw(src) : src;
+        src = GitlabUtils.isRepoFileUrl(src) ? GitlabUtils.getRawRepoFileUrl(src) : src;
         let fallbackSrc = opts?.fallbackSrc ? UrlUtils.stripFragmentAndQuery(opts.fallbackSrc) : null;
-        fallbackSrc = MarkdownUtils.isGitlabUrl(fallbackSrc) ? MarkdownUtils.fixGitlabUrlToRaw(fallbackSrc) : fallbackSrc;
+        fallbackSrc = GitlabUtils.isRepoFileUrl(fallbackSrc) ? GitlabUtils.getRawRepoFileUrl(fallbackSrc) : fallbackSrc;
         if (this._src !== src || this._fallbackSrc !== fallbackSrc || this._anchor !== anchor) {
             const url = src ? src + (isNotNilOrBlank(anchor) ? `#${anchor}` : '') : null;
             if (url)
@@ -32740,6 +33085,8 @@ class AboutModal {
     modalController;
     configService;
     networkService;
+    platformService;
+    http;
     cd;
     environment;
     developers;
@@ -32760,11 +33107,13 @@ class AboutModal {
     get allowVersionDetails() {
         return !!this.buildDate || !!this.nodeInfo?.softwareVersion;
     }
-    constructor(translate, modalController, configService, networkService, cd, environment, developers, partners) {
+    constructor(translate, modalController, configService, networkService, platformService, http, cd, environment, developers, partners) {
         this.translate = translate;
         this.modalController = modalController;
         this.configService = configService;
         this.networkService = networkService;
+        this.platformService = platformService;
+        this.http = http;
         this.cd = cd;
         this.environment = environment;
         this.developers = developers;
@@ -32798,16 +33147,56 @@ class AboutModal {
         this.forumUrl = config?.getProperty(CORE_CONFIG_OPTIONS.FORUM_URL) || this.environment?.forumUrl;
         this.helpUrl = config?.getProperty(CORE_CONFIG_OPTIONS.HELP_URL) || this.environment?.helpUrl;
         this.reportIssueUrl = config?.getProperty(CORE_CONFIG_OPTIONS.REPORT_ISSUE_URL) || this.environment?.reportIssueUrl;
-        this.changelogUrl = config?.getProperty(CORE_CONFIG_OPTIONS.CHANGELOG_URL) || this.environment?.changelogUrl;
+        this.changelogUrl = this.getChangelogUrl(config);
         this.buildDate = this.environment?.buildDate;
     }
+    getChangelogUrl(config) {
+        let changelogUrl = config?.getProperty(CORE_CONFIG_OPTIONS.CHANGELOG_URL) || this.environment?.changelogUrl;
+        // Replace {version} placeholder
+        if (isNotNilOrBlank(changelogUrl) && isNotNilOrBlank(this.environment?.version)) {
+            changelogUrl = changelogUrl.replace('{version}', this.environment.version);
+        }
+        return changelogUrl;
+    }
     async openChangelog(event) {
         event.preventDefault();
+        event.stopPropagation();
         if (!this.changelogUrl)
             return;
+        const title = this.translate.instant('ABOUT.BTN_CHANGELOG');
+        const canPrint = !this.platformService.mobile;
+        const version = this.environment?.version;
+        // Detect gitlab API
+        if (GitlabUtils.isProjectReleasesApiUrl(this.changelogUrl)) {
+            let releases = await GitlabUtils.getProjectReleases(this.http, this.changelogUrl);
+            // Filter releases by version compatibility
+            if (isNotNilOrBlank(version)) {
+                const index = releases.findIndex(r => r.tag_name == version);
+                if (index >= 0)
+                    releases = releases.slice(index);
+                releases = releases.filter(r => VersionUtils.isCompatible(r.tag_name, version));
+            }
+            const content = releases.map(r => `### ${r.name ?? r.tag_name}\n\n${r.description}`)
+                .join('\n\n---\n');
+            if (isNotNilOrBlank(content)) {
+                return await AppMarkdownModal.show(this.modalController, {
+                    title,
+                    data: content,
+                    canPrint
+                });
+            }
+            console.warn(`[about] No compatible release found, from the Gitlab release API: ${this.changelogUrl}`);
+            // Open the gitlab release page
+            const releasePage = GitlabUtils.getProjectReleasePage(this.changelogUrl, version);
+            if (isNotNilOrBlank(releasePage)) {
+                console.info(`[about] Redirecting to the page ${releasePage}`);
+                return this.platformService.open(releasePage);
+            }
+        }
         await AppMarkdownModal.show(this.modalController, {
-            title: this.translate.instant('ABOUT.BTN_CHANGELOG'),
+            title,
             src: this.changelogUrl,
+            canPrint
         });
     }
     async loadNodeInfo() {
@@ -32825,13 +33214,13 @@ class AboutModal {
             return null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: AboutModal, deps: [{ token: i2.TranslateService }, { token: i2$2.ModalController }, { token: ConfigService }, { token: NetworkService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }, { token: APP_ABOUT_DEVELOPERS, optional: true }, { token: APP_ABOUT_PARTNERS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: AboutModal, deps: [{ token: i2.TranslateService }, { token: i2$2.ModalController }, { token: ConfigService }, { token: NetworkService }, { token: PlatformService }, { token: i2$4.HttpClient }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }, { token: APP_ABOUT_DEVELOPERS, optional: true }, { token: APP_ABOUT_PARTNERS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: AboutModal, isStandalone: false, selector: "app-about-modal", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-title>\n      {{ 'ABOUT.TITLE' | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{ 'COMMON.BTN_CLOSE' | translate }}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-list lines=\"none\">\n    <!-- Peer info -->\n    @if (config$ | async; as config) {\n      <ion-item>\n        <span slot=\"start\">&nbsp;</span>\n        <ion-label class=\"ion-text-wrap\">\n          <h2>\n            <b>{{ config.label | capitalize }}</b>\n            @if (config.name) {\n              -\n              <span [innerHTML]=\"config.name\"></span>\n            }\n          </h2>\n\n          @if (config.description) {\n            <p>\n              <markdown [data]=\"config.description\" emoji></markdown>\n            </p>\n          }\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          @if (name) {\n            <small>{{ 'ABOUT.POWERED_BY' | translate }}</small>\n            {{ name }}\n          }\n          @if (version) {\n            <span [innerHTML]=\"'ABOUT.VERSION' | translate: { version: version }\"></span>\n          }\n          @if (allowVersionDetails) {\n            &nbsp;\n            <small>\n              <a (click)=\"showVersionDetails = !showVersionDetails\" tappable>\n                {{ 'COMMON.BTN_SHOW_MORE' | translate }}\n                <ion-icon [name]=\"!showVersionDetails ? 'chevron-down' : 'chevron-up'\"></ion-icon>\n              </a>\n              @if (changelogUrl) {\n                &nbsp;\n                <a (click)=\"openChangelog($event)\"\n                   [href]=\"changelogUrl\"\n                   tappable translate>ABOUT.BTN_CHANGELOG</a>\n              }\n            </small>\n          }\n        </h2>\n\n        <!-- version details -->\n        @if (showVersionDetails) {\n          <p class=\"version-details\">\n            <!-- App version -->\n            @if (buildDate) {\n              <small>\n                <ion-icon name=\"logo-angular\"></ion-icon>\n                <span [innerHTML]=\"'ABOUT.APP_VERSION' | translate: { version: version }\"></span>\n                &nbsp;\n                <ion-icon name=\"time-outline\"></ion-icon>\n                {{ buildDate | dateFormat: { time: true, seconds: false } }}\n              </small>\n              <br />\n            }\n            <!-- Pod version -->\n            @if (nodeInfo?.softwareVersion && nodeInfo.buildDate) {\n              <small>\n                <ion-icon name=\"server\"></ion-icon>\n                <span [innerHTML]=\"'ABOUT.POD_VERSION' | translate: { version: nodeInfo.softwareVersion }\"></span>\n                &nbsp;\n                <ion-icon name=\"time-outline\"></ion-icon>\n                {{ nodeInfo.buildDate | dateFormat: { time: true, seconds: false } }}\n              </small>\n            }\n          </p>\n        }\n\n        <!-- license-->\n        <p [innerHTML]=\"'ABOUT.LICENSE' | translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    @if (forumUrl || helpUrl) {\n      <ion-item>\n        <mat-icon slot=\"start\">help_outline</mat-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.HELP' | translate }}\n          </p>\n          <p>\n            <ion-button fill=\"solid\" color=\"accent\" href=\"{{ helpUrl }}\" target=\"help\" size=\"default\">\n              <mat-icon slot=\"start\">description</mat-icon>\n              <ion-text>{{ 'ABOUT.USER_MANUAL' | translate }}</ion-text>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"secondary\" href=\"{{ forumUrl }}\" target=\"forum\" size=\"default\">\n              <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n              <ion-text>{{ 'ABOUT.FORUM' | translate }}</ion-text>\n            </ion-button>\n          </p>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Report issue -->\n    @if (reportIssueUrl) {\n      <ion-item>\n        <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.REPORT_ISSUE' | translate }}\n          </p>\n          <p>\n            <a color=\"primary\" href=\"{{ reportIssueUrl }}\" target=\"_system\">{{ 'ABOUT.BTN_REPORT_ISSUE' | translate }}</a>\n          </p>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Source code -->\n    @if (sourceUrl) {\n      <ion-item>\n        <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.SOURCE_CODE' | translate }}\n          </p>\n          <p>\n            <a color=\"primary\" href=\"{{ sourceUrl }}\" target=\"_system\">{{ sourceUrl }}</a>\n          </p>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Developers -->\n    @if (developers | isNotEmptyArray) {\n      <ion-item>\n        <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.DEVELOPED_BY' | translate }}\n          </p>\n          <ion-list lines=\"none\">\n            @for (item of developers; track item) {\n              <ion-item class=\"ion-no-padding\">\n                <ion-label>\n                  <p>\n                    <a color=\"primary\" href=\"{{ item.siteUrl }}\" target=\"_system\">{{ item.name || item.label }}</a>\n                  </p>\n                </ion-label>\n                <ion-img slot=\"end\" [src]=\"item.logo\" />\n              </ion-item>\n            }\n          </ion-list>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Partners -->\n    @if (partners | isNotEmptyArray) {\n      <ion-item class=\"item-partners\">\n        <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n        <ion-text>\n          <p>{{ 'ABOUT.PARTNERS' | translate }}</p>\n          <p>\n            @for (item of partners; track item) {\n              <a href=\"{{ item.siteUrl }}\" class=\"partners\" target=\"_system\">\n                @if (item.logo) {\n                  <img [src]=\"item.logo\" [alt]=\"item.label\" />\n                } @else {\n                  <ion-text>{{ item.label }}</ion-text>\n                }\n              </a>\n            }\n          </p>\n        </ion-text>\n      </ion-item>\n    }\n  </ion-list>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px!important}\n"], dependencies: [{ kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.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.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4$3.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: AboutModal, decorators: [{
             type: Component,
             args: [{ selector: 'app-about-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-title>\n      {{ 'ABOUT.TITLE' | translate }}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{ 'COMMON.BTN_CLOSE' | translate }}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-list lines=\"none\">\n    <!-- Peer info -->\n    @if (config$ | async; as config) {\n      <ion-item>\n        <span slot=\"start\">&nbsp;</span>\n        <ion-label class=\"ion-text-wrap\">\n          <h2>\n            <b>{{ config.label | capitalize }}</b>\n            @if (config.name) {\n              -\n              <span [innerHTML]=\"config.name\"></span>\n            }\n          </h2>\n\n          @if (config.description) {\n            <p>\n              <markdown [data]=\"config.description\" emoji></markdown>\n            </p>\n          }\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          @if (name) {\n            <small>{{ 'ABOUT.POWERED_BY' | translate }}</small>\n            {{ name }}\n          }\n          @if (version) {\n            <span [innerHTML]=\"'ABOUT.VERSION' | translate: { version: version }\"></span>\n          }\n          @if (allowVersionDetails) {\n            &nbsp;\n            <small>\n              <a (click)=\"showVersionDetails = !showVersionDetails\" tappable>\n                {{ 'COMMON.BTN_SHOW_MORE' | translate }}\n                <ion-icon [name]=\"!showVersionDetails ? 'chevron-down' : 'chevron-up'\"></ion-icon>\n              </a>\n              @if (changelogUrl) {\n                &nbsp;\n                <a (click)=\"openChangelog($event)\"\n                   [href]=\"changelogUrl\"\n                   tappable translate>ABOUT.BTN_CHANGELOG</a>\n              }\n            </small>\n          }\n        </h2>\n\n        <!-- version details -->\n        @if (showVersionDetails) {\n          <p class=\"version-details\">\n            <!-- App version -->\n            @if (buildDate) {\n              <small>\n                <ion-icon name=\"logo-angular\"></ion-icon>\n                <span [innerHTML]=\"'ABOUT.APP_VERSION' | translate: { version: version }\"></span>\n                &nbsp;\n                <ion-icon name=\"time-outline\"></ion-icon>\n                {{ buildDate | dateFormat: { time: true, seconds: false } }}\n              </small>\n              <br />\n            }\n            <!-- Pod version -->\n            @if (nodeInfo?.softwareVersion && nodeInfo.buildDate) {\n              <small>\n                <ion-icon name=\"server\"></ion-icon>\n                <span [innerHTML]=\"'ABOUT.POD_VERSION' | translate: { version: nodeInfo.softwareVersion }\"></span>\n                &nbsp;\n                <ion-icon name=\"time-outline\"></ion-icon>\n                {{ nodeInfo.buildDate | dateFormat: { time: true, seconds: false } }}\n              </small>\n            }\n          </p>\n        }\n\n        <!-- license-->\n        <p [innerHTML]=\"'ABOUT.LICENSE' | translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    @if (forumUrl || helpUrl) {\n      <ion-item>\n        <mat-icon slot=\"start\">help_outline</mat-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.HELP' | translate }}\n          </p>\n          <p>\n            <ion-button fill=\"solid\" color=\"accent\" href=\"{{ helpUrl }}\" target=\"help\" size=\"default\">\n              <mat-icon slot=\"start\">description</mat-icon>\n              <ion-text>{{ 'ABOUT.USER_MANUAL' | translate }}</ion-text>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"secondary\" href=\"{{ forumUrl }}\" target=\"forum\" size=\"default\">\n              <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n              <ion-text>{{ 'ABOUT.FORUM' | translate }}</ion-text>\n            </ion-button>\n          </p>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Report issue -->\n    @if (reportIssueUrl) {\n      <ion-item>\n        <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.REPORT_ISSUE' | translate }}\n          </p>\n          <p>\n            <a color=\"primary\" href=\"{{ reportIssueUrl }}\" target=\"_system\">{{ 'ABOUT.BTN_REPORT_ISSUE' | translate }}</a>\n          </p>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Source code -->\n    @if (sourceUrl) {\n      <ion-item>\n        <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.SOURCE_CODE' | translate }}\n          </p>\n          <p>\n            <a color=\"primary\" href=\"{{ sourceUrl }}\" target=\"_system\">{{ sourceUrl }}</a>\n          </p>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Developers -->\n    @if (developers | isNotEmptyArray) {\n      <ion-item>\n        <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n        <ion-label>\n          <p>\n            {{ 'ABOUT.DEVELOPED_BY' | translate }}\n          </p>\n          <ion-list lines=\"none\">\n            @for (item of developers; track item) {\n              <ion-item class=\"ion-no-padding\">\n                <ion-label>\n                  <p>\n                    <a color=\"primary\" href=\"{{ item.siteUrl }}\" target=\"_system\">{{ item.name || item.label }}</a>\n                  </p>\n                </ion-label>\n                <ion-img slot=\"end\" [src]=\"item.logo\" />\n              </ion-item>\n            }\n          </ion-list>\n        </ion-label>\n      </ion-item>\n    }\n\n    <!-- Partners -->\n    @if (partners | isNotEmptyArray) {\n      <ion-item class=\"item-partners\">\n        <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n        <ion-text>\n          <p>{{ 'ABOUT.PARTNERS' | translate }}</p>\n          <p>\n            @for (item of partners; track item) {\n              <a href=\"{{ item.siteUrl }}\" class=\"partners\" target=\"_system\">\n                @if (item.logo) {\n                  <img [src]=\"item.logo\" [alt]=\"item.label\" />\n                } @else {\n                  <ion-text>{{ item.label }}</ion-text>\n                }\n              </a>\n            }\n          </p>\n        </ion-text>\n      </ion-item>\n    }\n  </ion-list>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i2.TranslateService }, { type: i2$2.ModalController }, { type: ConfigService }, { type: NetworkService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2.TranslateService }, { type: i2$2.ModalController }, { type: ConfigService }, { type: NetworkService }, { type: PlatformService }, { type: i2$4.HttpClient }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -34023,11 +34412,11 @@ class MenuComponent {
         this.menuService.togglePinned(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: MenuComponent, deps: [{ token: AccountService }, { token: i2$2.NavController }, { token: i2$2.MenuController }, { token: i2$2.ModalController }, { token: i2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: i1$4.Router }, { token: ENVIRONMENT }, { token: APP_BASE_HREF, optional: true }, { token: i1$4.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: MenuComponent, isStandalone: false, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$3.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: MenuComponent, isStandalone: false, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", rxStrategy: "rxStrategy", appVersion: "appVersion" }, viewQueries: [{ propertyName: "splitPane", first: true, predicate: ["splitPane"], descendants: true, static: true }], ngImport: i0, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar{--ion-safe-area-bottom: 0}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2$2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i13$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i8$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i9$3.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.RxPush, name: "push" }], animations: [fadeInSlowAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
+            args: [{ selector: 'app-menu', animations: [fadeInSlowAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n      @if (!loading && isLogin) {\n        <ion-toolbar @fadeInSlowAnimation class=\"user-toolbar\">\n          <ion-grid>\n            <ion-row>\n              <ion-col size=\"4\">\n                <button\n                  type=\"button\"\n                  mat-flat-button\n                  class=\"user-avatar\"\n                  [class.primary]=\"!accountAvatar\"\n                  [style.background-image]=\"'url(' + (accountAvatar || defaultAvatarImage) + ')'\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"ion-color-primary\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                ></button>\n              </ion-col>\n              <ion-col size=\"8\" class=\"user-logo\">\n                @if (logo) {\n                  <img\n                    [attr.src]=\"logo\"\n                    [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                    alt=\"Logo\"\n                    width=\"108px\"\n                  />\n                } @else {\n                  <span style=\"width: 108px\">{{ appName }}</span>\n                }\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [routerLink]=\"['/account']\"\n                  routerDirection=\"root\"\n                  routerLinkActive=\"selected\"\n                  (click)=\"close()\"\n                  [title]=\"!showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('MENU.BTN_MY_ACCOUNT' | translate) : ''\"\n                >\n                  <ion-label class=\"ion-text-wrap ion-text-start\">\n                    <h3 class=\"no-margin username\">\n                      <b>{{ accountName }}</b>\n                    </h3>\n                    <h4>{{ accountEmail }}</h4>\n                  </ion-label>\n                </button>\n              </ion-col>\n              <!-- Insertion headerBottomRight -->\n              <ion-col size=\"auto\">\n                <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-toolbar>\n      } @else {\n        @if (!loading) {\n          <mat-toolbar class=\"ion-padding\" style=\"height: unset; display: block; margin: auto; text-align: center\">\n            @if (logo) {\n              <img\n                [attr.src]=\"logo\"\n                [title]=\"!showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                [matTooltip]=\"showTooltip ? ('APP_NAME' | translate: { appName: appName }) : ''\"\n                width=\"150px;\"\n                alt=\"logo\"\n              />\n            }\n            @if (!logo) {\n              <span style=\"width: 150px\">{{ appName }}</span>\n            }\n          </mat-toolbar>\n        }\n      }\n\n      <!-- User not logged -->\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        @if (!loading) {\n          <ion-list lines=\"none\">\n            <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n              <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item, level: 0 }\"></ng-container>\n            </ng-container>\n          </ion-list>\n        }\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xxs hidden-xs hidden-sm hidden-md\">\n      <ion-toolbar>\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button\n            mat-icon-button\n            color=\"accent\"\n            (click)=\"toggleSplitPaneShow($event)\"\n            class=\"hidden-xs hidden-sm hidden-md\"\n            [title]=\"\n              !showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n            [matTooltip]=\"\n              showTooltip ? ((splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate) : ''\n            \"\n          >\n            <mat-icon>\n              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>\n            </mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n  </ion-menu>\n\n  <ng-content></ng-content>\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n\n<ng-template #menuItem let-item let-level=\"level\">\n  @if (item.divider) {\n    <!-- divider -->\n    <ion-item-divider class=\"{{ item.cssClass }} {{ item.color }}\" @fadeInSlowAnimation>\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      @if (item.cssClass !== 'flex-spacer') {\n        <ion-label>\n          <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        </ion-label>\n      }\n    </ion-item-divider>\n  } @else if (item.path && !item.action) {\n    <!-- tappable link -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }}\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      [routerLink]=\"item.path\"\n      [queryParams]=\"item.pathParams\"\n      routerDirection=\"root\"\n      routerLinkActive=\"selected\"\n      [routerLinkActiveOptions]=\"{\n        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',\n        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',\n        matrixParams: 'exact',\n        fragment: 'ignored',\n      }\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      } @else if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      } @else if (item.matSvgIcon) {\n        <mat-icon slot=\"start\" [svgIcon]=\"item.matSvgIcon\"></mat-icon>\n      }\n      <ion-label *rxLet=\"item.$title; let title\">\n        @if (title) {\n          <span [innerHTML]=\"title | translate\"></span>\n        } @else {\n          <ion-skeleton-text animated [style.width.%]=\"60\"></ion-skeleton-text>\n        }\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  } @else if (item.action) {\n    <!-- action -->\n    <ion-item\n      @fadeInSlowAnimation\n      class=\"{{ item.cssClass }} {{ item.color }} text-1x\"\n      [class.menu-item-sub]=\"level !== 0\"\n      tappable\n      (click)=\"executeAction($event, item)\"\n    >\n      @if (item.icon) {\n        <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon>\n      }\n      @if (item.matIcon) {\n        <mat-icon slot=\"start\">{{ item.matIcon }}</mat-icon>\n      }\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else: skeletonText\" [innerHTML]=\"title | translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <ion-badge *rxIf=\"item.$badge; let badge\" [color]=\"item.$badgeColor | push\">\n        {{ badge }}\n      </ion-badge>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: { $implicit: item, level: level }\"></ng-container>\n    </ion-item>\n  }\n\n  <!-- children -->\n  @if (item.$children) {\n    <div class=\"sub-menu-container\">\n      <ng-container *rxFor=\"let child of item.$children; strategy: rxStrategy; trackBy: trackByFn\">\n        <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: child, level: level + 1 }\"></ng-container>\n      </ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #skeletonText>\n  <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  @if (level && item.pinnable) {\n    <ion-button\n      slot=\"end\"\n      shape=\"round\"\n      fill=\"clear\"\n      size=\"small\"\n      [class.visible-hover]=\"!item.pinned\"\n      (click)=\"togglePinned($event, item)\"\n    >\n      <!--<mat-icon slot=\"icon-only\" [color]=\"item.pinned ? 'primary' : undefined\">push_pin</mat-icon>-->\n      <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n    </ion-button>\n  }\n</ng-template>\n", styles: [":host{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:var(--ion-color-secondary);border:solid 1px rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size, 60px)!important;line-height:var(--avatar-size, 60px);height:var(--avatar-size, 60px)!important;width:var(--avatar-size, 60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:solid 2px var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size, 60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;width:100%;justify-content:flex-start;text-align:start!important;color:var(--ion-item-text-color)}ion-menu ion-header button[mat-button].selected{background-color:var(--ion-item-background-selected);color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item{display:block}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color: var(--ion-color-secondary-tint);--ion-item-text-color: var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color: var(--ion-color-tertiary-tint);--ion-item-text-color: var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color: var(--ion-color-danger-tint);--ion-item-text-color: var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color: var(--ion-color-medium-shade);--ion-item-text-color: var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color: var(--ion-color-dark-tint);--ion-item-text-color: var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item mat-icon,ion-menu ion-content ion-list ion-item ion-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-text,ion-menu ion-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end]{-webkit-margin-start:unset;margin-inline-start:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] mat-icon[slot=icon-only],ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block}ion-menu ion-footer ion-toolbar{--ion-safe-area-bottom: 0}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$2.NavController }, { type: i2$2.MenuController }, { type: i2$2.ModalController }, { type: i2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: MenuService }, { type: i1$4.Router }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -40028,7 +40417,11 @@ class SettingsPage extends AppForm {
             this.markForCheck();
         }
     }
-    async showSelectPeerModal(opts) {
+    async showSelectPeerModal(event, opts) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         const selectedPeer = this._form.get('peerUrl').value;
         const peer = await this.network.showSelectPeerModal({
             showSetManuallyButton: false, // Make no sense here, because same as cancel (already inside the settings page)
@@ -40155,11 +40548,11 @@ class SettingsPage extends AppForm {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: SettingsPage, deps: [{ token: i0.Injector }, { token: PlatformService }, { token: i2$2.NavController }, { token: LocalSettingsValidatorService }, { token: i2$2.AlertController }, { token: i2.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: APP_LOCALES }, { token: APP_SETTINGS_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: SettingsPage, isStandalone: false, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label>{{ 'SETTINGS.BTN_CLEAR_CACHE' | translate }}</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label>{{ 'COMMON.BTN_RESET' | translate }}</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          @if (item.icon) {\n            <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          }\n          @if (item.matIcon) {\n            <mat-icon>{{ item.matIcon }}</mat-icon>\n          }\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_DEBUG_DOTS' | translate }}</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'SETTINGS.BTN_SHOW_OPTION_KEY' | translate }}</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          @if (errorSubject | async; as error) {\n            <ion-item lines=\"none\">\n              <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n              <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n            </ion-item>\n          }\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\">{{ 'SETTINGS.DESCRIPTION' | translate }}</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</span>\n                  </mat-checkbox>\n\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\">{{ 'SETTINGS.BTN_SHOW_ACCOUNT' | translate }}</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DISPLAY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  @for (item of locales; track item) {\n                    <mat-option [value]=\"item.key\">\n                      {{ item.value }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.locale.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.BTN_DARK_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.NETWORK_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                @if (form.controls.peerUrl.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerAlive')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_REACHABLE' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerNotCompatible')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_COMPATIBLE' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.OFFLINE_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DATA_ENTRY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  @for (item of usageModes; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.usageMode.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  @for (item of latLongFormats; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.latLongFormat.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "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.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.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.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: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i11$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["showToolbar", "formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "canDownload", "canImport", "showMoreButtonTitle", "definitions", "importPolicy"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: SettingsPage, isStandalone: false, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label>{{ 'SETTINGS.BTN_CLEAR_CACHE' | translate }}</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label>{{ 'COMMON.BTN_RESET' | translate }}</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          @if (item.icon) {\n            <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          }\n          @if (item.matIcon) {\n            <mat-icon>{{ item.matIcon }}</mat-icon>\n          }\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_DEBUG_DOTS' | translate }}</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'SETTINGS.BTN_SHOW_OPTION_KEY' | translate }}</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          @if (errorSubject | async; as error) {\n            <ion-item lines=\"none\">\n              <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n              <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n            </ion-item>\n          }\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\">{{ 'SETTINGS.DESCRIPTION' | translate }}</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</span>\n                  </mat-checkbox>\n\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\">{{ 'SETTINGS.BTN_SHOW_ACCOUNT' | translate }}</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DISPLAY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  @for (item of locales; track item) {\n                    <mat-option [value]=\"item.key\">\n                      {{ item.value }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.locale.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.BTN_DARK_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.NETWORK_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal($event)\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                @if (form.controls.peerUrl.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerAlive')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_REACHABLE' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerNotCompatible')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_COMPATIBLE' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.OFFLINE_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DATA_ENTRY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  @for (item of usageModes; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.usageMode.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  @for (item of latLongFormats; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.latLongFormat.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "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.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.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.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: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i11$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["showToolbar", "formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "canDownload", "canImport", "showMoreButtonTitle", "definitions", "importPolicy"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: SettingsPage, decorators: [{
             type: Component,
-            args: [{ selector: 'page-settings', providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label>{{ 'SETTINGS.BTN_CLEAR_CACHE' | translate }}</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label>{{ 'COMMON.BTN_RESET' | translate }}</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          @if (item.icon) {\n            <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          }\n          @if (item.matIcon) {\n            <mat-icon>{{ item.matIcon }}</mat-icon>\n          }\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_DEBUG_DOTS' | translate }}</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'SETTINGS.BTN_SHOW_OPTION_KEY' | translate }}</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          @if (errorSubject | async; as error) {\n            <ion-item lines=\"none\">\n              <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n              <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n            </ion-item>\n          }\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\">{{ 'SETTINGS.DESCRIPTION' | translate }}</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</span>\n                  </mat-checkbox>\n\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\">{{ 'SETTINGS.BTN_SHOW_ACCOUNT' | translate }}</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DISPLAY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  @for (item of locales; track item) {\n                    <mat-option [value]=\"item.key\">\n                      {{ item.value }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.locale.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.BTN_DARK_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.NETWORK_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                @if (form.controls.peerUrl.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerAlive')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_REACHABLE' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerNotCompatible')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_COMPATIBLE' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.OFFLINE_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DATA_ENTRY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  @for (item of usageModes; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.usageMode.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  @for (item of latLongFormats; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.latLongFormat.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n" }]
+            args: [{ selector: 'page-settings', providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label>{{ 'SETTINGS.BTN_CLEAR_CACHE' | translate }}</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label>{{ 'COMMON.BTN_RESET' | translate }}</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          @if (item.icon) {\n            <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          }\n          @if (item.matIcon) {\n            <mat-icon>{{ item.matIcon }}</mat-icon>\n          }\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label>{{ item.title | translate }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label>{{ 'COMMON.DEBUG.BTN_DEBUG_DOTS' | translate }}</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'COMMON.DEBUG.BTN_ENABLE_DEBUG' | translate }}</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label>{{ 'SETTINGS.BTN_SHOW_OPTION_KEY' | translate }}</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          @if (errorSubject | async; as error) {\n            <ion-item lines=\"none\">\n              <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n              <ion-text color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-text>\n            </ion-item>\n          }\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\">{{ 'SETTINGS.DESCRIPTION' | translate }}</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</span>\n                  </mat-checkbox>\n\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.INHERIT_FROM_ACCOUNT' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  @if (form.controls.accountInheritance.hasError('required')) {\n                    <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                  }\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\">{{ 'SETTINGS.BTN_SHOW_ACCOUNT' | translate }}</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DISPLAY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  @for (item of locales; track item) {\n                    <mat-option [value]=\"item.key\">\n                      {{ item.value }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.locale.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.BTN_DARK_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.NETWORK_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal($event)\"\n                  tabindex=\"-1\"\n                  [title]=\"!showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('SETTINGS.BTN_CHANGE_PEER' | translate) : ''\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                @if (form.controls.peerUrl.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerAlive')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_REACHABLE' | translate }}</mat-error>\n                }\n                @if (form.controls.peerUrl.hasError('peerNotCompatible')) {\n                  <mat-error>{{ 'SETTINGS.ERROR.PEER_NOT_COMPATIBLE' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text>{{ 'SETTINGS.OFFLINE_MODE' | translate }}</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3>{{ 'SETTINGS.DATA_ENTRY_DIVIDER' | translate }}</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  @for (item of usageModes; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.usageMode.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  @for (item of latLongFormats; track item) {\n                    <mat-option [value]=\"item\">\n                      {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                    </mat-option>\n                  }\n                </mat-select>\n                @if (form.controls.latLongFormat.hasError('required')) {\n                  <mat-error>{{ 'ERROR.FIELD_REQUIRED' | translate }}</mat-error>\n                }\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: PlatformService }, { type: i2$2.NavController }, { type: LocalSettingsValidatorService }, { type: i2$2.AlertController }, { type: i2.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: AccountService }, { type: LocalSettingsService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LOCALES]
@@ -42166,20 +42559,20 @@ class AppTable {
     }
     async askDeleteConfirmation(event, rows, opts) {
         if (isNotNilOrBlank(opts?.messageKey)) {
-            return Alerts.askConfirmation(opts.messageKey, this.alertCtrl, this.translate, event);
+            return Alerts.askConfirmation(opts.messageKey, this.alertCtrl, this.translate, event, opts);
         }
         if (this.undoableDeletion) {
             // Special message, for undoable deletion
-            return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.DELETE_ROW' : 'CONFIRM.DELETE_ROWS', this.alertCtrl, this.translate, event);
+            return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.DELETE_ROW' : 'CONFIRM.DELETE_ROWS', this.alertCtrl, this.translate, event, opts);
         }
         // Immediate deletion action
-        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, true, event);
+        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, true, event, opts);
     }
-    async askCancelConfirmation(event, rows) {
-        return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.CANCEL_ROW' : 'CONFIRM.CANCEL_ROWS', this.alertCtrl, this.translate, event);
+    async askCancelConfirmation(event, rows, opts) {
+        return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.CANCEL_ROW' : 'CONFIRM.CANCEL_ROWS', this.alertCtrl, this.translate, event, opts);
     }
-    async askRestoreConfirmation(event) {
-        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, false, event);
+    async askRestoreConfirmation(event, opts) {
+        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, false, event, opts);
     }
     async showToast(opts) {
         if (!this.toastController)
@@ -44185,6 +44578,12 @@ class AppAsyncTable {
             return true; // no row to confirm
         // Stop event
         event?.stopPropagation();
+        // Wait for async validation to complete (with timeout safety net).
+        // This prevents the internal waitWhilePending() in AsyncTableElementReactiveForms.isValid()
+        // (from @e-is/ngx-material-table) from hanging indefinitely if statusChanges never emits.
+        if (row.validator?.pending) {
+            await AppFormUtils.waitWhilePending(row.validator, { timeout: 10000 });
+        }
         // Confirmation edition or creation
         const confirmed = await row.confirmEditCreate();
         if (confirmed) {
@@ -44762,8 +45161,8 @@ class AppAsyncTable {
             }
         }
         // Ask user confirmation
-        if (this.confirmBeforeCancel && (!opts || opts.interactive !== false)) {
-            return this.askCancelConfirmation(null, rows);
+        if (this.confirmBeforeCancel && opts?.interactive !== false) {
+            return this.askCancelConfirmation(null, rows, opts);
         }
         return true;
     }
@@ -45017,20 +45416,20 @@ class AppAsyncTable {
     }
     async askDeleteConfirmation(event, rows, opts) {
         if (isNotNilOrBlank(opts?.messageKey)) {
-            return Alerts.askConfirmation(opts.messageKey, this.alertCtrl, this.translate, event);
+            return Alerts.askConfirmation(opts.messageKey, this.alertCtrl, this.translate, event, opts);
         }
         if (this.undoableDeletion) {
             // Special message, for undoable deletion
-            return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.DELETE_ROW' : 'CONFIRM.DELETE_ROWS', this.alertCtrl, this.translate, event);
+            return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.DELETE_ROW' : 'CONFIRM.DELETE_ROWS', this.alertCtrl, this.translate, event, opts);
         }
         // Immediate deletion action
-        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, true, event);
+        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, true, event, opts);
     }
-    async askCancelConfirmation(event, rows) {
-        return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.CANCEL_ROW' : 'CONFIRM.CANCEL_ROWS', this.alertCtrl, this.translate, event);
+    async askCancelConfirmation(event, rows, opts) {
+        return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.CANCEL_ROW' : 'CONFIRM.CANCEL_ROWS', this.alertCtrl, this.translate, event, opts);
     }
-    async askRestoreConfirmation(event) {
-        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, false, event);
+    async askRestoreConfirmation(event, opts) {
+        return Alerts.askActionConfirmation(this.alertCtrl, this.translate, false, event, opts);
     }
     async showToast(opts) {
         if (!this.toastController)
@@ -48687,7 +49086,8 @@ class CoreModule {
             AppAboutModalModule,
             AppSettingsPageModule,
             AppIconModule,
-            AppIconSelectorModule, AppSelectPeerModule,
+            AppIconSelectorModule,
+            AppSelectPeerModule,
             AppFormModule,
             AppTableModule,
             AppInstallUpgradeCardModule,
@@ -48722,7 +49122,8 @@ class CoreModule {
             AppAboutModalModule,
             AppSettingsPageModule,
             AppIconModule,
-            AppIconSelectorModule, AppSelectPeerModule,
+            AppIconSelectorModule,
+            AppSelectPeerModule,
             AppFormModule,
             AppTableModule,
             AppInstallUpgradeCardModule,
@@ -48766,7 +49167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                         AppAboutModalModule,
                         AppSettingsPageModule,
                         AppIconModule,
-                        AppIconSelectorModule, AppSelectPeerModule,
+                        AppIconSelectorModule,
+                        AppSelectPeerModule,
                         AppFormModule,
                         AppTableModule,
                         AppInstallUpgradeCardModule,
@@ -49282,7 +49684,7 @@ class AppEntityEditor extends AppTabEditor {
         if (this.loading || this.saving)
             return false;
         // Ask user confirmation
-        const confirmation = await Alerts.askDeleteConfirmation(this.alertCtrl, this.translate);
+        const confirmation = await Alerts.askDeleteConfirmation(this.alertCtrl, this.translate, event, opts);
         if (!confirmation)
             return;
         console.debug('[data-editor] Asking to delete...');
@@ -52700,7 +53102,7 @@ class GalleryTestPage {
         this.debug = !this.debug;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", 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      <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.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.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: i2$2.IonBackButton, selector: "ion-back-button" }, { 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", "imageSizes", "imageSizeQueryParam", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "editionFormat", "editionQuality", "slideshowMode", "inlineZoomHeight", "enableSlideshowLoop", "canFetchMore", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "click", "previousSlide", "nextSlide", "fetchMore"] }, { 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.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8.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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", 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      <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.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.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: i2$2.IonBackButton, selector: "ion-back-button" }, { 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", "imageSizes", "imageSizeQueryParam", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotate", "enableCrop", "editionFormat", "editionQuality", "slideshowMode", "inlineZoomHeight", "enableSlideshowLoop", "canFetchMore", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "click", "previousSlide", "nextSlide", "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.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i8.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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: GalleryTestPage, decorators: [{
             type: Component,
@@ -55486,5 +55888,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_SERVICE, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppHomePageModule, AppIconComponent, AppIconModule, AppIconSelectorField, AppIconSelectorModal, AppIconSelectorModule, AppImageGalleryComponent, AppImageGallerySlideshowComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSelectUsersModal, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextFormModule, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppWebSocket, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EmptyMissingTranslationHandler, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialAutocompleteFooterDirective, MaterialAutocompleteHeaderDirective, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NativeWebSocket, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StorageServiceWrapper, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, TRACKED_QUERIES_STORAGE_KEY, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserController, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createApolloClientOptions, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, createTrackerLink, decorateWithTakeUntil, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, initializeSharedModule, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isMutationOperation, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isSubscriptionOperation, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, loggerLink, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, restoreTrackedQueries, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_SERVICE, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppHomePageModule, AppIconComponent, AppIconModule, AppIconSelectorField, AppIconSelectorModal, AppIconSelectorModule, AppImageGalleryComponent, AppImageGallerySlideshowComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSelectUsersModal, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextFormModule, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppWebSocket, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EmptyMissingTranslationHandler, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GitlabUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, IconSelectorTestPage, IconSelectorTestingModule, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialAutocompleteFooterDirective, MaterialAutocompleteHeaderDirective, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NativeWebSocket, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StorageServiceWrapper, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, TRACKED_QUERIES_STORAGE_KEY, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, TimeFormatPipe, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserController, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createApolloClientOptions, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, createTrackerLink, decorateWithTakeUntil, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, initializeSharedModule, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isMutationOperation, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isSubscriptionOperation, isTouchUi, isVersionCompatible, isWebAnimationsSupported, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, loggerLink, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, restoreTrackedQueries, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map