@sumaris-net/ngx-components 2.4.116 → 2.4.118

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

@@ -56,7 +56,7 @@ import * as i6 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 import * as i1$2 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR, AbstractControl, UntypedFormGroup, UntypedFormArray, UntypedFormControl, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
-import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, of, from, noop as noop$9, Observable, forkJoin, defer, fromEventPattern, interval, EMPTY } from 'rxjs';
+import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, of, from, noop as noop$9, Observable, forkJoin, defer, fromEventPattern, interval, combineLatest, EMPTY } from 'rxjs';
 import { filter, map, takeUntil, first, switchMap, tap, debounceTime, startWith, distinctUntilChanged, mergeMap, catchError, throttleTime, skip, bufferWhen, mapTo, take } from 'rxjs/operators';
 import * as i2 from '@ionic/angular';
 import { IonicModule, IonicSlides, Platform, ToastController, IonicSafeString, createAnimation, IonicRouteStrategy, NavController, ModalController, AlertController, IonContent, IonRouterOutlet, IonItem, IonModal, IonInfiniteScroll } from '@ionic/angular';
@@ -6911,7 +6911,7 @@ class MatDateTime {
 MatDateTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 MatDateTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatDateTime, selector: "mat-date-time-field", inputs: { formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", placeholderChar: "placeholderChar", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
         DEFAULT_VALUE_ACCESSOR$4,
-    ], 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<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding mat-form-field-{{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n                        >\n\n          <mat-label (focusin)=\"mobile && _preventEvent($event)\" *ngIf=\"placeholder\" >{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dayControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"_checkIfTouched()\"\n                 (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"!mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <!-- Mobile -->\n          <input #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dayControl\"\n                 (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n          <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n                  (click)=\"openDatePicker($event, datePicker)\"\n                  [disabled]=\"formControl.disabled\">\n            <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"disabled\"\n                        [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{hourControl.value||('COMMON.TIME'|translate)}}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <mat-error  *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n          </mat-error>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input matInput #matInput type=\"text\" [formControl]=\"hourControl\"\n                 *ngIf=\"!mobile\"\n                 class=\"mat-input-element\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowDown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 (blur)=\"_checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input #matInput type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"hourControl\"\n                 (click)=\"_openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <!-- Hide the final (hidden) input -->\n          <input matInput [formControl]=\"hourControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\"\n                 readonly>\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"_openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"_onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\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-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field mat-label,ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.mat-form-field-outline ion-col.day{min-width:153px}.mat-form-field-outline ion-col.hour{min-width:100px;max-width:110px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.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.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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.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: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: i12$1.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["ESC", "hoursOnly", "ngxMaterialTimepickerTheme", "format", "minutesGap", "cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "defaultTime", "timepickerClass", "theme", "min", "max"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12$1.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "value", "min", "max", "ngxTimepicker", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding mat-form-field-{{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n                        >\n\n          <mat-label (focusin)=\"mobile && _preventEvent($event)\" *ngIf=\"placeholder\" >{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dayControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"_checkIfTouched()\"\n                 (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"!mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <!-- Mobile -->\n          <input #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dayControl\"\n                 (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n          <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n                  (click)=\"openDatePicker($event, datePicker)\"\n                  [disabled]=\"formControl.disabled\">\n            <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"disabled\"\n                        [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{hourControl.value||('COMMON.TIME'|translate)}}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <mat-error  *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n          </mat-error>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input matInput #matInput type=\"text\" [formControl]=\"hourControl\"\n                 *ngIf=\"!mobile\"\n                 class=\"mat-input-element\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowDown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 (blur)=\"_checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input #matInput type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"hourControl\"\n                 (click)=\"_openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <!-- Hide the final (hidden) input -->\n          <input matInput [formControl]=\"hourControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\"\n                 readonly>\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"_openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"_onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\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-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field mat-label,ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.mat-form-field-outline ion-col.day{min-width:153px}.mat-form-field-outline ion-col.hour{min-width:100px;max-width:110px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.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.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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.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: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: i12$1.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12$1.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-time-field', providers: [
@@ -11738,10 +11738,10 @@ const environment = Object.freeze({
     helpUrl: 'https://gitlab.ifremer.fr/sih-public/sumaris/sumaris-doc/-/blob/master/user-manual/index_fr.md',
     // Development
     defaultAuthValues: {
-    // Basic auth (using Person.username)
-    // username: 'admq2', password: 'q22006'
-    // Token auth (using Person.pubkey)
-    //username: 'admin@sumaris.net', password: 'admin',
+        // Basic auth (using Person.username)
+        // username: 'admq2', password: 'q22006'
+        // Token auth (using Person.pubkey)
+        username: 'admin@sumaris.net', password: 'admin',
     },
     account: {
         enableListenChanges: true,
@@ -16368,6 +16368,30 @@ let Account = Account_1 = class Account extends Person {
 Account = Account_1 = __decorate([
     EntityClass({ typename: 'AccountVO' })
 ], Account);
+class AccountUtils {
+    static hasMinProfile(account, userProfile) {
+        // should be login, and status ENABLE or TEMPORARY
+        if (!account || !account.pubkey ||
+            (account.statusId !== StatusIds.ENABLE && account.statusId !== StatusIds.TEMPORARY)) {
+            return false;
+        }
+        return PersonUtils.hasUpperOrEqualsProfile(account.profiles, userProfile);
+    }
+    static hasExactProfile(account, label) {
+        // should be login, and status ENABLE or TEMPORARY
+        if (!account || !account.pubkey ||
+            (account.statusId !== StatusIds.ENABLE && account.statusId !== StatusIds.TEMPORARY))
+            return false;
+        return account.profiles.some(profile => profile === label);
+    }
+    static hasProfileAndIsEnable(account, userProfile) {
+        // should be login, and status ENABLE
+        if (!account || !account.pubkey || account.statusId !== StatusIds.ENABLE)
+            return false;
+        return PersonUtils.hasUpperOrEqualsProfile(account.profiles, userProfile);
+    }
+}
+AccountUtils.accountToString = accountToString;
 function accountToString(data) {
     return data &&
         ((data.firstName && (data.firstName + ' ') || '') +
@@ -17752,17 +17776,10 @@ class AccountService extends BaseGraphqlService {
         return PersonUtils.hasUpperOrEqualsProfile(this._data.profiles, userProfile);
     }
     hasExactProfile(label) {
-        // should be login, and status ENABLE or TEMPORARY
-        if (!this._data || !this._data.pubkey ||
-            (this._data.statusId !== StatusIds.ENABLE && this._data.statusId !== StatusIds.TEMPORARY))
-            return false;
-        return this._data.profiles.some(profile => profile === label);
+        return AccountUtils.hasExactProfile(this._data, label);
     }
     hasProfileAndIsEnable(userProfile) {
-        // should be login, and status ENABLE
-        if (!this._data || !this._data.pubkey || this._data.statusId !== StatusIds.ENABLE)
-            return false;
-        return PersonUtils.hasUpperOrEqualsProfile(this._data.profiles, userProfile);
+        return AccountUtils.hasProfileAndIsEnable(this._data, userProfile);
     }
     isAdmin() {
         return this.hasProfileAndIsEnable('ADMIN');
@@ -18217,12 +18234,7 @@ class AccountService extends BaseGraphqlService {
             // Read main profile
             this._cache.mainProfile = PersonUtils.getMainProfile(account.profiles);
             // Update, instead of replace it
-            if (this._data) {
-                this._data.fromObject(account);
-            }
-            else {
-                this._data = account;
-            }
+            this._data = account;
             this._cache.loaded = true;
             // Apply settings, found in remote account
             if (account.settings) {
@@ -21299,7 +21311,7 @@ class StorageExplorerComponent {
     }
 }
 StorageExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerComponent, deps: [{ token: i2.Platform }, { token: i2.ToastController }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: i1.MomentDateAdapter }, { token: i0.ChangeDetectorRef }, { token: APP_STORAGE }, { token: ENVIRONMENT }, { token: APP_DEBUG_DATA_SERVICE, optional: true }, { token: APP_STORAGE_EXPLORER_PROTECTED_KEYS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-StorageExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StorageExplorerComponent, selector: "app-storage-explorer", inputs: { mobile: "mobile", showSendButton: "showSendButton" }, viewQueries: [{ propertyName: "sendDataModal", first: true, predicate: ["sendDataModal"], descendants: true }, { propertyName: "viewDataModal", first: true, predicate: ["viewDataModal"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "translucent", "trigger"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StorageExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StorageExplorerComponent, selector: "app-storage-explorer", inputs: { mobile: "mobile", showSendButton: "showSendButton" }, viewQueries: [{ propertyName: "sendDataModal", first: true, predicate: ["sendDataModal"], descendants: true }, { propertyName: "viewDataModal", first: true, predicate: ["viewDataModal"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "translucent", "trigger"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-storage-explorer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"] }]
@@ -21331,29 +21343,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['viewDataModal']
             }] } });
 
-const SHARED_STORAGE_TESTING_PAGES = [
-    { label: 'Storage explorer', page: '/testing/shared/storage' }
-];
-const routes$a = [
-    {
-        path: 'storage',
-        pathMatch: 'full',
-        component: StorageExplorerComponent,
-    }
-];
 class StorageExplorerModule {
 }
 StorageExplorerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 StorageExplorerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerModule, declarations: [StorageExplorerComponent], imports: [IonicModule,
-        CommonModule, i1$1.TranslateModule, i1$5.RouterModule, ForModule,
+        CommonModule,
+        ForModule, i1$1.TranslateModule, 
         // Other shared modules
         SharedPipesModule,
         SharedMaterialModule], exports: [StorageExplorerComponent] });
 StorageExplorerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerModule, imports: [IonicModule,
         CommonModule,
-        TranslateModule.forChild(),
-        RouterModule.forChild(routes$a),
         ForModule,
+        TranslateModule.forChild(),
         // Other shared modules
         SharedPipesModule,
         SharedMaterialModule] });
@@ -21363,9 +21365,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     imports: [
                         IonicModule,
                         CommonModule,
-                        TranslateModule.forChild(),
-                        RouterModule.forChild(routes$a),
                         ForModule,
+                        TranslateModule.forChild(),
                         // Other shared modules
                         SharedPipesModule,
                         SharedMaterialModule
@@ -22660,10 +22661,10 @@ class MenuItems {
             && this.isSameParams(child.parentPathParams, parent['pathParams'] || parent['params']) || false;
         return result;
     }
-    static checkIfVisible(item, accountService, config, opts) {
+    static checkIfVisible(item, account, config, opts) {
         opts = opts || {};
         if (item.profile) {
-            const hasProfile = accountService.isLogin() && accountService.hasMinProfile(item.profile);
+            const hasProfile = AccountUtils.hasMinProfile(account, item.profile);
             if (!hasProfile) {
                 if (opts.debug)
                     console.debug(`${opts && opts.logPrefix || '[menu]'} Hide item '${item.title}': need the min profile '${item.profile}' to access path '${item.path}'`);
@@ -22671,7 +22672,7 @@ class MenuItems {
             }
         }
         else if (item.exactProfile) {
-            const hasExactProfile = accountService.hasExactProfile(item.exactProfile);
+            const hasExactProfile = AccountUtils.hasExactProfile(account, item.exactProfile);
             if (!hasExactProfile) {
                 if (opts.debug)
                     console.debug(`${opts && opts.logPrefix || '[menu]'} Hide item '${item.title}': need exact profile '${item.exactProfile}' to access path '${item.path}'`);
@@ -22714,26 +22715,23 @@ class MenuOptions {
 
 const DEFAULT_MENU_SHOW_WHEN = 'lg';
 class MenuService extends StartableService {
-    constructor(platformService, configService, accountService, router, environment, rootItems) {
+    constructor(platformService, configService, accountService, router, environment, staticItems) {
         super(platformService);
         this.platformService = platformService;
         this.configService = configService;
         this.accountService = accountService;
         this.router = router;
         this.environment = environment;
-        this.onLoginChange = new Subject();
         this.onUpdateMenu = new EventEmitter();
-        this.$items = new BehaviorSubject(undefined);
         this._logPrefix = '[menu-service]';
-        this._$toggled = new Subject();
         this._$opened = new Subject();
         this._$splitPaneWhen = new BehaviorSubject(DEFAULT_MENU_SHOW_WHEN);
         this._$enabled = new BehaviorSubject(true);
         this._debug = !environment.production;
-        this.$items.next((rootItems || []).map(i => this.prepareItem(i)));
+        this._staticItems = (staticItems || []).map(i => this.prepareItem(i));
     }
-    get rootItems() {
-        return this.$items.value;
+    get $items() {
+        return this._data;
     }
     get opened() {
         return this._$opened.asObservable();
@@ -22744,9 +22742,6 @@ class MenuService extends StartableService {
     get enabled() {
         return this._$enabled.asObservable();
     }
-    toggle() {
-        this._$toggled.next();
-    }
     enable(value) {
         this._$enabled.next(value);
     }
@@ -22771,55 +22766,51 @@ class MenuService extends StartableService {
     }
     async addSubMenuItems(newItems, opts) {
         await this.ready();
-        newItems.forEach(i => this.addSubMenuItem(i), opts);
+        newItems.forEach(i => this.addSubMenuItem(i, opts));
     }
     async ngOnStart() {
         console.info(`${this._logPrefix} Starting...`);
-        // Update component when refresh is need (=login events or config changed)
-        this.registerSubscription(merge(merge(this.accountService.onLogin
-            .pipe(
-        // Filter on account changes
-        filter(account => !DateUtils.isSame(account?.updateDate, this.lastAccountUpdateDate))), this.configService.config
-            .pipe(
-        // Store the config
-        tap(config => this._config = config)))
-            .pipe(
-        // Add debounce to avoid to trigger twice, at startup
-        debounceTime(250), 
-        // Wait account service ready (can be restarted)
-        mergeMap(() => this.accountService.ready()), map(() => this.accountService.account)), 
-        // Logout
-        this.accountService.onLogout.pipe(mapTo(null)))
-            .subscribe(async (account) => {
-            if (account?.updateDate) {
-                this.lastAccountUpdateDate = account.updateDate;
-                this.onLoginChange.next(account);
-            }
-            else {
-                this.lastAccountUpdateDate = null;
-                this.onLoginChange.next(null);
-            }
-            this.refreshMenuItems();
+        this._data = new BehaviorSubject(this._staticItems);
+        const accountEvent$ = merge(from(this.accountService.ready()), merge(this.accountService.onLogin, this.accountService.onLogout.pipe(map(_ => null)))).pipe(distinctUntilChanged((a1, a2) => DateUtils.isSame(a1?.updateDate, a2?.updateDate)), map(account => isNotNil(account?.id) ? account : null));
+        this.registerSubscription(
+        // Combine config and account events
+        combineLatest([
+            this.configService.config,
+            accountEvent$,
+        ]).subscribe(([config, account]) => {
+            console.debug(`${this._logPrefix} Received config or account event. Refreshing items...`, account);
+            this.loadMenuItems(config, account);
         }));
         this.registerSubscription(this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
             const pathParam = MenuItems.parsePathWithQuery(event.url);
             const excludedItems = [];
-            const items = this.detachSubMenus(pathParam, this.$items.value, excludedItems);
+            this.detachSubMenus(pathParam, this._data.value, excludedItems);
             console.debug(`${this._logPrefix} Detached sub menus: `, excludedItems);
+            // TODO Re-add submenu items
             // this.addSubMenuItems();
             //this.$items.next(items);
         }));
-        return this.$items.value;
+        return this._data;
     }
-    refreshMenuItems() {
+    async loadMenuItems(config, account) {
         if (this._debug)
-            console.debug(`${this._logPrefix} Refreshing menu items...`);
-        // Insert menu items, from the config
-        const configValue = this._config && this._config.getProperty(CORE_CONFIG_OPTIONS.MENU_ITEMS);
+            console.debug(`${this._logPrefix} Add config menu items...`);
+        // Save previous children of root items
+        const rootChildren = (this._data?.value || [])
+            .reduce((res, rootItem) => res.concat(rootItem?.$children?.value || []), []);
+        // Reset base root items (clean items added by config)
+        let items = this._staticItems.slice();
+        // Concat config's items
+        const configValue = config?.getProperty(CORE_CONFIG_OPTIONS.MENU_ITEMS);
         if (isNotNilOrBlank(configValue)) {
             try {
                 const configItems = JSON.parse(configValue);
-                this._data = (configItems || []).reduce((res, item) => {
+                items = (configItems || []).reduce((res, item) => {
+                    // Normalize the item
+                    item = this.prepareItem(item);
+                    // Skip is already loaded
+                    if (res.find((i) => MenuItems.isSame(i, item)))
+                        return res;
                     if (item.after) {
                         const index = res.findIndex(i => i.title === item.after);
                         if (index !== -1) {
@@ -22828,7 +22819,7 @@ class MenuService extends StartableService {
                                 .concat(res.slice(index + 1));
                         }
                     }
-                    if (item.before) {
+                    else if (item.before) {
                         const index = res.findIndex(i => i.title === item.before);
                         if (index !== -1) {
                             return res.slice(0, index)
@@ -22837,26 +22828,28 @@ class MenuService extends StartableService {
                         }
                     }
                     return res.concat(item);
-                }, this._data);
+                }, items);
             }
             catch (err) {
                 console.error(`${this._logPrefix} Invalid value for option '${CORE_CONFIG_OPTIONS.MENU_ITEMS.key}'. Expected an array of menu item`, err);
             }
         }
-        // TODO : isLogin is not used in MenuItems.checkIfVisible
+        // Filter item using account rights
         const opts = { debug: this._debug };
-        const filteredItems = this._data
-            .filter(item => MenuItems.checkIfVisible(item, this.accountService, this._config, opts))
+        items = items
+            .filter(item => MenuItems.checkIfVisible(item, account, config, opts))
             .map(item => {
             // Replace title using properties
-            if (isNotNilOrBlank(item.titleProperty) && this._config) {
-                const title = this._config.properties[item.titleProperty];
+            if (isNotNilOrBlank(item.titleProperty) && config) {
+                const title = config.properties[item.titleProperty];
                 if (title)
                     return { ...item, title }; // Create a copy, to keep the original item.title
             }
             return item;
         });
-        this.$items.next(filteredItems);
+        // Re-attach sub menu items
+        await this.addSubMenuItems(rootChildren, { skipIfExists: false, availableParents: items });
+        this._data.next(items);
     }
     async addSubMenuItem(newItem, opts) {
         opts = {
@@ -22872,17 +22865,9 @@ class MenuService extends StartableService {
             console.debug(`${this._logPrefix} Skipping sub item (already exist)`, newItem);
             return; // Already add
         }
-        const parent = this.findParent(newItem);
+        const parent = this.findParent(newItem, opts?.availableParents);
         if (!parent) {
             console.warn(`${this._logPrefix} Unable to add sub item: no parent found`);
-            const parentUrlTre = this.router.createUrlTree(newItem.parentPath.split('/'), {
-                queryParams: newItem.parentPathParams
-            });
-            const data = this.router.routerState.root.parent?.data;
-            console.log('TODO check parent data', data);
-            /*await this.router.navigateByUrl(newItem.parentPath, {
-              skipLocationChange: true
-            });*/
         }
         else {
             this.addMenuToParent(parent, newItem);
@@ -22908,16 +22893,16 @@ class MenuService extends StartableService {
         return item;
     }
     findExistingItem(item, items) {
-        items = items || this.$items.value;
+        items = items || this._data.value;
         if (!items.length)
             return undefined; // Not found
         return items.find(i => MenuItems.isSame(i, item) || (i.$children && this.findExistingItem(item, i.$children.value)));
     }
-    findParent(childItem, parentItems) {
+    findParent(childItem, availableParents) {
         if (!childItem?.path)
             return undefined;
-        parentItems = parentItems || this.$items.value;
-        return parentItems.reduce((res, item) => {
+        availableParents = availableParents || this._data.value;
+        return availableParents.reduce((res, item) => {
             if (!item?.path)
                 return res;
             // A found item already match with the menuItem.parentPath : keep it as it
@@ -22950,7 +22935,7 @@ class MenuService extends StartableService {
         this.onUpdateMenu.emit();
     }
     detachSubMenus(currentPathParam, items, excludedItems) {
-        items = items || this.rootItems;
+        items = items || this._data.value;
         excludedItems = excludedItems || [];
         items = items.filter(item => {
             if (!item.parentPath)
@@ -22972,9 +22957,6 @@ class MenuService extends StartableService {
         });
         return items;
     }
-    isVisibleForRoute(item, currentPathParam) {
-        return;
-    }
 }
 MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuService, deps: [{ token: PlatformService }, { token: ConfigService }, { token: AccountService }, { token: i1$5.Router }, { token: ENVIRONMENT }, { token: APP_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuService, providedIn: 'root' });
@@ -23030,24 +23012,19 @@ class MenuComponent {
         this.splitPane.when = await firstNotNilPromise(this.menuService.splitPaneWhen);
         // Wait platform started
         await this.menuService.ready();
-        // await this.platformService.ready();
         // Listen to menu service event
-        this.menuService.splitPaneWhen
-            .subscribe((value) => this.setSplitPaneWhen(value));
-        this.menuService.enabled
-            .subscribe((value) => this.enable(value));
-        this.menuService.opened
+        this._subscription.add(this.menuService.splitPaneWhen
+            .subscribe((value) => this.setSplitPaneWhen(value)));
+        this._subscription.add(this.menuService.enabled
+            .subscribe((value) => this.enable(value)));
+        this._subscription.add(this.menuService.opened
             // Avoid duplicated events
             .pipe(distinctUntilChanged())
-            .subscribe((value) => value ? this.open() : this.close());
+            .subscribe((value) => value ? this.open() : this.close()));
         // TODO: delete this
         //this.menuService.onUpdateMenu.subscribe((_) => this.cd.markForCheck());
-        this._subscription.add(this.menuService.onLoginChange.subscribe(account => {
-            if (account)
-                this.onLogin(account);
-            else
-                this.onLogout(true);
-        }));
+        this._subscription.add(this.accountService.onLogin.subscribe(account => this.onLogin(account)));
+        this._subscription.add(this.accountService.onLogout.subscribe(_ => this.onLogout(true)));
     }
     async onLogin(account) {
         console.info('[menu] Update (on login)');
@@ -23055,10 +23032,7 @@ class MenuComponent {
         this.accountName = account.displayName;
         this.accountEmail = account.email;
         this.isLogin = true;
-        setTimeout(() => {
-            this.loading = false;
-            this.detectChanges();
-        }, 500);
+        this.cd.markForCheck();
     }
     async onLogout(skipRedirect) {
         if (!skipRedirect) {
@@ -23202,10 +23176,10 @@ class MenuComponent {
     }
 }
 MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, deps: [{ token: PlatformService }, { token: AccountService }, { token: i2.NavController }, { token: i2.MenuController }, { token: i2.ModalController }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: ConfigService }, { token: i0.ChangeDetectorRef }, { token: MenuService }, { token: ENVIRONMENT }, { token: i1$5.ActivatedRoute, optional: true }, { token: APP_MENU_OPTIONS, optional: true }, { token: APP_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", 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\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of menuService.$items | async\"><!-- TODO trackBy: trackByFn -->\n          <ng-container *ngIf=\"!loading\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n          </ng-container>\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\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  <!-- link -->\n  <!-- TODO : better to set padding with css varirable ? (style=\"$menu-item-level:{{ level }})\"-->\n  <ion-item *ngIf=\"item.path\"\n            @fadeInAnimation\n            style=\"padding-left:{{level * 15}}px\"\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            [routerLink]=\"item.path\"\n            [queryParams]=\"item.pathParams\"\n            routerDirection=\"root\"\n            routerLinkActive=\"selected\"\n            [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level != 0)}\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- action -->\n  <ion-item *ngIf=\"item.action\"\n            @fadeInAnimation\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            (click)=\"doAction(item.action, $event)\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- divider -->\n  <ion-item-divider @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    *ngIf=\"!item.path && !item.action\">\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item-divider>\n\n  <!-- children -->\n  <ng-container *ngIf=\"item?.$children\">\n    <ng-container *ngFor=\"let child of item.$children | async\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["ion-menu{--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)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{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;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top: 188px}ion-menu ion-content.no-profile-header{--offset-top: 79px}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.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.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-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i9$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "app-menu", inputs: { id: "id", menuId: "menuId", side: "side", contentId: "contentId", logo: "logo", appName: "appName", 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\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ng-container *ngFor=\"let item of menuService.$items | async\">\n          <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n        </ng-container>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\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  <!-- link -->\n  <!-- TODO : better to set padding with css varirable ? (style=\"$menu-item-level:{{ level }})\"-->\n  <ion-item *ngIf=\"item.path\"\n            @fadeInAnimation\n            style=\"padding-left:{{level * 15}}px\"\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            [routerLink]=\"item.path\"\n            [queryParams]=\"item.pathParams\"\n            routerDirection=\"root\"\n            routerLinkActive=\"selected\"\n            [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level != 0)}\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- action -->\n  <ion-item *ngIf=\"item.action\"\n            @fadeInAnimation\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            (click)=\"doAction(item.action, $event)\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- divider -->\n  <ion-item-divider @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    *ngIf=\"!item.path && !item.action\">\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item-divider>\n\n  <!-- children -->\n  <ng-container *ngIf=\"item?.$children\">\n    <ng-container *ngFor=\"let child of item.$children | async\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["ion-menu{--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)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{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;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top: 188px}ion-menu ion-content.no-profile-header{--offset-top: 79px}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.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.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-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width: 40px}@media screen and (max-width: 767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width: 768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size, 80px)!important;line-height:var(--avatar-size, 80px);height:var(--avatar-size, 80px)!important;width:var(--avatar-size, 80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size, 80px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSplitPane, selector: "ion-split-pane", inputs: ["contentId", "disabled", "when"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i9$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu', animations: [fadeInAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of menuService.$items | async\"><!-- TODO trackBy: trackByFn -->\n          <ng-container *ngIf=\"!loading\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n          </ng-container>\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\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  <!-- link -->\n  <!-- TODO : better to set padding with css varirable ? (style=\"$menu-item-level:{{ level }})\"-->\n  <ion-item *ngIf=\"item.path\"\n            @fadeInAnimation\n            style=\"padding-left:{{level * 15}}px\"\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            [routerLink]=\"item.path\"\n            [queryParams]=\"item.pathParams\"\n            routerDirection=\"root\"\n            routerLinkActive=\"selected\"\n            [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level != 0)}\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- action -->\n  <ion-item *ngIf=\"item.action\"\n            @fadeInAnimation\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            (click)=\"doAction(item.action, $event)\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- divider -->\n  <ion-item-divider @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    *ngIf=\"!item.path && !item.action\">\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item-divider>\n\n  <!-- children -->\n  <ng-container *ngIf=\"item?.$children\">\n    <ng-container *ngFor=\"let child of item.$children | async\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["ion-menu{--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)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{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;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top: 188px}ion-menu ion-content.no-profile-header{--offset-top: 79px}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.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.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-footer{display:block!important}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: [fadeInAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ng-container *ngFor=\"let item of menuService.$items | async\">\n          <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n        </ng-container>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\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  <!-- link -->\n  <!-- TODO : better to set padding with css varirable ? (style=\"$menu-item-level:{{ level }})\"-->\n  <ion-item *ngIf=\"item.path\"\n            @fadeInAnimation\n            style=\"padding-left:{{level * 15}}px\"\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            [routerLink]=\"item.path\"\n            [queryParams]=\"item.pathParams\"\n            routerDirection=\"root\"\n            routerLinkActive=\"selected\"\n            [routerLinkActiveOptions]=\"{exact: (item.path === '/' || level != 0)}\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- action -->\n  <ion-item *ngIf=\"item.action\"\n            @fadeInAnimation\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            tappable\n            (click)=\"doAction(item.action, $event)\">\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item>\n\n  <!-- divider -->\n  <ion-item-divider @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    *ngIf=\"!item.path && !item.action\">\n    <ion-label translate>{{item.title}}</ion-label>\n  </ion-item-divider>\n\n  <!-- children -->\n  <ng-container *ngIf=\"item?.$children\">\n    <ng-container *ngFor=\"let child of item.$children | async\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: ["ion-menu{--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)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{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;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top: 188px}ion-menu ion-content.no-profile-header{--offset-top: 79px}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.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.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-footer{display:block!important}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: function () { return [{ type: PlatformService }, { type: AccountService }, { type: i2.NavController }, { type: i2.MenuController }, { type: i2.ModalController }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: ConfigService }, { type: i0.ChangeDetectorRef }, { type: MenuService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -24385,7 +24359,7 @@ class HomePage {
         //console.debug('[home] Logged account: ', account);
         this.isLogin = true;
         this.accountName = accountToString(account);
-        this.refreshButtons();
+        this.refreshButtons(account);
         this.markForCheck();
     }
     onLogout() {
@@ -24395,13 +24369,14 @@ class HomePage {
         this.refreshButtons();
         this.markForCheck();
     }
-    refreshButtons() {
+    refreshButtons(account) {
         if (!this._config)
             return; // Skip (waiting config to be loaded)
         if (this._debug)
             console.debug('[home] Refreshing buttons...');
+        account = account || this.accountService.account;
         const filteredButtons = (this.buttons || [])
-            .filter((item) => MenuItems.checkIfVisible(item, this.accountService, this._config, {
+            .filter((item) => MenuItems.checkIfVisible(item, account, this._config, {
             isLogin: this.isLogin,
             debug: this._debug,
             logPrefix: '[home]'
@@ -34605,7 +34580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const routes$9 = [
+const routes$b = [
     {
         path: 'users',
         pathMatch: 'full',
@@ -34624,14 +34599,14 @@ AdminRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         AdminModule, i1$5.RouterModule], exports: [RouterModule] });
 AdminRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminRoutingModule, imports: [SharedRoutingModule,
         AdminModule,
-        RouterModule.forChild(routes$9), RouterModule] });
+        RouterModule.forChild(routes$b), RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AdminRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         SharedRoutingModule,
                         AdminModule,
-                        RouterModule.forChild(routes$9)
+                        RouterModule.forChild(routes$b)
                     ],
                     exports: [RouterModule]
                 }]
@@ -35533,7 +35508,7 @@ const SHARED_MATERIAL_TESTING_PAGES = [
     { label: 'Shared utils', divider: true },
     { label: 'Observable', page: '/testing/shared/observable' }
 ];
-const routes$8 = [
+const routes$a = [
     {
         path: '',
         pathMatch: 'full',
@@ -35621,7 +35596,7 @@ MaterialTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         ReactiveFormsModule,
         SharedMaterialModule,
         TranslateModule.forChild(),
-        RouterModule.forChild(routes$8),
+        RouterModule.forChild(routes$a),
         SharedPipesModule, SharedMaterialModule,
         RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaterialTestingModule, decorators: [{
@@ -35633,7 +35608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         ReactiveFormsModule,
                         SharedMaterialModule,
                         TranslateModule.forChild(),
-                        RouterModule.forChild(routes$8),
+                        RouterModule.forChild(routes$a),
                         SharedPipesModule
                     ],
                     declarations: [
@@ -35711,7 +35686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'toast-testing', template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <ion-button (click)=\"showInfo({message: 'This is <b>HTML</b> text'})\" color=\"danger\">\n    message with HTML\n  </ion-button>\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\">\n        <ion-label>Close button ?</ion-label>\n      </ion-checkbox>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
-const routes$7 = [
+const routes$9 = [
     {
         path: 'toast',
         pathMatch: 'full',
@@ -35727,7 +35702,7 @@ ToastTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
 ToastTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastTestingModule, imports: [CommonModule,
         IonicModule,
         TranslateModule.forChild(),
-        RouterModule.forChild(routes$7), RouterModule] });
+        RouterModule.forChild(routes$9), RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastTestingModule, decorators: [{
             type: NgModule,
             args: [{
@@ -35735,7 +35710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CommonModule,
                         IonicModule,
                         TranslateModule.forChild(),
-                        RouterModule.forChild(routes$7)
+                        RouterModule.forChild(routes$9)
                     ],
                     declarations: [
                         ToastTestingPage
@@ -35795,7 +35770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'upload-file-testing', template: "<ion-toolbar color=\"primary\">\n  <ion-title>File upload</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Popover examples:</p>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(unique file)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(many files)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(instant upload)\n  </ion-button>\n\n  <ion-button (click)=\"showPopover($event, {uniqueFile: false, instantUpload: true, maxParallelUpload: 3})\" color=\"tertiary\">\n    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(max parallel upload)\n  </ion-button>\n\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: i2.PopoverController }]; } });
 
-const routes$6 = [
+const routes$8 = [
     {
         path: 'upload-file',
         pathMatch: 'full',
@@ -35811,7 +35786,7 @@ UploadFileTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
 UploadFileTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UploadFileTestingModule, imports: [CommonModule,
         IonicModule,
         TranslateModule.forChild(),
-        RouterModule.forChild(routes$6), RouterModule] });
+        RouterModule.forChild(routes$8), RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UploadFileTestingModule, decorators: [{
             type: NgModule,
             args: [{
@@ -35819,7 +35794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CommonModule,
                         IonicModule,
                         TranslateModule.forChild(),
-                        RouterModule.forChild(routes$6)
+                        RouterModule.forChild(routes$8)
                     ],
                     declarations: [
                         UploadFileTestingPage
@@ -35939,7 +35914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     ], template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <app-image-gallery [dataSource]=\"dataSource\" (onAfterAddRows)=\"save()\">\n  </app-image-gallery>\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: ImageAttachmentService }]; } });
 
-const routes$5 = [
+const routes$7 = [
     {
         path: 'gallery',
         pathMatch: 'full',
@@ -35960,7 +35935,7 @@ ImageGalleryTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0
         IonicModule,
         ImageGalleryModule,
         TranslateModule.forChild(),
-        RouterModule.forChild(routes$5),
+        RouterModule.forChild(routes$7),
         TranslateModule.forChild(), RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryTestingModule, decorators: [{
             type: NgModule,
@@ -35970,7 +35945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         IonicModule,
                         ImageGalleryModule,
                         TranslateModule.forChild(),
-                        RouterModule.forChild(routes$5),
+                        RouterModule.forChild(routes$7),
                         TranslateModule.forChild(),
                     ],
                     declarations: [
@@ -36012,7 +35987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'audio-testing', template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"playStartupSound()\" color=\"dark\">\n    <ion-icon name=\"play\" slot=\"start\"></ion-icon>\n    Startup\n  </ion-button>\n\n  <ion-button (click)=\"playBeepConfirm()\" color=\"success\">\n    <ion-icon name=\"play\" slot=\"start\"></ion-icon>\n    Confirmation\n  </ion-button>\n\n  <ion-button (click)=\"playBeepNotification()\" color=\"tertiary\">\n    <ion-icon name=\"play\" slot=\"start\"></ion-icon>\n    Notification\n  </ion-button>\n\n  <ion-button (click)=\"playBeepError()\" color=\"accent\">\n    <ion-icon name=\"play\" slot=\"start\"></ion-icon>\n    Error\n  </ion-button>\n\n  <ion-button (click)=\"vibrate()\" color=\"accent\">\n    Vibrate (many time)\n  </ion-button>\n\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: AudioProvider }]; } });
 
-const routes$4 = [
+const routes$6 = [
     {
         path: 'audio',
         pathMatch: 'full',
@@ -36028,7 +36003,7 @@ AudioTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
 AudioTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AudioTestingModule, imports: [CommonModule,
         IonicModule,
         TranslateModule.forChild(),
-        RouterModule.forChild(routes$4), RouterModule] });
+        RouterModule.forChild(routes$6), RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AudioTestingModule, decorators: [{
             type: NgModule,
             args: [{
@@ -36036,7 +36011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CommonModule,
                         IonicModule,
                         TranslateModule.forChild(),
-                        RouterModule.forChild(routes$4)
+                        RouterModule.forChild(routes$6)
                     ],
                     declarations: [
                         AudioTestingPage
@@ -36048,6 +36023,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+const SHARED_STORAGE_TESTING_PAGES = [
+    { label: 'Storage explorer', page: '/testing/shared/storage' }
+];
+const routes$5 = [
+    {
+        path: 'storage',
+        loadChildren: () => Promise.resolve().then(function () { return storageExplorer_testingRouting_module; }).then(m => m.StorageExplorerTestingRoutingModule)
+    }
+];
+class StorageExplorerTestingModule {
+}
+StorageExplorerTestingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StorageExplorerTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingModule, imports: [CommonModule, i1$5.RouterModule], exports: [RouterModule] });
+StorageExplorerTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingModule, imports: [CommonModule,
+        RouterModule.forChild(routes$5), RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule.forChild(routes$5),
+                    ],
+                    exports: [
+                        RouterModule
+                    ]
+                }]
+        }] });
+
 class MenuTestingPage extends AppTabEditor {
     constructor(route, // Modal editor give 'null'
     router, navController, alertCtrl, translate, menuService) {
@@ -36100,7 +36103,13 @@ class MenuTestingPage extends AppTabEditor {
             this.thirdTabTitle = null;
         }
     }
-    initSubMenu() {
+    enableMenu(value) {
+        this.menuService.enable(value);
+    }
+    toggleSplitPaneWhen() {
+        this.menuService.toggleSplitPaneWhen();
+    }
+    async initSubMenu() {
         const pathParam = MenuItems.parsePathWithQuery(this.router.url);
         this.title = 'Menu';
         this.secondTabTitle = 'Others';
@@ -36108,7 +36117,7 @@ class MenuTestingPage extends AppTabEditor {
         this.childPath = '/testing/shared/menu/other';
         const path = '/testing/shared/menu';
         console.debug(`${this.logPrefix} Setup with`, { path, parentPath: this.parentPath });
-        this.menuService.addSubMenuItems([
+        await this.menuService.addSubMenuItems([
             {
                 title: 'Menu',
                 path,
@@ -36125,6 +36134,16 @@ class MenuTestingPage extends AppTabEditor {
                 profile: 'GUEST',
             }
         ]);
+        // Outside the route: shoul always be hidden
+        await this.menuService.addSubMenuItems([
+            {
+                title: 'HIDDEN item',
+                path: '"/referential/programs/40/strategies/bidon"',
+                parentPath: '/referential/programs/40/strategies',
+                action: null,
+                profile: 'GUEST',
+            }
+        ]);
     }
     getFirstInvalidTabIndex() {
         return 0;
@@ -36132,10 +36151,10 @@ class MenuTestingPage extends AppTabEditor {
 }
 MenuTestingPage.tabsChanges = new Subject();
 MenuTestingPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuTestingPage, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
-MenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuTestingPage, selector: "app-testing-menu", viewQueries: [{ propertyName: "tabs", predicate: MatTab, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i6$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i6$5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }] });
+MenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuTestingPage, selector: "app-testing-menu", viewQueries: [{ propertyName: "tabs", predicate: MatTab, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n\n        <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n          Disable menu\n        </ion-button>\n        <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n          Enable menu\n        </ion-button>\n        <ion-button (click)=\"toggleSplitPaneWhen()\"\n                    [disabled]=\"!(menuService.enabled|async)\">\n          Toggle split pane\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i6$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i6$5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-testing-menu', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
+            args: [{ selector: 'app-testing-menu', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n\n        <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n          Disable menu\n        </ion-button>\n        <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n          Enable menu\n        </ion-button>\n        <ion-button (click)=\"toggleSplitPaneWhen()\"\n                    [disabled]=\"!(menuService.enabled|async)\">\n          Toggle split pane\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }, { type: i2.NavController }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: MenuService }]; }, propDecorators: { tabs: [{
                 type: ViewChildren,
                 args: [MatTab]
@@ -36147,7 +36166,7 @@ class OtherMenuTestingPage extends MenuTestingPage {
         super(route, router, navController, alertCtrl, translate, menuService);
         this.logPrefix = '[menu-testing-other] ';
     }
-    initSubMenu() {
+    async initSubMenu() {
         const pathParam = MenuItems.parsePathWithQuery(this.router.url);
         this.title = 'Other';
         this.secondTabTitle = 'Second';
@@ -36156,7 +36175,7 @@ class OtherMenuTestingPage extends MenuTestingPage {
         const path = '/testing/shared/menu/other';
         const parentPath = '/testing/shared/menu?tab=1';
         console.debug(`${this.logPrefix} Setup with`, { path, parentPath });
-        this.menuService.addSubMenuItems([
+        await this.menuService.addSubMenuItems([
             {
                 title: 'Other',
                 path,
@@ -36176,13 +36195,13 @@ class OtherMenuTestingPage extends MenuTestingPage {
     }
 }
 OtherMenuTestingPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OtherMenuTestingPage, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2.NavController }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component });
-OtherMenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OtherMenuTestingPage, selector: "app-testing-menu-other", usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i6$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i6$5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }] });
+OtherMenuTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OtherMenuTestingPage, selector: "app-testing-menu-other", usesInheritance: true, ngImport: i0, template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n\n        <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n          Disable menu\n        </ion-button>\n        <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n          Enable menu\n        </ion-button>\n        <ion-button (click)=\"toggleSplitPaneWhen()\"\n                    [disabled]=\"!(menuService.enabled|async)\">\n          Toggle split pane\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i2.RouterLinkWithHrefDelegate, selector: "a[routerLink],area[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "component", type: i6$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i6$5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OtherMenuTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-testing-menu-other', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
+            args: [{ selector: 'app-testing-menu-other', template: "<app-toolbar [defaultBackHref]=\"parentPath\">\n  <ion-title>{{ title }}</ion-title>\n</app-toolbar>\n\n<ion-content>\n\n  <mat-tab-group #tabGroup\n                 [(selectedIndex)]=\"selectedTabIndex\"\n                 (selectedTabChange)=\"onTabChange($event)\"\n                 dynamicHeight>\n\n    <!-- TAB: 1 -->\n    <mat-tab label=\"Details\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>Details</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A first tab<br/>\n\n        <ion-button (click)=\"toggleThird()\">\n          Third tab ?\n        </ion-button>\n\n        <ion-button (click)=\"enableMenu(false)\" *ngIf=\"menuService.enabled|async\">\n          Disable menu\n        </ion-button>\n        <ion-button (click)=\"enableMenu(true)\" *ngIf=\"!(menuService.enabled|async)\">\n          Enable menu\n        </ion-button>\n        <ion-button (click)=\"toggleSplitPaneWhen()\"\n                    [disabled]=\"!(menuService.enabled|async)\">\n          Toggle split pane\n        </ion-button>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 2 -->\n    <mat-tab [label]=\"secondTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{secondTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A second tab<br/>\n\n        <ng-container *ngIf=\"secondTabTitle=== 'Others'\">\n          Navigate to : <a [routerLink]=\"childPath\" >\n            {{ childPath }}\n          </a>\n        </ng-container>\n      </div>\n\n    </mat-tab>\n\n    <!-- TAB: 3 -->\n    <mat-tab *ngIf=\"thirdTabTitle\"\n             [label]=\"thirdTabTitle\" class=\"ion-padding\">\n      <ng-template mat-tab-label>\n        <ion-label>{{thirdTabTitle}}</ion-label>\n      </ng-template>\n\n      <div class=\"ion-padding\">\n        A third tab\n      </div>\n\n    </mat-tab>\n  </mat-tab-group>\n</ion-content>\n", styles: [".menu-item{padding-left:0 px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }, { type: i2.NavController }, { type: i2.AlertController }, { type: i1$1.TranslateService }, { type: MenuService }]; } });
 
-const routes$3 = [
+const routes$4 = [
     {
         path: 'menu',
         data: {
@@ -36228,7 +36247,7 @@ MenuTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         MenuTestingPage,
         OtherMenuTestingPage] });
 MenuTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuTestingModule, imports: [CommonModule,
-        RouterModule.forChild(routes$3),
+        RouterModule.forChild(routes$4),
         AppMenuModule,
         SharedModule, RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuTestingModule, decorators: [{
@@ -36236,7 +36255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{
                     imports: [
                         CommonModule,
-                        RouterModule.forChild(routes$3),
+                        RouterModule.forChild(routes$4),
                         AppMenuModule,
                         SharedModule
                     ],
@@ -36273,7 +36292,7 @@ SharedTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         UploadFileTestingModule,
         ImageGalleryTestingModule,
         AudioTestingModule,
-        StorageExplorerModule,
+        StorageExplorerTestingModule,
         MenuTestingModule], exports: [
         // Testing sub-modules
         MaterialTestingModule,
@@ -36281,7 +36300,7 @@ SharedTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         UploadFileTestingModule,
         ImageGalleryTestingModule,
         AudioTestingModule,
-        StorageExplorerModule,
+        StorageExplorerTestingModule,
         MenuTestingModule] });
 SharedTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedTestingModule, imports: [CommonModule,
         IonicModule,
@@ -36292,7 +36311,7 @@ SharedTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         UploadFileTestingModule,
         ImageGalleryTestingModule,
         AudioTestingModule,
-        StorageExplorerModule,
+        StorageExplorerTestingModule,
         MenuTestingModule, 
         // Testing sub-modules
         MaterialTestingModule,
@@ -36300,7 +36319,7 @@ SharedTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         UploadFileTestingModule,
         ImageGalleryTestingModule,
         AudioTestingModule,
-        StorageExplorerModule,
+        StorageExplorerTestingModule,
         MenuTestingModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SharedTestingModule, decorators: [{
             type: NgModule,
@@ -36315,7 +36334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         UploadFileTestingModule,
                         ImageGalleryTestingModule,
                         AudioTestingModule,
-                        StorageExplorerModule,
+                        StorageExplorerTestingModule,
                         MenuTestingModule,
                     ],
                     exports: [
@@ -36325,12 +36344,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         UploadFileTestingModule,
                         ImageGalleryTestingModule,
                         AudioTestingModule,
-                        StorageExplorerModule,
+                        StorageExplorerTestingModule,
                         MenuTestingModule,
                     ]
                 }]
         }] });
 
+const routes$3 = [
+    {
+        path: '',
+        pathMatch: 'full',
+        component: StorageExplorerComponent
+    }
+];
+class StorageExplorerTestingRoutingModule {
+}
+StorageExplorerTestingRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StorageExplorerTestingRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingRoutingModule, imports: [CommonModule, i1$5.RouterModule, StorageExplorerModule], exports: [RouterModule] });
+StorageExplorerTestingRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingRoutingModule, imports: [CommonModule,
+        RouterModule.forChild(routes$3),
+        StorageExplorerModule, RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StorageExplorerTestingRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule.forChild(routes$3),
+                        StorageExplorerModule
+                    ],
+                    exports: [
+                        RouterModule
+                    ]
+                }]
+        }] });
+
+var storageExplorer_testingRouting_module = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    StorageExplorerTestingRoutingModule: StorageExplorerTestingRoutingModule
+});
+
 // @dynamic
 let ReferentialFilter = class ReferentialFilter extends EntityFilter {
     fromObject(source, opts) {
@@ -37569,5 +37621,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, 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_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, AboutModal, AbstractDateFormat, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, 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_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageService, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, 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_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, AboutModal, AbstractDateFormat, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, 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_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map