@sumaris-net/ngx-components 2.4.142 → 2.4.144

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

@@ -11594,10 +11594,12 @@ class TreeItemEntityUtils {
         if (isEmptyArray(node.children))
             return []; // Skip
         // Delete children
-        const deletedBatches = node.children.filter(filterFn);
-        node.children = node.children.filter((c) => !deletedBatches.includes(c));
+        const deletedChildren = node.children.filter(filterFn);
+        node.children = node.children.filter((c) => !deletedChildren.includes(c));
+        // TODO: add an options to clean the parent
+        //deletedChildren.forEach(child => child.parent = null);
         // Recursive call, in still existing children
-        return node.children.reduce((res, c) => res.concat(...this.deleteRecursively(c, filterFn)), deletedBatches);
+        return node.children.reduce((res, c) => res.concat(...this.deleteRecursively(c, filterFn)), deletedChildren);
     }
     /**
      * Visit each node, from root to leaf
@@ -11970,10 +11972,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,
@@ -23163,84 +23165,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-const APP_ABOUT_DEVELOPERS = new InjectionToken('aboutDevelopers');
-const APP_ABOUT_PARTNERS = new InjectionToken('aboutPartners');
-class AboutModal {
-    constructor(translate, modalController, configService, environment, developers, partners) {
-        this.translate = translate;
-        this.modalController = modalController;
-        this.configService = configService;
-        this.environment = environment;
-        this.developers = developers;
-        this.partners = partners;
-        this._subscription = new Subscription();
-        this.name = translate.instant('APP_NAME');
-        if (this.name === 'APP_NAME') {
-            // Not translated: use name from the environnement
-            this.name = environment && environment.name && capitalizeFirstLetter(environment.name) || undefined;
-        }
-        this.version = environment && environment.version;
-        this.sourceUrl = environment && environment.sourceUrl;
-        this.reportIssueUrl = environment && environment.reportIssueUrl;
-        this.forumUrl = environment && environment.forumUrl;
-        this.helpUrl = environment && environment.helpUrl;
-        this.config$ = configService.config;
-        this._subscription.add(this.config$.subscribe(config => this.setConfig(config)));
-    }
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
-    }
-    close() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.modalController.dismiss();
-        });
-    }
-    /* -- protected functions -- */
-    setConfig(config) {
-        this.forumUrl = (config === null || config === void 0 ? void 0 : config.getProperty(CORE_CONFIG_OPTIONS.FORUM_URL)) || this.environment.forumUrl;
-        this.helpUrl = (config === null || config === void 0 ? void 0 : config.getProperty(CORE_CONFIG_OPTIONS.HELP_URL)) || this.environment.helpUrl;
-    }
-}
-AboutModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AboutModal, deps: [{ token: i1$1.TranslateService }, { token: i2.ModalController }, { token: ConfigService }, { token: ENVIRONMENT, optional: true }, { token: APP_ABOUT_DEVELOPERS, optional: true }, { token: APP_ABOUT_PARTNERS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AboutModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AboutModal, selector: "app-about-modal", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n\n    <ion-title>\n      {{'ABOUT.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{'COMMON.BTN_CLOSE'|translate}}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-list lines=\"none\">\n\n    <!-- Peer info -->\n    <ion-item *ngIf=\"config$ | async; let config\">\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\" >\n        <h2>\n          <b>{{config.label}}</b> - <span [innerHTML]=\"config.name\"></span>\n        </h2>\n        <p *ngIf=\"config.description\">\n          <markdown [data]=\"config.description\"\n                    emoji>\n          </markdown>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          <small *ngIf=\"name\">{{'ABOUT.POWERED_BY'|translate}}</small> {{name}}\n          <span *ngIf=\"version\" [innerHTML]=\"'ABOUT.VERSION'| translate: {version: version}\"></span>\n        </h2>\n        <p [innerHTML]=\"'ABOUT.LICENSE'| translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    <ion-item *ngIf=\"forumUrl || helpUrl\">\n      <mat-icon slot=\"start\">help_outline</mat-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.HELP'|translate}}\n        </p>\n        <p>\n          <ion-button fill=\"solid\" color=\"accent\" href=\"{{helpUrl}}\" target=\"help\" size=\"default\">\n            <mat-icon slot=\"start\">description</mat-icon>\n            <ion-text translate>ABOUT.USER_MANUAL</ion-text>\n          </ion-button>\n          <ion-button fill=\"solid\" color=\"secondary\" href=\"{{forumUrl}}\" target=\"forum\" size=\"default\">\n            <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n            <ion-text translate>ABOUT.FORUM</ion-text>\n          </ion-button>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Report issue -->\n    <ion-item *ngIf=\"reportIssueUrl\">\n      <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.REPORT_ISSUE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{reportIssueUrl}}\" target=\"_system\" translate>ABOUT.BTN_REPORT_ISSUE</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n\n    <!-- Source code -->\n    <ion-item *ngIf=\"sourceUrl\">\n      <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.SOURCE_CODE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{sourceUrl}}\" target=\"_system\">{{sourceUrl}}</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Developers -->\n    <ion-item *ngIf=\"developers | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.DEVELOPED_BY'|translate}}\n        </p>\n        <ion-list lines=\"none\">\n          <ion-item *ngFor=\"let item of developers\"\n                    class=\"ion-no-padding\">\n            <img slot=\"end\" src=\"{{item.logo}}\">\n            <ion-label>\n              <p>\n                <a color=\"primary\" href=\"{{item.siteUrl}}\" target=\"_system\">{{item.name||item.label}}</a>\n              </p>\n            </ion-label>\n          </ion-item>\n        </ion-list>\n      </ion-label>\n    </ion-item>\n\n    <!-- Partners -->\n    <ion-item class=\"item-partners\" *ngIf=\"partners | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n      <ion-text>\n        <p>{{'ABOUT.PARTNERS'|translate}}</p>\n        <p>\n          <a *ngFor=\"let item of partners\" href=\"{{item.siteUrl}}\" class=\"partners\" target=\"_system\">\n            <img src=\"{{item.logo}}\">\n          </a>\n        </p>\n      </ion-text>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{'COMMON.BTN_CLOSE'|translate}}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px}\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: "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.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6$4.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AboutModal, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-about-modal', template: "<ion-header>\n  <ion-toolbar color=\"light\">\n\n    <ion-title>\n      {{'ABOUT.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{'COMMON.BTN_CLOSE'|translate}}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-list lines=\"none\">\n\n    <!-- Peer info -->\n    <ion-item *ngIf=\"config$ | async; let config\">\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\" >\n        <h2>\n          <b>{{config.label}}</b> - <span [innerHTML]=\"config.name\"></span>\n        </h2>\n        <p *ngIf=\"config.description\">\n          <markdown [data]=\"config.description\"\n                    emoji>\n          </markdown>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          <small *ngIf=\"name\">{{'ABOUT.POWERED_BY'|translate}}</small> {{name}}\n          <span *ngIf=\"version\" [innerHTML]=\"'ABOUT.VERSION'| translate: {version: version}\"></span>\n        </h2>\n        <p [innerHTML]=\"'ABOUT.LICENSE'| translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    <ion-item *ngIf=\"forumUrl || helpUrl\">\n      <mat-icon slot=\"start\">help_outline</mat-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.HELP'|translate}}\n        </p>\n        <p>\n          <ion-button fill=\"solid\" color=\"accent\" href=\"{{helpUrl}}\" target=\"help\" size=\"default\">\n            <mat-icon slot=\"start\">description</mat-icon>\n            <ion-text translate>ABOUT.USER_MANUAL</ion-text>\n          </ion-button>\n          <ion-button fill=\"solid\" color=\"secondary\" href=\"{{forumUrl}}\" target=\"forum\" size=\"default\">\n            <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n            <ion-text translate>ABOUT.FORUM</ion-text>\n          </ion-button>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Report issue -->\n    <ion-item *ngIf=\"reportIssueUrl\">\n      <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.REPORT_ISSUE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{reportIssueUrl}}\" target=\"_system\" translate>ABOUT.BTN_REPORT_ISSUE</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n\n    <!-- Source code -->\n    <ion-item *ngIf=\"sourceUrl\">\n      <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.SOURCE_CODE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{sourceUrl}}\" target=\"_system\">{{sourceUrl}}</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Developers -->\n    <ion-item *ngIf=\"developers | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.DEVELOPED_BY'|translate}}\n        </p>\n        <ion-list lines=\"none\">\n          <ion-item *ngFor=\"let item of developers\"\n                    class=\"ion-no-padding\">\n            <img slot=\"end\" src=\"{{item.logo}}\">\n            <ion-label>\n              <p>\n                <a color=\"primary\" href=\"{{item.siteUrl}}\" target=\"_system\">{{item.name||item.label}}</a>\n              </p>\n            </ion-label>\n          </ion-item>\n        </ion-list>\n      </ion-label>\n    </ion-item>\n\n    <!-- Partners -->\n    <ion-item class=\"item-partners\" *ngIf=\"partners | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n      <ion-text>\n        <p>{{'ABOUT.PARTNERS'|translate}}</p>\n        <p>\n          <a *ngFor=\"let item of partners\" href=\"{{item.siteUrl}}\" class=\"partners\" target=\"_system\">\n            <img src=\"{{item.logo}}\">\n          </a>\n        </p>\n      </ion-text>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{'COMMON.BTN_CLOSE'|translate}}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: i1$1.TranslateService }, { type: i2.ModalController }, { type: ConfigService }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [ENVIRONMENT]
-                    }] }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [APP_ABOUT_DEVELOPERS]
-                    }] }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [APP_ABOUT_PARTNERS]
-                    }] }];
-    } });
-
 var _a;
-class MenuItem extends Entity {
+var MenuItem_1;
+// @dynamic
+let MenuItem = MenuItem_1 = class MenuItem extends Entity {
     constructor() {
         super(...arguments);
         this.$children = new BehaviorSubject([]);
         this.$title = new BehaviorSubject(undefined);
     }
-    static fromObject(source, opts) {
-        if (!source)
-            return null;
-        if (source instanceof MenuItem)
-            return source;
-        const target = new MenuItem();
-        target.fromObject(source, opts);
-        return target;
-    }
     fromObject(source, opts) {
         this.id = source.id;
         this.title = source.title;
@@ -23267,12 +23200,13 @@ class MenuItem extends Entity {
         this.cssClass = source.cssClass;
         this.ifProperty = source.ifProperty;
         this.pinned = toBoolean(source.pinned, false);
+        this.static = isNotNil(source.static) ? source.static : undefined; // If undefined, will be set by service
         // Icon
         this.icon = source.icon;
         this.matIcon = source.matIcon;
         this.matSvgIcon = source.matSvgIcon;
         if (!opts || opts.withChildren === false) {
-            this.children = (source.children || []).map((json) => MenuItem.fromObject(json, opts)) || [];
+            this.children = (source.children || []).map((json) => MenuItem_1.fromObject(json, opts)) || [];
         }
     }
     asObject(opts) {
@@ -23314,6 +23248,12 @@ class MenuItem extends Entity {
     get detached() {
         return !this.parentPath || !this.parent;
     }
+    get visible() {
+        return this.static || !this.detached;
+    }
+    get expanded() {
+        return this.action !== 'expand' || this.matIcon === 'expand_less';
+    }
     get ancestor() {
         var _b;
         if (!this.parent)
@@ -23322,12 +23262,21 @@ class MenuItem extends Entity {
             return this; // first sub menu = ancestor
         return (_b = this.parent) === null || _b === void 0 ? void 0 : _b.ancestor; // loop
     }
+    get divider() {
+        return !this.action && !this.path;
+    }
+    get pinnable() {
+        return !this.static && (typeof this.action !== 'function');
+    }
     isPinned() {
         if (this.pinned)
             return true;
         return (this.children || []).some(child => child.isPinned());
     }
-}
+};
+MenuItem = MenuItem_1 = __decorate([
+    EntityClass({ typename: 'MenuItemVO' })
+], MenuItem);
 class MenuItems {
     /**
      * Compare, without checking the children
@@ -23407,13 +23356,19 @@ class MenuItems {
         return true;
     }
     static checkIfSubMenuVisible(item, currentPathParam) {
+        var _b;
         if (!item.parentPath)
             return false; // Should have a parent
+        if (item.static)
+            return true; // Always keep static items
         if (item.isPinned())
             return true; // Always keep pinned items
         // Keep each menu items in the scope of the current url path
         if (currentPathParam === null || currentPathParam === void 0 ? void 0 : currentPathParam.path.startsWith(item.path))
             return true;
+        // Keep if parent is an expanded item
+        if (((_b = item.parent) === null || _b === void 0 ? void 0 : _b.action) === 'expand' && item.parent.expanded)
+            return true;
         // Not visible
         return false;
     }
@@ -23447,19 +23402,89 @@ class MenuItems {
 }
 _a = MenuItems;
 MenuItems.sortByTabOrId = _a.sortByParamOrIdComparator('tab');
+/**
+ * Options to configure specific behavior on projects
+ */
 class MenuOptions {
 }
 
+const APP_ABOUT_DEVELOPERS = new InjectionToken('aboutDevelopers');
+const APP_ABOUT_PARTNERS = new InjectionToken('aboutPartners');
+class AboutModal {
+    constructor(translate, modalController, configService, environment, developers, partners) {
+        this.translate = translate;
+        this.modalController = modalController;
+        this.configService = configService;
+        this.environment = environment;
+        this.developers = developers;
+        this.partners = partners;
+        this._subscription = new Subscription();
+        this.name = translate.instant('APP_NAME');
+        if (this.name === 'APP_NAME') {
+            // Not translated: use name from the environnement
+            this.name = environment && environment.name && capitalizeFirstLetter(environment.name) || undefined;
+        }
+        this.version = environment && environment.version;
+        this.sourceUrl = environment && environment.sourceUrl;
+        this.reportIssueUrl = environment && environment.reportIssueUrl;
+        this.forumUrl = environment && environment.forumUrl;
+        this.helpUrl = environment && environment.helpUrl;
+        this.config$ = configService.config;
+        this._subscription.add(this.config$.subscribe(config => this.setConfig(config)));
+    }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    close() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.modalController.dismiss();
+        });
+    }
+    /* -- protected functions -- */
+    setConfig(config) {
+        this.forumUrl = (config === null || config === void 0 ? void 0 : config.getProperty(CORE_CONFIG_OPTIONS.FORUM_URL)) || this.environment.forumUrl;
+        this.helpUrl = (config === null || config === void 0 ? void 0 : config.getProperty(CORE_CONFIG_OPTIONS.HELP_URL)) || this.environment.helpUrl;
+    }
+}
+AboutModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AboutModal, deps: [{ token: i1$1.TranslateService }, { token: i2.ModalController }, { token: ConfigService }, { token: ENVIRONMENT, optional: true }, { token: APP_ABOUT_DEVELOPERS, optional: true }, { token: APP_ABOUT_PARTNERS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AboutModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AboutModal, selector: "app-about-modal", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n\n    <ion-title>\n      {{'ABOUT.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{'COMMON.BTN_CLOSE'|translate}}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-list lines=\"none\">\n\n    <!-- Peer info -->\n    <ion-item *ngIf=\"config$ | async; let config\">\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\" >\n        <h2>\n          <b>{{config.label}}</b> - <span [innerHTML]=\"config.name\"></span>\n        </h2>\n        <p *ngIf=\"config.description\">\n          <markdown [data]=\"config.description\"\n                    emoji>\n          </markdown>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          <small *ngIf=\"name\">{{'ABOUT.POWERED_BY'|translate}}</small> {{name}}\n          <span *ngIf=\"version\" [innerHTML]=\"'ABOUT.VERSION'| translate: {version: version}\"></span>\n        </h2>\n        <p [innerHTML]=\"'ABOUT.LICENSE'| translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    <ion-item *ngIf=\"forumUrl || helpUrl\">\n      <mat-icon slot=\"start\">help_outline</mat-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.HELP'|translate}}\n        </p>\n        <p>\n          <ion-button fill=\"solid\" color=\"accent\" href=\"{{helpUrl}}\" target=\"help\" size=\"default\">\n            <mat-icon slot=\"start\">description</mat-icon>\n            <ion-text translate>ABOUT.USER_MANUAL</ion-text>\n          </ion-button>\n          <ion-button fill=\"solid\" color=\"secondary\" href=\"{{forumUrl}}\" target=\"forum\" size=\"default\">\n            <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n            <ion-text translate>ABOUT.FORUM</ion-text>\n          </ion-button>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Report issue -->\n    <ion-item *ngIf=\"reportIssueUrl\">\n      <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.REPORT_ISSUE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{reportIssueUrl}}\" target=\"_system\" translate>ABOUT.BTN_REPORT_ISSUE</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n\n    <!-- Source code -->\n    <ion-item *ngIf=\"sourceUrl\">\n      <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.SOURCE_CODE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{sourceUrl}}\" target=\"_system\">{{sourceUrl}}</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Developers -->\n    <ion-item *ngIf=\"developers | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.DEVELOPED_BY'|translate}}\n        </p>\n        <ion-list lines=\"none\">\n          <ion-item *ngFor=\"let item of developers\"\n                    class=\"ion-no-padding\">\n            <img slot=\"end\" src=\"{{item.logo}}\">\n            <ion-label>\n              <p>\n                <a color=\"primary\" href=\"{{item.siteUrl}}\" target=\"_system\">{{item.name||item.label}}</a>\n              </p>\n            </ion-label>\n          </ion-item>\n        </ion-list>\n      </ion-label>\n    </ion-item>\n\n    <!-- Partners -->\n    <ion-item class=\"item-partners\" *ngIf=\"partners | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n      <ion-text>\n        <p>{{'ABOUT.PARTNERS'|translate}}</p>\n        <p>\n          <a *ngFor=\"let item of partners\" href=\"{{item.siteUrl}}\" class=\"partners\" target=\"_system\">\n            <img src=\"{{item.logo}}\">\n          </a>\n        </p>\n      </ion-text>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{'COMMON.BTN_CLOSE'|translate}}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px}\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: "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.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6$4.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AboutModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-about-modal', template: "<ion-header>\n  <ion-toolbar color=\"light\">\n\n    <ion-title>\n      {{'ABOUT.TITLE'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\" visible-xs visible-sm visible-mobile>\n        {{'COMMON.BTN_CLOSE'|translate}}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-list lines=\"none\">\n\n    <!-- Peer info -->\n    <ion-item *ngIf=\"config$ | async; let config\">\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\" >\n        <h2>\n          <b>{{config.label}}</b> - <span [innerHTML]=\"config.name\"></span>\n        </h2>\n        <p *ngIf=\"config.description\">\n          <markdown [data]=\"config.description\"\n                    emoji>\n          </markdown>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Version info -->\n    <ion-item>\n      <span slot=\"start\">&nbsp;</span>\n      <ion-label class=\"ion-text-wrap\">\n        <h2>\n          <small *ngIf=\"name\">{{'ABOUT.POWERED_BY'|translate}}</small> {{name}}\n          <span *ngIf=\"version\" [innerHTML]=\"'ABOUT.VERSION'| translate: {version: version}\"></span>\n        </h2>\n        <p [innerHTML]=\"'ABOUT.LICENSE'| translate\"></p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Help -->\n    <ion-item *ngIf=\"forumUrl || helpUrl\">\n      <mat-icon slot=\"start\">help_outline</mat-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.HELP'|translate}}\n        </p>\n        <p>\n          <ion-button fill=\"solid\" color=\"accent\" href=\"{{helpUrl}}\" target=\"help\" size=\"default\">\n            <mat-icon slot=\"start\">description</mat-icon>\n            <ion-text translate>ABOUT.USER_MANUAL</ion-text>\n          </ion-button>\n          <ion-button fill=\"solid\" color=\"secondary\" href=\"{{forumUrl}}\" target=\"forum\" size=\"default\">\n            <ion-icon slot=\"start\" name=\"chatbubbles\"></ion-icon>\n            <ion-text translate>ABOUT.FORUM</ion-text>\n          </ion-button>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Report issue -->\n    <ion-item *ngIf=\"reportIssueUrl\">\n      <ion-icon slot=\"start\" name=\"bug\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.REPORT_ISSUE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{reportIssueUrl}}\" target=\"_system\" translate>ABOUT.BTN_REPORT_ISSUE</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n\n    <!-- Source code -->\n    <ion-item *ngIf=\"sourceUrl\">\n      <ion-icon slot=\"start\" name=\"code\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.SOURCE_CODE'|translate}}\n        </p>\n        <p>\n          <a color=\"primary\" href=\"{{sourceUrl}}\" target=\"_system\">{{sourceUrl}}</a>\n        </p>\n      </ion-label>\n    </ion-item>\n\n    <!-- Developers -->\n    <ion-item *ngIf=\"developers | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"people\" color=\"dark\"></ion-icon>\n      <ion-label>\n        <p>\n          {{'ABOUT.DEVELOPED_BY'|translate}}\n        </p>\n        <ion-list lines=\"none\">\n          <ion-item *ngFor=\"let item of developers\"\n                    class=\"ion-no-padding\">\n            <img slot=\"end\" src=\"{{item.logo}}\">\n            <ion-label>\n              <p>\n                <a color=\"primary\" href=\"{{item.siteUrl}}\" target=\"_system\">{{item.name||item.label}}</a>\n              </p>\n            </ion-label>\n          </ion-item>\n        </ion-list>\n      </ion-label>\n    </ion-item>\n\n    <!-- Partners -->\n    <ion-item class=\"item-partners\" *ngIf=\"partners | isNotEmptyArray\">\n      <ion-icon slot=\"start\" name=\"megaphone\" color=\"dark\"></ion-icon>\n      <ion-text>\n        <p>{{'ABOUT.PARTNERS'|translate}}</p>\n        <p>\n          <a *ngFor=\"let item of partners\" href=\"{{item.siteUrl}}\" class=\"partners\" target=\"_system\">\n            <img src=\"{{item.logo}}\">\n          </a>\n        </p>\n      </ion-text>\n    </ion-item>\n  </ion-list>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"close()\">{{'COMMON.BTN_CLOSE'|translate}}</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".item-partners ion-text{height:auto}.item-partners ion-text p:last-child{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between}.item-partners ion-text p:last-child a{padding:2px}.item-partners ion-text p:last-child a img{text-align:center;display:inline-block;max-height:40px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.TranslateService }, { type: i2.ModalController }, { type: ConfigService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [ENVIRONMENT]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [APP_ABOUT_DEVELOPERS]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [APP_ABOUT_PARTNERS]
+                    }] }];
+    } });
+
 const DEFAULT_MENU_SHOW_WHEN = 'lg';
 const APP_MENU_ITEMS = new InjectionToken('menuItems');
 const APP_MENU_OPTIONS = new InjectionToken('menuOptions');
 class MenuService extends StartableObservableService {
-    constructor(settings, configService, accountService, router, environment, options, staticItems) {
+    constructor(settings, configService, accountService, router, modalCtrl, alertController, navController, translate, environment, options, staticItems) {
+        var _a;
         super(settings);
         this.settings = settings;
         this.configService = configService;
         this.accountService = accountService;
         this.router = router;
+        this.modalCtrl = modalCtrl;
+        this.alertController = alertController;
+        this.navController = navController;
+        this.translate = translate;
         this.environment = environment;
         this.accountChanges = new BehaviorSubject(undefined);
         this.onPinned = new EventEmitter(true);
@@ -23470,11 +23495,22 @@ class MenuService extends StartableObservableService {
         this._$splitPaneWhen = new BehaviorSubject(DEFAULT_MENU_SHOW_WHEN);
         this._$enabled = new BehaviorSubject(true);
         this._$listenRoute = new BehaviorSubject(false);
-        this._options = Object.assign(Object.assign({ enableSubMenuIcon: true }, options), { enableSubMenus: (options === null || options === void 0 ? void 0 : options.enableSubMenus) !== false && !this.settings.mobile });
-        this._$subMenuEnabled = new BehaviorSubject(this._options.enableSubMenus);
+        this._options = Object.assign(Object.assign({}, options), { subMenu: Object.assign(Object.assign({ disableIcon: false, savePinned: true }, ((options === null || options === void 0 ? void 0 : options.subMenu) || {})), { 
+                // Force disable on mobile
+                enable: ((_a = options === null || options === void 0 ? void 0 : options.subMenu) === null || _a === void 0 ? void 0 : _a.enable) !== false && !this.settings.mobile }) });
+        this._$enableSubMenu = new BehaviorSubject(this._options.subMenu.enable);
         this._debug = !environment.production;
-        this._staticItems = (staticItems || []).map(source => this.fromObject(source, { computeId: true, fillParent: true }));
         this._detachedSubItems = [];
+        this._staticItems = (staticItems || []).map(source => {
+            const target = this.fromObject(Object.assign({ static: true }, source), { computeId: true, fillParent: true, fillDefaultFromParent: true });
+            const detachedItems = TreeItemEntityUtils.deleteRecursively(target, (item) => item.static !== true);
+            if (detachedItems === null || detachedItems === void 0 ? void 0 : detachedItems.length) {
+                console.debug(this._logPrefix + 'Detached init items', detachedItems);
+                detachedItems.forEach(item => this._detachToParent(item));
+                this._detachedSubItems.push(...detachedItems);
+            }
+            return target;
+        });
     }
     get opened() {
         return this._$opened.asObservable();
@@ -23486,10 +23522,7 @@ class MenuService extends StartableObservableService {
         return this._$enabled.asObservable();
     }
     get subMenuEnabled() {
-        return this._$subMenuEnabled.value;
-    }
-    get subMenuIconEnabled() {
-        return this._options.enableSubMenuIcon;
+        return this._$enableSubMenu.value;
     }
     get subItems() {
         return (this.data || []).reduce((res, rootElement) => res.concat(rootElement.children), []);
@@ -23501,7 +23534,7 @@ class MenuService extends StartableObservableService {
         this._$enabled.next(value);
     }
     enableSubMenu(value) {
-        this._$subMenuEnabled.next(value);
+        this._$enableSubMenu.next(value);
     }
     setSplitPaneShowWhen(value) {
         if (this._$splitPaneWhen.value !== value) {
@@ -23521,8 +23554,8 @@ class MenuService extends StartableObservableService {
         // Compute id if need
         if ((opts === null || opts === void 0 ? void 0 : opts.computeId) && isNil(target.id))
             target.id = this._computeNewId();
-        // Remove icon if not enabled
-        if (!this.subMenuIconEnabled) {
+        // Remove icon if disabled
+        if (this._options.subMenu.disableIcon) {
             Object.assign(target, { icon: undefined, matIcon: undefined, matSvgIcon: undefined });
         }
         // Recursive
@@ -23530,6 +23563,21 @@ class MenuService extends StartableObservableService {
         // Fill parent (once, when the full tree is ready)
         if (opts === null || opts === void 0 ? void 0 : opts.fillParent) {
             TreeItemEntityUtils.treeFillParent(target);
+            // Fill defaults from the parent (once filled)
+            if (opts === null || opts === void 0 ? void 0 : opts.fillDefaultFromParent) {
+                TreeItemEntityUtils.visit(target, (item) => {
+                    if (!item.parent)
+                        return; // Skip if no parent
+                    item.parentPath = item.parentPath || item.parent.path;
+                    item.parentPathParams = item.parentPathParams || item.parent.pathParams;
+                    item.static = toBoolean(item.static, item.parent.static);
+                    // Compute path, from parent path + action
+                    if (!item.path && !!item.action) {
+                        item.path = item.parent.path;
+                        item.pathParams = (typeof item.action === 'string') ? { action: item.action } : { actionId: item.id.toString(), actionTitle: item.title };
+                    }
+                });
+            }
         }
         return target;
     }
@@ -23588,6 +23636,9 @@ class MenuService extends StartableObservableService {
                 console.warn(this._logPrefix + `Sub menu {${source.path}} cannot be found - unable to toggle pinned!`);
             return;
         }
+        // Skip if static
+        if (item.static)
+            return;
         // Unpinned
         if (item.pinned) {
             item.pinned = false;
@@ -23604,6 +23655,101 @@ class MenuService extends StartableObservableService {
         }
         this.onPinned.emit(item);
     }
+    executeAction(event, item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const action = item === null || item === void 0 ? void 0 : item.action;
+            if (!action)
+                return; // skip
+            if (typeof action === 'string') {
+                switch (action) {
+                    case 'logout':
+                        yield this.logout();
+                        break;
+                    case 'about':
+                        yield this.openAboutModal();
+                        break;
+                    case 'expand':
+                        yield this.toggleExpandableItem(item);
+                        if (item.path) {
+                            yield this.navController.navigateRoot(item.path, {
+                                queryParams: item.pathParams
+                            });
+                        }
+                        break;
+                    default: {
+                        if (item.path) {
+                            yield this.navController.navigateRoot(item.path, {
+                                queryParams: item.pathParams
+                            });
+                        }
+                        else {
+                            throw new Error('Unknown action: ' + action);
+                        }
+                    }
+                }
+            }
+            else if (typeof action === 'function') {
+                action(event);
+            }
+        });
+    }
+    logout() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const translations = yield this.translate.instant([
+                'AUTH.LOGOUT.CONFIRM_TITLE',
+                'AUTH.LOGOUT.CONFIRM_MESSAGE',
+                'COMMON.BTN_CANCEL',
+                'AUTH.LOGOUT.BTN_CONFIRM',
+            ]);
+            const alert = yield this.alertController.create({
+                header: translations['AUTH.LOGOUT.CONFIRM_TITLE'],
+                message: translations['AUTH.LOGOUT.CONFIRM_MESSAGE'],
+                buttons: [
+                    {
+                        text: translations['COMMON.BTN_CANCEL'],
+                        role: 'cancel',
+                        cssClass: 'secondary',
+                    },
+                    {
+                        text: translations['AUTH.LOGOUT.BTN_CONFIRM'],
+                        cssClass: 'ion-color-primary',
+                        handler: () => {
+                            this.accountService.logout();
+                            // Back to home
+                            setTimeout(() => this.navController.navigateRoot('/'), 100);
+                        },
+                    },
+                ],
+            });
+            yield alert.present();
+        });
+    }
+    openAboutModal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modal = yield this.modalCtrl.create({ component: AboutModal });
+            return modal.present();
+        });
+    }
+    toggleExpandableItem(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!item.expanded) {
+                if (this._debug)
+                    console.debug(this._logPrefix + 'Expand item', item);
+                item.matIcon = 'expand_less';
+                // Try to attach some item
+                this._detachedSubItems
+                    .filter(childItem => !!this._findParent(childItem, [item]))
+                    .forEach(childItem => this._attachMenuToParent(item, childItem));
+            }
+            else {
+                item.matIcon = 'expand_more';
+                this._detachedSubItems = [
+                    ...this._detachedSubItems,
+                    ...this._detachSubMenuItems({ path: '/', params: {} }, item.children)
+                ];
+            }
+        });
+    }
     _markAsOpened() {
         this._$opened.next(true);
     }
@@ -23636,7 +23782,7 @@ class MenuService extends StartableObservableService {
                 // Emit account changes event
                 this.accountChanges.next(account);
             }));
-            this.registerSubscription(merge(this.accountChanges.pipe(map(() => MenuItems.parsePathWithQuery(this.router.routerState.snapshot.url))), this._$listenRoute.pipe(filter(listen => listen === true), mergeMap$1(_ => this.router.events), filter(event => event instanceof NavigationEnd), map((event) => MenuItems.parsePathWithQuery(event.url)))).pipe(throttleTime(250), filter(() => isNotEmptyArray(this.data)))
+            this.registerSubscription(merge(this.accountChanges.pipe(map(() => MenuItems.parsePathWithQuery(this.router.routerState.snapshot.url))), this._$listenRoute.pipe(filter(listen => listen === true && this.started), mergeMap$1(_ => this.router.events), filter(event => event instanceof NavigationEnd), map((event) => MenuItems.parsePathWithQuery(event.url)))).pipe(throttleTime(250))
                 .subscribe(pathParam => {
                 const detachedSubItems = this._detachSubMenuItems(pathParam);
                 if (detachedSubItems === null || detachedSubItems === void 0 ? void 0 : detachedSubItems.length) {
@@ -23665,7 +23811,7 @@ class MenuService extends StartableObservableService {
         if (this._debug)
             console.debug(`${this._logPrefix}Loading menu items...`);
         // Save previous children of root items
-        const detachedSubItems = (this.subItems || [])
+        const detachedSubItems = (this.subItems || []).concat(this._staticSubItems || [])
             .reduce((res, rootItem) => {
             const children = rootItem.children;
             if (isEmptyArray(children))
@@ -23746,18 +23892,19 @@ class MenuService extends StartableObservableService {
         return items;
     }
     _addSubMenuItems(sources, opts) {
-        return sources.map(source => this._addSubMenuItem(this.fromObject(source), opts));
+        return sources.map(source => this._addSubMenuItem(source, opts));
     }
     _addSubMenuItem(newItem, opts) {
         opts = Object.assign({ skipIfExists: true }, opts);
+        const pathParam = MenuItems.parsePathWithQuery(this.router.routerState.snapshot.url);
         // Find if item already exists
         const existingItem = this._findExistingItem(newItem, opts === null || opts === void 0 ? void 0 : opts.availableParents);
         if (existingItem) {
             // No changes
-            if (opts.skipIfExists && MenuItems.isSame(existingItem, newItem) && !existingItem.detached) {
+            if (opts.skipIfExists && MenuItems.isSame(existingItem, newItem) && existingItem.visible) {
                 // DEBUG
                 if (this._debug)
-                    console.debug(`${this._logPrefix}Skipping sub item (same item already exist)`, newItem);
+                    console.debug(`${this._logPrefix}Skipping sub item (same visible item already exist)`, newItem);
                 return existingItem;
             }
             if (this._debug)
@@ -23767,52 +23914,69 @@ class MenuService extends StartableObservableService {
                 newItem.id = existingItem.id;
                 newItem.$children = existingItem.$children;
                 newItem.pinned = existingItem.pinned;
-                if (newItem.pinned) {
+                newItem.static = existingItem.static;
+                if (newItem.pinned || newItem.static || existingItem.expanded) {
                     // If loading, keep existing title if pinned (avoid to show skeleton)
                     newItem.title = newItem.title || existingItem.title;
                 }
                 else {
                     newItem.title = isNotNil(newItem.title) ? newItem.title : existingItem.title;
                 }
+                // Auto set icon, for expand action
+                if (existingItem.action === 'expand') {
+                    newItem.icon = null;
+                    newItem.matIcon = existingItem.expanded ? 'expand_less' : 'expand_more';
+                }
             }
         }
         // Generate item's id (if need)
         else if (isNil(newItem.id)) {
             newItem.id = this._computeNewId();
         }
-        // Get the parent where to attach the item
+        // Default icon for expand action
+        if (newItem.action === 'expand' && !newItem.matIcon) {
+            newItem.matIcon = 'expand_more';
+        }
+        // If visible, get the parent where to attach the item
         const parent = this._findParent(newItem, opts === null || opts === void 0 ? void 0 : opts.availableParents);
-        if (parent) {
+        if (parent && parent.expanded) {
             // Attach item to parent
             this._attachMenuToParent(parent, newItem);
-            const pathParam = MenuItems.parsePathWithQuery(this.router.routerState.snapshot.url);
             // Update detached items :
             // - excluded new item
             // - attach and exclude those than can be attached to the new item
             // Search in detached items one have newItem as parent
-            const ancestor = newItem.ancestor;
-            this._detachedSubItems = this._detachedSubItems.concat(...newItem.children)
-                .reduce((res, item) => {
-                // Excluded newly add item
-                if (item.id === newItem.id)
-                    return res;
-                // If some detached can be attached to the new item: do it
-                if (MenuItems.checkIfSubMenuVisible(item, pathParam)) {
-                    const parent = this._findParent(item, [ancestor]);
-                    if (parent) {
-                        // Update item's children
-                        const detachedChildren = this._detachSubMenuItems(pathParam, item.children || []);
-                        // Attach item
-                        this._attachMenuToParent(parent, item);
-                        // Remember detached children
-                        return res.concat(...detachedChildren);
+            if (newItem.expanded) {
+                const ancestor = newItem.ancestor;
+                this._detachedSubItems = this._detachedSubItems.concat(...newItem.children)
+                    .reduce((res, item) => {
+                    // Excluded newly add item
+                    if (item.id === newItem.id)
+                        return res;
+                    // If some detached can be attached to the new item: do it
+                    if (MenuItems.checkIfSubMenuVisible(item, pathParam)) {
+                        const parent = this._findParent(item, [ancestor]);
+                        if (parent) {
+                            // Update item's children
+                            const detachedChildren = this._detachSubMenuItems(pathParam, item.children || []);
+                            // Attach item
+                            this._attachMenuToParent(parent, item);
+                            // Remember detached children
+                            return res.concat(...detachedChildren);
+                        }
                     }
-                }
-                // Detach (if need)
-                this._detachToParent(item);
-                // Add to detached items
-                return res.concat(item);
-            }, []);
+                    // Detach (if need)
+                    this._detachToParent(item);
+                    // Add to detached items
+                    return res.concat(item);
+                }, []);
+            }
+            else {
+                // Remove from detached elements
+                this._detachedSubItems = this._detachedSubItems.filter(item => item.id !== newItem.id);
+                // Detach children
+                newItem.children.forEach(item => this._detachToParent(item));
+            }
         }
         else {
             // Add or update detached item
@@ -23927,7 +24091,7 @@ class MenuService extends StartableObservableService {
         }
     }
 }
-MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuService, deps: [{ token: LocalSettingsService }, { token: ConfigService }, { token: AccountService }, { token: i1$5.Router }, { token: ENVIRONMENT }, { token: APP_MENU_OPTIONS, optional: true }, { token: APP_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuService, deps: [{ token: LocalSettingsService }, { token: ConfigService }, { token: AccountService }, { token: i1$5.Router }, { token: i2.ModalController }, { token: i2.AlertController }, { token: i2.NavController }, { token: i1$1.TranslateService }, { token: ENVIRONMENT }, { token: APP_MENU_OPTIONS, optional: true }, { 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' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
@@ -23935,7 +24099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     providedIn: 'root', deps: [ENVIRONMENT]
                 }]
         }], ctorParameters: function () {
-        return [{ type: LocalSettingsService }, { type: ConfigService }, { type: AccountService }, { type: i1$5.Router }, { type: Environment, decorators: [{
+        return [{ type: LocalSettingsService }, { type: ConfigService }, { type: AccountService }, { type: i1$5.Router }, { type: i2.ModalController }, { type: i2.AlertController }, { type: i2.NavController }, { type: i1$1.TranslateService }, { type: Environment, decorators: [{
                         type: Inject,
                         args: [ENVIRONMENT]
                     }] }, { type: MenuOptions, decorators: [{
@@ -24036,37 +24200,6 @@ class MenuComponent {
             this.markForCheck();
         });
     }
-    logout() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const translations = yield this.translate.instant([
-                'AUTH.LOGOUT.CONFIRM_TITLE',
-                'AUTH.LOGOUT.CONFIRM_MESSAGE',
-                'COMMON.BTN_CANCEL',
-                'AUTH.LOGOUT.BTN_CONFIRM',
-            ]);
-            const alert = yield this.alertController.create({
-                header: translations['AUTH.LOGOUT.CONFIRM_TITLE'],
-                message: translations['AUTH.LOGOUT.CONFIRM_MESSAGE'],
-                buttons: [
-                    {
-                        text: translations['COMMON.BTN_CANCEL'],
-                        role: 'cancel',
-                        cssClass: 'secondary',
-                    },
-                    {
-                        text: translations['AUTH.LOGOUT.BTN_CONFIRM'],
-                        cssClass: 'ion-color-primary',
-                        handler: () => {
-                            this.accountService.logout();
-                            // Back to home
-                            setTimeout(() => this.navController.navigateRoot('/'), 100);
-                        },
-                    },
-                ],
-            });
-            yield alert.present();
-        });
-    }
     trackByFn(index, item) {
         return item.id.toString();
     }
@@ -24100,18 +24233,12 @@ class MenuComponent {
             if (opened) {
                 console.debug('[menu] Closing menu');
                 yield this.menu.close(this.menuId);
-                // Propage to service
+                // Propagate to service
                 this.menuService._markAsClosed();
             }
             return true;
         });
     }
-    openAboutModal(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const modal = yield this.modalCtrl.create({ component: AboutModal });
-            return modal.present();
-        });
-    }
     setSplitPaneWhen(value) {
         return __awaiter(this, void 0, void 0, function* () {
             console.debug('[menu] Checking splitPane when...');
@@ -24136,26 +24263,10 @@ class MenuComponent {
             return this.setSplitPaneWhen(false);
         }
     }
-    doAction(action, event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.close();
-            console.log(typeof action);
-            if (typeof action === 'string') {
-                switch (action) {
-                    case 'logout':
-                        yield this.logout();
-                        break;
-                    case 'about':
-                        yield this.openAboutModal(event);
-                        break;
-                    default:
-                        throw new Error('Unknown action: ' + action);
-                }
-            }
-            else if (typeof action === 'function') {
-                action(event);
-            }
-        });
+    executeAction(event, item) {
+        this.close();
+        // Delegate execution to service
+        return this.menuService.executeAction(event, item);
     }
     onSwipeRight(event) {
         // Skip, if not a valid swipe event
@@ -24204,10 +24315,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: i0.ChangeDetectorRef }, { token: MenuService }, { token: i1$5.Router }, { token: ENVIRONMENT }, { token: i1$5.ActivatedRoute, 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", rxStrategy: "rxStrategy" }, 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 *ngIf=\"!loading && isLogin; else notLogin\"\n                   @fadeInSlowAnimation\n                   class=\"user-toolbar\">\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; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <ng-template #noLogo>\n                <span style=\"width: 108px;\">{{appName}}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button 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\"\n                     *ngIf=\"!loading\"\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;\" alt=\"logo\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-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  <ion-item *ngIf=\"item.path && !item.action\"\n            @fadeInSlowAnimation\n            class=\"{{item.cssClass}} {{item.color}}\"\n            [class.menu-item-sub]=\"level!==0\"\n            tappable\n            [routerLink]=\"item.path\"\n            [queryParams]=\"item.pathParams\"\n            routerDirection=\"root\"\n            routerLinkActive=\"selected\"\n            [routerLinkActiveOptions]=\"{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 *rxLet=\"item.$title; let title\">\n      <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n      <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n    </ion-label>\n\n    <!-- pin button -->\n    <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n\n  </ion-item>\n\n  <!-- action -->\n  <ion-item *ngIf=\"item.action\"\n            @fadeInSlowAnimation\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            [class.menu-item-sub]=\"level!==0\"\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>\n      <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n      <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n    </ion-label>\n\n    <!-- pin button -->\n    <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n  </ion-item>\n\n  <!-- divider -->\n  <ion-item-divider @fadeInSlowAnimation\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    *ngIf=\"!item.path && !item.action\">\n    <ion-label>\n      <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n    </ion-label>\n  </ion-item-divider>\n\n  <!-- children -->\n  <div *ngIf=\"item?.$children\" class=\"sub-menu-container\">\n    <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  <ion-button *ngIf=\"level > 0\"\n              slot=\"end\"\n              shape=\"round\" fill=\"clear\" size=\"small\"\n              [class.visible-hover]=\"!item.pinned\"\n              (click)=\"togglePinned($event, item)\">\n    <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{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 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 span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!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.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.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { 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: "component", type: i8$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: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i12$3.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i13.LetDirective, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInSlowAnimation], 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", rxStrategy: "rxStrategy" }, 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 *ngIf=\"!loading && isLogin; else notLogin\"\n                   @fadeInSlowAnimation\n                   class=\"user-toolbar\">\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; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <ng-template #noLogo>\n                <span style=\"width: 108px;\">{{appName}}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button 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\"\n                     *ngIf=\"!loading\"\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;\" alt=\"logo\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button 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\n  <!-- divider -->\n  <ion-item-divider *ngIf=\"item.divider; else tappable\"\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    @fadeInSlowAnimation>\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label>\n      <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n    </ion-label>\n  </ion-item-divider>\n\n  <ng-template #tappable>\n\n    <!-- link -->\n    <ion-item *ngIf=\"item.path && !item.action\"\n              @fadeInSlowAnimation\n              class=\"{{item.cssClass}} {{item.color}}\"\n              [class.menu-item-sub]=\"level!==0\"\n              tappable\n              [routerLink]=\"item.path\"\n              [queryParams]=\"item.pathParams\"\n              routerDirection=\"root\"\n              routerLinkActive=\"selected\"\n              [routerLinkActiveOptions]=\"{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 *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n\n    </ion-item>\n\n    <!-- action -->\n    <ion-item *ngIf=\"item.action\"\n              @fadeInSlowAnimation\n              class=\"{{item.cssClass}} {{item.color}} text-1x\"\n              [class.menu-item-sub]=\"level!==0\"\n              tappable\n              (click)=\"executeAction($event, item)\">\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n    </ion-item>\n  </ng-template>\n\n\n\n  <!-- children -->\n  <div *ngIf=\"item?.$children\" class=\"sub-menu-container\">\n    <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #pinButton let-item>\n  <!-- pin button -->\n  <ion-button *ngIf=\"item.pinnable\"\n              slot=\"end\"\n              shape=\"round\" fill=\"clear\" size=\"small\"\n              [class.visible-hover]=\"!item.pinned\"\n              (click)=\"togglePinned($event, item)\">\n    <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{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 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 span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!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.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.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { 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: "component", type: i8$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: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "directive", type: i12$3.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i13.LetDirective, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInSlowAnimation], 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: [fadeInSlowAnimation], 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 *ngIf=\"!loading && isLogin; else notLogin\"\n                   @fadeInSlowAnimation\n                   class=\"user-toolbar\">\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; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <ng-template #noLogo>\n                <span style=\"width: 108px;\">{{appName}}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button 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\"\n                     *ngIf=\"!loading\"\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;\" alt=\"logo\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-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  <ion-item *ngIf=\"item.path && !item.action\"\n            @fadeInSlowAnimation\n            class=\"{{item.cssClass}} {{item.color}}\"\n            [class.menu-item-sub]=\"level!==0\"\n            tappable\n            [routerLink]=\"item.path\"\n            [queryParams]=\"item.pathParams\"\n            routerDirection=\"root\"\n            routerLinkActive=\"selected\"\n            [routerLinkActiveOptions]=\"{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 *rxLet=\"item.$title; let title\">\n      <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n      <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n    </ion-label>\n\n    <!-- pin button -->\n    <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n\n  </ion-item>\n\n  <!-- action -->\n  <ion-item *ngIf=\"item.action\"\n            @fadeInSlowAnimation\n            class=\"{{item.cssClass}} {{item.color}} text-1x\"\n            [class.menu-item-sub]=\"level!==0\"\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>\n      <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n      <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n    </ion-label>\n\n    <!-- pin button -->\n    <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n  </ion-item>\n\n  <!-- divider -->\n  <ion-item-divider @fadeInSlowAnimation\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    *ngIf=\"!item.path && !item.action\">\n    <ion-label>\n      <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n    </ion-label>\n  </ion-item-divider>\n\n  <!-- children -->\n  <div *ngIf=\"item?.$children\" class=\"sub-menu-container\">\n    <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #pinButton let-item let-level=\"level\">\n  <!-- pin button -->\n  <ion-button *ngIf=\"level > 0\"\n              slot=\"end\"\n              shape=\"round\" fill=\"clear\" size=\"small\"\n              [class.visible-hover]=\"!item.pinned\"\n              (click)=\"togglePinned($event, item)\">\n    <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{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 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 span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!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: [fadeInSlowAnimation], 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 *ngIf=\"!loading && isLogin; else notLogin\"\n                   @fadeInSlowAnimation\n                   class=\"user-toolbar\">\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; else noLogo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <ng-template #noLogo>\n                <span style=\"width: 108px;\">{{appName}}</span>\n              </ng-template>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button 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\"\n                     *ngIf=\"!loading\"\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;\" alt=\"logo\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n      <!-- will close the menu, after a click, in mobile -->\n      <ion-menu-toggle auto-hide=\"false\">\n        <ion-list lines=\"none\" *ngIf=\"!loading\">\n          <ng-container *rxFor=\"let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: item, level: 0}\"></ng-container>\n          </ng-container>\n        </ion-list>\n      </ion-menu-toggle>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"menuService.openAboutModal()\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"menuService.openAboutModal()\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button 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\n  <!-- divider -->\n  <ion-item-divider *ngIf=\"item.divider; else tappable\"\n                    class=\"{{item.cssClass}} {{item.color}}\"\n                    @fadeInSlowAnimation>\n    <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n    <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n    <ion-label>\n      <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n    </ion-label>\n  </ion-item-divider>\n\n  <ng-template #tappable>\n\n    <!-- link -->\n    <ion-item *ngIf=\"item.path && !item.action\"\n              @fadeInSlowAnimation\n              class=\"{{item.cssClass}} {{item.color}}\"\n              [class.menu-item-sub]=\"level!==0\"\n              tappable\n              [routerLink]=\"item.path\"\n              [queryParams]=\"item.pathParams\"\n              routerDirection=\"root\"\n              routerLinkActive=\"selected\"\n              [routerLinkActiveOptions]=\"{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 *rxLet=\"item.$title; let title\">\n        <span *ngIf=\"title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n\n    </ion-item>\n\n    <!-- action -->\n    <ion-item *ngIf=\"item.action\"\n              @fadeInSlowAnimation\n              class=\"{{item.cssClass}} {{item.color}} text-1x\"\n              [class.menu-item-sub]=\"level!==0\"\n              tappable\n              (click)=\"executeAction($event, item)\">\n      <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n      <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n      <ion-label>\n        <span *rxIf=\"item.$title; let title; else skeletonText\" [innerHTML]=\"title|translate\"></span>\n        <!--<span *ngIf=\"_debug\"> {{item.id}}</span>-->\n      </ion-label>\n\n      <!-- pin button -->\n      <ng-container *ngTemplateOutlet=\"pinButton; context: {$implicit: item, level: level}\"></ng-container>\n    </ion-item>\n  </ng-template>\n\n\n\n  <!-- children -->\n  <div *ngIf=\"item?.$children\" class=\"sub-menu-container\">\n    <ng-container *rxFor=\"let child of item.$children ; strategy: rxStrategy; trackBy: trackByFn\">\n      <ng-container *ngTemplateOutlet=\"menuItem; context: {$implicit: child, level: level+1}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #pinButton let-item>\n  <!-- pin button -->\n  <ion-button *ngIf=\"item.pinnable\"\n              slot=\"end\"\n              shape=\"round\" fill=\"clear\" size=\"small\"\n              [class.visible-hover]=\"!item.pinned\"\n              (click)=\"togglePinned($event, item)\">\n    <ion-icon slot=\"icon-only\" [name]=\"item.pinned ? 'pin' : 'pin-outline'\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #skeletonText let-width let-animated>\n  <ion-skeleton-text [animated]=\"animated\" [style.width.%]=\"width || 60\"></ion-skeleton-text>\n</ng-template>\n", styles: ["@keyframes fadeinout{0%{opacity:0;display:none}75%{opacity:0;display:none}to{opacity:1;display:flex}}ion-menu{--menu-item-margin: 0;--ion-item-background: transparent;--ion-item-divider-background: transparent;--ion-item-icon-color: var(--ion-color-primary-tint);--ion-item-text-color: var(--ion-color-primary-tint);--ion-item-background-selected: var(--ion-color-secondary100);--ion-item-text-color-selected: var(--ion-color-primary);--ion-item-icon-color-selected: var(--ion-color-primary);--ion-item-text-color-disable: var(--ion-color-medium);--ion-item-icon-color-disable: var(--ion-color-medium);--menu-item-background-selected-sub: var(--ion-color-secondary50);--menu-item-border-width-sub: 0 0 1px 0;--menu-item-margin-start-sub: 16px}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header ion-toolbar.user-toolbar{--ion-toolbar-height: 128px}ion-menu ion-header .user-avatar{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 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 span{margin-left:var(--menu-item-margin)}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover: var(--ion-item-background-selected) !important}ion-menu ion-content ion-list ion-item.selected mat-icon,ion-menu ion-content ion-list ion-item.selected ion-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-text,ion-menu ion-content ion-list ion-item.selected ion-label{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover: var(--ion-item-background-selected) !important;--ion-item-icon-color-selected: var(--ion-item-icon-color) !important;--ion-item-text-color-selected: var(--ion-item-text-color) !important}ion-menu ion-content ion-list ion-item.selected.menu-item-sub{background-color:var(--menu-item-background-selected-sub)!important}ion-menu ion-content ion-list ion-item.menu-item-sub{--min-height: 34px;--padding-vertical: 8px;--padding-start: 8px;--padding-horizontal: 8px;--inner-border-width: var(--menu-item-border-width-sub);font-size:.8em;overflow:unset}ion-menu ion-content ion-list ion-item.menu-item-sub ion-icon[slot],ion-menu ion-content ion-list ion-item.menu-item-sub mat-icon[slot]{font-size:calc(var(--min-height) / 2 - 1px);height:calc(var(--min-height) / 2 - 1px);margin-top:calc(var(--padding-vertical) + 2px);margin-inline-end:calc(var(--padding-horizontal) + 2px);margin-bottom:calc(var(--padding-vertical) + 2px)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-label{margin-top:var(--padding-vertical);margin-bottom:var(--padding-vertical)}ion-menu ion-content ion-list ion-item.menu-item-sub .item-inner{border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow)}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end] ion-icon[slot=icon-only]{margin:0}ion-menu ion-content ion-list ion-item.menu-item-sub ion-button[slot=end].visible-hover{opacity:0;display:none;animation:fadeinout 1s linear 1 backwards}ion-menu ion-content ion-list ion-item.menu-item-sub:hover ion-button.visible-hover{opacity:1;display:flex}ion-menu ion-content ion-list .sub-menu-container{margin-inline-start:var(--menu-item-margin-start-sub, 16px)}ion-menu ion-footer{display:block!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: i0.ChangeDetectorRef }, { type: MenuService }, { type: i1$5.Router }, { type: undefined, decorators: [{
                         type: Inject,
@@ -36025,33 +36136,23 @@ class UsersPage extends AppTable {
             debounceTime(500), tap((json) => this.settings.savePageSetting(this.settingsId, json, SETTINGS_FILTER)))
                 .subscribe());
             if (this.canSendMessage && this.debug) {
-                let subActionsItems;
-                let actionIcon = yield this.menuService.addSubMenuItem({
-                    parentPath: '/admin/users',
-                    path: '/admin/users',
-                    pathParams: { action: 'actions' },
-                    matIcon: 'expand_more',
-                    title: 'Actions',
-                    //pinned: true,
-                    action: () => __awaiter(this, void 0, void 0, function* () {
-                        if (actionIcon.matIcon === 'expand_more') {
-                            actionIcon.matIcon = 'expand_less';
-                            subActionsItems = yield this.menuService.addSubMenuItems([
-                                {
-                                    parentPath: '/admin/users?action=actions',
-                                    path: '/admin/users?action=send',
-                                    icon: 'mail',
-                                    title: 'USER.LIST.BTN_SEND_MESSAGE',
-                                    action: () => this.openComposeMessageModal(),
-                                },
-                            ]);
-                        }
-                        else {
-                            actionIcon.matIcon = 'expand_more';
-                            yield this.menuService.removeSubMenuItems(subActionsItems);
-                        }
-                    }),
-                });
+                yield this.menuService.addSubMenuItems([
+                    {
+                        parentPath: '/admin/users',
+                        path: '/admin/users',
+                        pathParams: { action: 'expand' },
+                        matIcon: 'expand_more',
+                        title: 'USER.LIST.BTN_ACTIONS',
+                        action: 'expand',
+                    },
+                    {
+                        parentPath: '/admin/users?action=expand',
+                        path: '/admin/users?action=send',
+                        icon: 'mail',
+                        title: 'USER.LIST.BTN_SEND_MESSAGE',
+                        action: () => this.openComposeMessageModal(),
+                    },
+                ], { skipIfExists: false });
             }
             // Restore filter from settings, or load all
             this.restoreFilterOrLoad();