@sumaris-net/ngx-components 2.4.117 → 2.4.118

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

@@ -57,7 +57,7 @@ import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUT
 import { __awaiter, __decorate, __param } from 'tslib';
 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';
@@ -11788,10 +11788,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,
@@ -16579,6 +16579,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 + ' ') || '') +
@@ -17975,17 +17999,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');
@@ -18463,12 +18480,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) {
@@ -23016,10 +23028,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}'`);
@@ -23027,7 +23039,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}'`);
@@ -23070,26 +23082,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();
@@ -23100,9 +23109,6 @@ class MenuService extends StartableService {
     get enabled() {
         return this._$enabled.asObservable();
     }
-    toggle() {
-        this._$toggled.next();
-    }
     enable(value) {
         this._$enabled.next(value);
     }
@@ -23128,98 +23134,98 @@ class MenuService extends StartableService {
     addSubMenuItems(newItems, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.ready();
-            newItems.forEach(i => this.addSubMenuItem(i), opts);
+            newItems.forEach(i => this.addSubMenuItem(i, opts));
         });
     }
     ngOnStart() {
         return __awaiter(this, void 0, void 0, function* () {
             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 === null || account === void 0 ? void 0 : 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((account) => __awaiter(this, void 0, void 0, function* () {
-                if (account === null || account === void 0 ? void 0 : 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 === null || a1 === void 0 ? void 0 : a1.updateDate, a2 === null || a2 === void 0 ? void 0 : a2.updateDate)), map(account => isNotNil(account === null || account === void 0 ? void 0 : 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() {
-        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);
-        if (isNotNilOrBlank(configValue)) {
-            try {
-                const configItems = JSON.parse(configValue);
-                this._data = (configItems || []).reduce((res, item) => {
-                    if (item.after) {
-                        const index = res.findIndex(i => i.title === item.after);
-                        if (index !== -1) {
-                            return res.slice(0, index + 1)
-                                .concat(item)
-                                .concat(res.slice(index + 1));
+    loadMenuItems(config, account) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._debug)
+                console.debug(`${this._logPrefix} Add config menu items...`);
+            // Save previous children of root items
+            const rootChildren = (((_a = this._data) === null || _a === void 0 ? void 0 : _a.value) || [])
+                .reduce((res, rootItem) => { var _a; return res.concat(((_a = rootItem === null || rootItem === void 0 ? void 0 : rootItem.$children) === null || _a === void 0 ? void 0 : _a.value) || []); }, []);
+            // Reset base root items (clean items added by config)
+            let items = this._staticItems.slice();
+            // Concat config's items
+            const configValue = config === null || config === void 0 ? void 0 : config.getProperty(CORE_CONFIG_OPTIONS.MENU_ITEMS);
+            if (isNotNilOrBlank(configValue)) {
+                try {
+                    const configItems = JSON.parse(configValue);
+                    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) {
+                                return res.slice(0, index + 1)
+                                    .concat(item)
+                                    .concat(res.slice(index + 1));
+                            }
                         }
-                    }
-                    if (item.before) {
-                        const index = res.findIndex(i => i.title === item.before);
-                        if (index !== -1) {
-                            return res.slice(0, index)
-                                .concat(item)
-                                .concat(res.slice(index));
+                        else if (item.before) {
+                            const index = res.findIndex(i => i.title === item.before);
+                            if (index !== -1) {
+                                return res.slice(0, index)
+                                    .concat(item)
+                                    .concat(res.slice(index));
+                            }
                         }
-                    }
-                    return res.concat(item);
-                }, this._data);
-            }
-            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
-        const opts = { debug: this._debug };
-        const filteredItems = this._data
-            .filter(item => MenuItems.checkIfVisible(item, this.accountService, this._config, opts))
-            .map(item => {
-            // Replace title using properties
-            if (isNotNilOrBlank(item.titleProperty) && this._config) {
-                const title = this._config.properties[item.titleProperty];
-                if (title)
-                    return Object.assign(Object.assign({}, item), { title }); // Create a copy, to keep the original item.title
+                        return res.concat(item);
+                    }, items);
+                }
+                catch (err) {
+                    console.error(`${this._logPrefix} Invalid value for option '${CORE_CONFIG_OPTIONS.MENU_ITEMS.key}'. Expected an array of menu item`, err);
+                }
             }
-            return item;
+            // Filter item using account rights
+            const opts = { debug: this._debug };
+            items = items
+                .filter(item => MenuItems.checkIfVisible(item, account, config, opts))
+                .map(item => {
+                // Replace title using properties
+                if (isNotNilOrBlank(item.titleProperty) && config) {
+                    const title = config.properties[item.titleProperty];
+                    if (title)
+                        return Object.assign(Object.assign({}, item), { title }); // Create a copy, to keep the original item.title
+                }
+                return item;
+            });
+            // Re-attach sub menu items
+            yield this.addSubMenuItems(rootChildren, { skipIfExists: false, availableParents: items });
+            this._data.next(items);
         });
-        this.$items.next(filteredItems);
     }
     addSubMenuItem(newItem, opts) {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             opts = Object.assign({ skipIfExists: false }, opts);
             // Make sure path (and pathParams) are filled in the same way
@@ -23231,17 +23237,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 === null || opts === void 0 ? void 0 : 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 = (_a = this.router.routerState.root.parent) === null || _a === void 0 ? void 0 : _a.data;
-                console.log('TODO check parent data', data);
-                /*await this.router.navigateByUrl(newItem.parentPath, {
-                  skipLocationChange: true
-                });*/
             }
             else {
                 this.addMenuToParent(parent, newItem);
@@ -23265,16 +23263,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 === null || childItem === void 0 ? void 0 : childItem.path))
             return undefined;
-        parentItems = parentItems || this.$items.value;
-        return parentItems.reduce((res, item) => {
+        availableParents = availableParents || this._data.value;
+        return availableParents.reduce((res, item) => {
             var _a, _b;
             if (!(item === null || item === void 0 ? void 0 : item.path))
                 return res;
@@ -23308,7 +23306,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)
@@ -23330,9 +23328,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' });
@@ -23391,24 +23386,19 @@ class MenuComponent {
             this.splitPane.when = yield firstNotNilPromise(this.menuService.splitPaneWhen);
             // Wait platform started
             yield 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)));
         });
     }
     onLogin(account) {
@@ -23418,10 +23408,7 @@ class MenuComponent {
             this.accountName = account.displayName;
             this.accountEmail = account.email;
             this.isLogin = true;
-            setTimeout(() => {
-                this.loading = false;
-                this.detectChanges();
-            }, 500);
+            this.cd.markForCheck();
         });
     }
     onLogout(skipRedirect) {
@@ -23582,10 +23569,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,
@@ -24812,7 +24799,7 @@ class HomePage {
         //console.debug('[home] Logged account: ', account);
         this.isLogin = true;
         this.accountName = accountToString(account);
-        this.refreshButtons();
+        this.refreshButtons(account);
         this.markForCheck();
     }
     onLogout() {
@@ -24822,13 +24809,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]'
@@ -36967,31 +36955,49 @@ class MenuTestingPage extends AppTabEditor {
             this.thirdTabTitle = null;
         }
     }
+    enableMenu(value) {
+        this.menuService.enable(value);
+    }
+    toggleSplitPaneWhen() {
+        this.menuService.toggleSplitPaneWhen();
+    }
     initSubMenu() {
-        const pathParam = MenuItems.parsePathWithQuery(this.router.url);
-        this.title = 'Menu';
-        this.secondTabTitle = 'Others';
-        this.parentPath = '/testing';
-        this.childPath = '/testing/shared/menu/other';
-        const path = '/testing/shared/menu';
-        console.debug(`${this.logPrefix} Setup with`, { path, parentPath: this.parentPath });
-        this.menuService.addSubMenuItems([
-            {
-                title: 'Menu',
-                path,
-                parentPath: this.parentPath,
-                action: null,
-                profile: 'GUEST',
-            },
-            {
-                title: this.secondTabTitle,
-                path,
-                pathParams: { tab: '1' },
-                parentPath: path,
-                action: null,
-                profile: 'GUEST',
-            }
-        ]);
+        return __awaiter(this, void 0, void 0, function* () {
+            const pathParam = MenuItems.parsePathWithQuery(this.router.url);
+            this.title = 'Menu';
+            this.secondTabTitle = 'Others';
+            this.parentPath = '/testing';
+            this.childPath = '/testing/shared/menu/other';
+            const path = '/testing/shared/menu';
+            console.debug(`${this.logPrefix} Setup with`, { path, parentPath: this.parentPath });
+            yield this.menuService.addSubMenuItems([
+                {
+                    title: 'Menu',
+                    path,
+                    parentPath: this.parentPath,
+                    action: null,
+                    profile: 'GUEST',
+                },
+                {
+                    title: this.secondTabTitle,
+                    path,
+                    pathParams: { tab: '1' },
+                    parentPath: path,
+                    action: null,
+                    profile: 'GUEST',
+                }
+            ]);
+            // Outside the route: shoul always be hidden
+            yield this.menuService.addSubMenuItems([
+                {
+                    title: 'HIDDEN item',
+                    path: '"/referential/programs/40/strategies/bidon"',
+                    parentPath: '/referential/programs/40/strategies',
+                    action: null,
+                    profile: 'GUEST',
+                }
+            ]);
+        });
     }
     getFirstInvalidTabIndex() {
         return 0;
@@ -36999,10 +37005,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]
@@ -37015,38 +37021,40 @@ class OtherMenuTestingPage extends MenuTestingPage {
         this.logPrefix = '[menu-testing-other] ';
     }
     initSubMenu() {
-        const pathParam = MenuItems.parsePathWithQuery(this.router.url);
-        this.title = 'Other';
-        this.secondTabTitle = 'Second';
-        this.parentPath = '/testing/shared/menu?tab=1';
-        this.childPath = '';
-        const path = '/testing/shared/menu/other';
-        const parentPath = '/testing/shared/menu?tab=1';
-        console.debug(`${this.logPrefix} Setup with`, { path, parentPath });
-        this.menuService.addSubMenuItems([
-            {
-                title: 'Other',
-                path,
-                parentPath,
-                action: null,
-                profile: 'GUEST',
-            },
-            {
-                title: this.secondTabTitle,
-                path,
-                pathParams: { tab: '1' },
-                parentPath: path,
-                action: null,
-                profile: 'GUEST',
-            }
-        ]);
+        return __awaiter(this, void 0, void 0, function* () {
+            const pathParam = MenuItems.parsePathWithQuery(this.router.url);
+            this.title = 'Other';
+            this.secondTabTitle = 'Second';
+            this.parentPath = '/testing/shared/menu?tab=1';
+            this.childPath = '';
+            const path = '/testing/shared/menu/other';
+            const parentPath = '/testing/shared/menu?tab=1';
+            console.debug(`${this.logPrefix} Setup with`, { path, parentPath });
+            yield this.menuService.addSubMenuItems([
+                {
+                    title: 'Other',
+                    path,
+                    parentPath,
+                    action: null,
+                    profile: 'GUEST',
+                },
+                {
+                    title: this.secondTabTitle,
+                    path,
+                    pathParams: { tab: '1' },
+                    parentPath: path,
+                    action: null,
+                    profile: 'GUEST',
+                }
+            ]);
+        });
     }
 }
 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$4 = [
@@ -38488,5 +38496,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, 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 };
+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