aril 0.0.65 → 0.0.67

package/fesm2022/aril-theme-layout.mjs

@@ -1,6 +1,6 @@
 import { NgClass, NgTemplateOutlet, AsyncPipe, NgStyle, UpperCasePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, signal, effect, Injectable, computed, Input, inject, HostBinding, ViewChild } from '@angular/core';
+import { Component, signal, effect, Injectable, inject, computed, Input, HostBinding, ViewChild } from '@angular/core';
 import * as i1 from '@angular/router';
 import { NavigationEnd, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import * as i4$2 from 'primeng/confirmdialog';
@@ -28,6 +28,7 @@ import * as i5 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i4 from 'primeng/sidebar';
 import { SidebarModule } from 'primeng/sidebar';
+import { PubSubService } from 'aril/util/pub-sub';
 import { TagModule } from 'primeng/tag';
 import { KeycloakManager } from 'aril/keycloak';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -95,7 +96,7 @@ class LayoutService {
             colorScheme: 'light',
             theme: 'indigo',
             scale: 12,
-            menuTheme: 'primaryColor'
+            menuTheme: 'colorScheme'
         };
         // TODO: Set User Config
         this.config = signal(this._config);
@@ -113,6 +114,7 @@ class LayoutService {
         this.overlayOpen = new Subject();
         this.configUpdate$ = this.configUpdate.asObservable();
         this.overlayOpen$ = this.overlayOpen.asObservable();
+        this.mfeAppItemClicked = signal(false);
         effect(() => {
             const config = this.config();
             if (this.updateStyle(config)) {
@@ -212,6 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 class AppMenuService {
     constructor() {
+        this.pubSubService = inject(PubSubService);
         this.menuSource = new Subject();
         this.resetSource = new Subject();
         this.menuConfig = signal({ items: [], prefix: undefined });
@@ -246,7 +249,16 @@ class AppMenuService {
             menuItem.items = menuItem.items.map((item) => this.addPrefix(item, appPrefix));
         }
         else {
-            menuItem.routerLink = menuItem['root'] ? `/${appPrefix}` : `/${appPrefix}/${menuItem.routerLink}`;
+            const url = menuItem['root'] ? `/${appPrefix}` : `/${appPrefix}/${menuItem.routerLink}`;
+            if (globalThis.isHostMode) {
+                menuItem['path'] = url;
+                menuItem.command = () => {
+                    this.pubSubService.publish({ name: 'navigateBetweenApps', data: { path: url } });
+                };
+            }
+            else {
+                menuItem.routerLink = url;
+            }
         }
         return menuItem;
     }
@@ -374,11 +386,11 @@ class AppConfigComponent {
         this.scale++;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppConfigComponent, deps: [{ token: LayoutService }, { token: AppMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppConfigComponent, isStandalone: true, selector: "app-config", inputs: { minimal: "minimal" }, ngImport: i0, template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\r\n\t<i class=\"pi pi-cog\"></i>\r\n</button>\r\n\r\n<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-config-sidebar w-18rem\">\r\n\t<h5>Themes</h5>\r\n\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t@for (theme of componentThemes; track theme) {\r\n\t\t\t<div class=\"w-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tclass=\"cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center\"\r\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\r\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\r\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\r\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\r\n\t\t\t\t\t}\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t}\r\n\t</div>\r\n\r\n\t<h5>Scale</h5>\r\n\t<div class=\"flex align-items-center\">\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-minus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"decrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\r\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\r\n\t\t<div class=\"flex gap-2 align-items-center\">\r\n\t\t\t@for (s of scales; track s) {\r\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-plus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"incrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\r\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Menu Type</h5>\r\n\t\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode1\">Static</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode2\">Overlay</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim +</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode5\">Reveal</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode6\">Drawer</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Menu Theme</h5>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"colorScheme\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"primaryColor\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"transparent\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\r\n\t\t</div>\r\n\t}\r\n\r\n\t<h5>Color Scheme</h5>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\r\n\t\t<label for=\"mode-light\">Light</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\r\n\t\t<label for=\"mode-dim\">Dim</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\r\n\t\t<label for=\"mode-dark\">Dark</label>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Input Style</h5>\r\n\t\t<div class=\"flex\">\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton\r\n\t\t\t\t\tname=\"inputStyle\"\r\n\t\t\t\t\tvalue=\"outlined\"\r\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\r\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"filled_input\">Filled</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Ripple Effect</h5>\r\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\r\n\t}\r\n</p-sidebar>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i5.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i7.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppConfigComponent, isStandalone: true, selector: "app-config", inputs: { minimal: "minimal" }, ngImport: i0, template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\n\t<i class=\"pi pi-cog\"></i>\n</button>\n\n<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-config-sidebar w-18rem\">\n\t<h5>Themes</h5>\n\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t@for (theme of componentThemes; track theme) {\n\t\t\t<div class=\"w-3\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center\"\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<h5>Scale</h5>\n\t<div class=\"flex align-items-center\">\n\t\t<button\n\t\t\ticon=\"pi pi-minus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"decrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\n\t\t<div class=\"flex gap-2 align-items-center\">\n\t\t\t@for (s of scales; track s) {\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\n\t\t\t}\n\t\t</div>\n\t\t<button\n\t\t\ticon=\"pi pi-plus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"incrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Menu Type</h5>\n\t\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\n\t\t\t\t<label for=\"mode1\">Static</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\n\t\t\t\t<label for=\"mode2\">Overlay</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim +</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\n\t\t\t\t<label for=\"mode5\">Reveal</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\n\t\t\t\t<label for=\"mode6\">Drawer</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Menu Theme</h5>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"colorScheme\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"primaryColor\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"transparent\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\n\t\t</div>\n\t}\n\n\t<h5>Color Scheme</h5>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\n\t\t<label for=\"mode-light\">Light</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\n\t\t<label for=\"mode-dim\">Dim</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\n\t\t<label for=\"mode-dark\">Dark</label>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Input Style</h5>\n\t\t<div class=\"flex\">\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton\n\t\t\t\t\tname=\"inputStyle\"\n\t\t\t\t\tvalue=\"outlined\"\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\n\t\t\t</div>\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\n\t\t\t\t<label for=\"filled_input\">Filled</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Ripple Effect</h5>\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\n\t}\n</p-sidebar>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i5.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i7.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppConfigComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-config', imports: [FormsModule, SidebarModule, RadioButtonModule, ButtonModule, InputSwitchModule, NgStyle, NgClass], template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\r\n\t<i class=\"pi pi-cog\"></i>\r\n</button>\r\n\r\n<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-config-sidebar w-18rem\">\r\n\t<h5>Themes</h5>\r\n\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t@for (theme of componentThemes; track theme) {\r\n\t\t\t<div class=\"w-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tclass=\"cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center\"\r\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\r\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\r\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\r\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\r\n\t\t\t\t\t}\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t}\r\n\t</div>\r\n\r\n\t<h5>Scale</h5>\r\n\t<div class=\"flex align-items-center\">\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-minus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"decrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\r\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\r\n\t\t<div class=\"flex gap-2 align-items-center\">\r\n\t\t\t@for (s of scales; track s) {\r\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-plus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"incrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\r\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Menu Type</h5>\r\n\t\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode1\">Static</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode2\">Overlay</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim +</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode5\">Reveal</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode6\">Drawer</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Menu Theme</h5>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"colorScheme\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"primaryColor\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"transparent\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\r\n\t\t</div>\r\n\t}\r\n\r\n\t<h5>Color Scheme</h5>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\r\n\t\t<label for=\"mode-light\">Light</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\r\n\t\t<label for=\"mode-dim\">Dim</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\r\n\t\t<label for=\"mode-dark\">Dark</label>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Input Style</h5>\r\n\t\t<div class=\"flex\">\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton\r\n\t\t\t\t\tname=\"inputStyle\"\r\n\t\t\t\t\tvalue=\"outlined\"\r\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\r\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"filled_input\">Filled</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Ripple Effect</h5>\r\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\r\n\t}\r\n</p-sidebar>\r\n" }]
+            args: [{ standalone: true, selector: 'app-config', imports: [FormsModule, SidebarModule, RadioButtonModule, ButtonModule, InputSwitchModule, NgStyle, NgClass], template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\n\t<i class=\"pi pi-cog\"></i>\n</button>\n\n<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-config-sidebar w-18rem\">\n\t<h5>Themes</h5>\n\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t@for (theme of componentThemes; track theme) {\n\t\t\t<div class=\"w-3\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center\"\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<h5>Scale</h5>\n\t<div class=\"flex align-items-center\">\n\t\t<button\n\t\t\ticon=\"pi pi-minus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"decrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\n\t\t<div class=\"flex gap-2 align-items-center\">\n\t\t\t@for (s of scales; track s) {\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\n\t\t\t}\n\t\t</div>\n\t\t<button\n\t\t\ticon=\"pi pi-plus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"incrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Menu Type</h5>\n\t\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\n\t\t\t\t<label for=\"mode1\">Static</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\n\t\t\t\t<label for=\"mode2\">Overlay</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim +</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\n\t\t\t\t<label for=\"mode5\">Reveal</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\n\t\t\t\t<label for=\"mode6\">Drawer</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Menu Theme</h5>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"colorScheme\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"primaryColor\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"transparent\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\n\t\t</div>\n\t}\n\n\t<h5>Color Scheme</h5>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\n\t\t<label for=\"mode-light\">Light</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\n\t\t<label for=\"mode-dim\">Dim</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\n\t\t<label for=\"mode-dark\">Dark</label>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Input Style</h5>\n\t\t<div class=\"flex\">\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton\n\t\t\t\t\tname=\"inputStyle\"\n\t\t\t\t\tvalue=\"outlined\"\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\n\t\t\t</div>\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\n\t\t\t\t<label for=\"filled_input\">Filled</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Ripple Effect</h5>\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\n\t}\n</p-sidebar>\n" }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: AppMenuService }], propDecorators: { minimal: [{
                 type: Input
             }] } });
@@ -388,7 +400,6 @@ class AppProfileSidebarComponent {
         this.layoutService = layoutService;
         this.keyCloakManager = inject(KeycloakManager);
         this.username = this.keyCloakManager.getUsername();
-        console.log(this.username, "username");
     }
     get visible() {
         return this.layoutService.state.profileSidebarVisible;
@@ -405,9 +416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         }], ctorParameters: () => [{ type: LayoutService }] });
 
 class AppMenuItemComponent {
-    constructor(layoutService, cd, router, menuService) {
+    constructor(layoutService, router, menuService) {
         this.layoutService = layoutService;
-        this.cd = cd;
         this.router = router;
         this.menuService = menuService;
         this.active = false;
@@ -429,14 +439,18 @@ class AppMenuItemComponent {
         });
         this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
             if (this.isSlimPlus || this.isSlim || this.isHorizontal) {
-                this.active = false;
+                if (!this.layoutService.mfeAppItemClicked())
+                    this.active = false;
             }
             else {
                 if (this.item.routerLink) {
                     this.updateActiveStateFromRoute();
                 }
             }
-            if (this.item.routerLink === params.url) {
+            if (this.item['path'] === params.url ||
+                this.item.routerLink === params.url ||
+                this.item.routerLink === params.urlAfterRedirects ||
+                this.item['remoteName'] === params.url.substring(1)) {
                 this.menuService.activeRootMenuItemKey.set(this.key.charAt(0));
             }
         });
@@ -513,6 +527,12 @@ class AppMenuItemComponent {
             this.active = !this.active;
             if (this.root && this.active && (this.isSlim || this.isHorizontal || this.isSlimPlus)) {
                 this.layoutService.onOverlaySubmenuOpen();
+                if (this.item['mfeApp']) {
+                    this.layoutService.mfeAppItemClicked.set(true);
+                }
+                else {
+                    this.layoutService.mfeAppItemClicked.set(false);
+                }
             }
         }
         else {
@@ -528,6 +548,8 @@ class AppMenuItemComponent {
     }
     onMouseEnter() {
         // activate item on hover
+        if (globalThis.isHostMode && !this.item.items?.length)
+            return;
         if (this.root && (this.isSlim || this.isHorizontal || this.isSlimPlus) && this.layoutService.isDesktop()) {
             if (this.layoutService.state.menuHoverActive) {
                 this.active = true;
@@ -565,7 +587,7 @@ class AppMenuItemComponent {
             this.menuResetSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuItemComponent, deps: [{ token: LayoutService }, { token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: AppMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuItemComponent, deps: [{ token: LayoutService }, { token: i1.Router }, { token: AppMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppMenuItemComponent, isStandalone: true, selector: "[app-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, viewQueries: [{ propertyName: "submenu", first: true, predicate: ["submenu"], descendants: true }], ngImport: i0, template: `
 		<ng-container>
 			@if (root) {
@@ -635,7 +657,7 @@ class AppMenuItemComponent {
 				</ul>
 			}
 		</ng-container>
-	`, isInline: true, styles: [".active-root-menu-item{background-color:#0202024d}\n"], dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i5$1.Ripple, selector: "[pRipple]" }], animations: [
+	`, isInline: true, styles: [".active-root-menu-item{background-color:var(--primary-color)}.active-root-menu-item>i,.active-root-menu-item span{color:#fff!important}\n"], dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i5$1.Ripple, selector: "[pRipple]" }], animations: [
             trigger('children', [
                 state('collapsed', style({
                     height: '0'
@@ -740,8 +762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                             })),
                             transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
                         ])
-                    ], styles: [".active-root-menu-item{background-color:#0202024d}\n"] }]
-        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: AppMenuService }], propDecorators: { item: [{
+                    ], styles: [".active-root-menu-item{background-color:var(--primary-color)}.active-root-menu-item>i,.active-root-menu-item span{color:#fff!important}\n"] }]
+        }], ctorParameters: () => [{ type: LayoutService }, { type: i1.Router }, { type: AppMenuService }], propDecorators: { item: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -762,13 +784,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 class AppMenuComponent {
     constructor() {
         this.menuService = inject(AppMenuService);
+        this.isHostMode = globalThis.isHostMode;
+        this.hostMenuItems = globalThis.hostMenuItems;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppMenuComponent, isStandalone: true, selector: "app-menu", ngImport: i0, template: "<ul class=\"layout-menu flex-wrap\">\r\n\t@for (item of menuService.menuItems(); track $index) {\r\n\t\t@if (item.separator) {\r\n\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t} @else {\r\n\t\t\t<li app-menuitem [item]=\"item\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t}\r\n\t}\r\n</ul>\r\n", dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppMenuComponent, isStandalone: true, selector: "app-menu", ngImport: i0, template: "<ul class=\"layout-menu flex-wrap\">\r\n\t@for (item of isHostMode ? hostMenuItems() : menuService.menuItems(); track $index) {\r\n\t\t@if (item.separator) {\r\n\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t} @else {\r\n\t\t\t<li app-menuitem [item]=\"item\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t}\r\n\t}\r\n</ul>\r\n", dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-menu', imports: [AppMenuItemComponent], template: "<ul class=\"layout-menu flex-wrap\">\r\n\t@for (item of menuService.menuItems(); track $index) {\r\n\t\t@if (item.separator) {\r\n\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t} @else {\r\n\t\t\t<li app-menuitem [item]=\"item\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t}\r\n\t}\r\n</ul>\r\n" }]
+            args: [{ standalone: true, selector: 'app-menu', imports: [AppMenuItemComponent], template: "<ul class=\"layout-menu flex-wrap\">\r\n\t@for (item of isHostMode ? hostMenuItems() : menuService.menuItems(); track $index) {\r\n\t\t@if (item.separator) {\r\n\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t} @else {\r\n\t\t\t<li app-menuitem [item]=\"item\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t}\r\n\t}\r\n</ul>\r\n" }]
         }] });
 class AppSubMenuComponent {
     constructor() {
@@ -778,11 +802,11 @@ class AppSubMenuComponent {
         return 'app-sub-menu-' + globalThis.activeMF;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppSubMenuComponent, isStandalone: true, selector: "app-sub-menu", host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"layout-sidebar\" style=\"margin-left: 8rem\">\r\n\t<div #subMenuContainer class=\"layout-menu-container\">\r\n\t\t<ul class=\"layout-menu flex-wrap\" style=\"margin-top: 6.5rem\">\r\n\t\t\t@for (subItem of menuService.subMenuItems(); track $index) {\r\n\t\t\t\t@if (subItem.separator) {\r\n\t\t\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t\t\t} @else {\r\n\t\t\t\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppSubMenuComponent, isStandalone: true, selector: "app-sub-menu", host: { properties: { "id": "this.id" } }, ngImport: i0, template: "@for (subItem of menuService.subMenuItems(); track $index) {\r\n\t@if (subItem.separator) {\r\n\t\t<li class=\"menu-separator\"></li>\r\n\t} @else {\r\n\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"false\"></li>\r\n\t}\r\n}\r\n", dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppSubMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-sub-menu', imports: [AppMenuItemComponent], template: "<div class=\"layout-sidebar\" style=\"margin-left: 8rem\">\r\n\t<div #subMenuContainer class=\"layout-menu-container\">\r\n\t\t<ul class=\"layout-menu flex-wrap\" style=\"margin-top: 6.5rem\">\r\n\t\t\t@for (subItem of menuService.subMenuItems(); track $index) {\r\n\t\t\t\t@if (subItem.separator) {\r\n\t\t\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t\t\t} @else {\r\n\t\t\t\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'app-sub-menu', imports: [AppMenuItemComponent], template: "@for (subItem of menuService.subMenuItems(); track $index) {\r\n\t@if (subItem.separator) {\r\n\t\t<li class=\"menu-separator\"></li>\r\n\t} @else {\r\n\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"false\"></li>\r\n\t}\r\n}\r\n" }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['id']
@@ -882,7 +906,8 @@ class AppLayoutComponent {
             }
         });
         this.router.events.pipe(filter$1((event) => event instanceof NavigationEnd)).subscribe(() => {
-            this.hideMenu();
+            if (!this.layoutService.mfeAppItemClicked())
+                this.hideMenu();
         });
     }
     blockBodyScroll() {
@@ -949,7 +974,7 @@ class AppLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLayoutComponent, deps: [{ token: AppMenuService }, { token: LayoutService }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppLayoutComponent, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "appTopbar", first: true, predicate: AppTopbarComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-container\" [ngClass]=\"containerClass\">\r\n\t<app-sidebar></app-sidebar>\r\n\t<div class=\"layout-content-wrapper\" [style]=\"{ 'margin-left': globalThis.isHostMode ? '16rem' : '8rem' }\">\r\n\t\t<app-topbar></app-topbar>\r\n\t\t<app-breadcrumb class=\"content-breadcrumb\"></app-breadcrumb>\r\n\t\t<div class=\"layout-content\">\r\n\t\t\t<router-outlet></router-outlet>\r\n\t\t</div>\r\n\t</div>\r\n\t<app-profilemenu></app-profilemenu>\r\n\t<app-config></app-config>\r\n\t<div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<p-toast key=\"toast-root\"></p-toast>\r\n<p-dialog key=\"dialog-root\"></p-dialog>\r\n<p-messages key=\"messages-root\"></p-messages>\r\n<p-confirmPopup key=\"confirmPopup-root\"></p-confirmPopup>\r\n<p-confirmDialog key=\"confirmDialog-root\"></p-confirmDialog>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: AppSidebarComponent, selector: "app-sidebar" }, { kind: "component", type: AppTopbarComponent, selector: "app-topbar" }, { kind: "component", type: AppBreadcrumbComponent, selector: "app-breadcrumb" }, { kind: "component", type: AppProfileSidebarComponent, selector: "app-profilemenu" }, { kind: "component", type: AppConfigComponent, selector: "app-config", inputs: ["minimal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppLayoutComponent, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "appTopbar", first: true, predicate: AppTopbarComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-container\" [ngClass]=\"containerClass\">\r\n\t<app-sidebar></app-sidebar>\r\n\t<div class=\"layout-content-wrapper\">\r\n\t\t<app-topbar></app-topbar>\r\n\t\t<app-breadcrumb class=\"content-breadcrumb\"></app-breadcrumb>\r\n\t\t<div class=\"layout-content\">\r\n\t\t\t<router-outlet></router-outlet>\r\n\t\t</div>\r\n\t</div>\r\n\t<app-profilemenu></app-profilemenu>\r\n\t<app-config></app-config>\r\n\t<div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<p-toast key=\"toast-root\"></p-toast>\r\n<p-dialog key=\"dialog-root\"></p-dialog>\r\n<p-messages key=\"messages-root\"></p-messages>\r\n<p-confirmPopup key=\"confirmPopup-root\"></p-confirmPopup>\r\n<p-confirmDialog key=\"confirmDialog-root\"></p-confirmDialog>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: AppSidebarComponent, selector: "app-sidebar" }, { kind: "component", type: AppTopbarComponent, selector: "app-topbar" }, { kind: "component", type: AppBreadcrumbComponent, selector: "app-breadcrumb" }, { kind: "component", type: AppProfileSidebarComponent, selector: "app-profilemenu" }, { kind: "component", type: AppConfigComponent, selector: "app-config", inputs: ["minimal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLayoutComponent, decorators: [{
             type: Component,
@@ -966,7 +991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         AppBreadcrumbComponent,
                         AppProfileSidebarComponent,
                         AppConfigComponent
-                    ], template: "<div class=\"layout-container\" [ngClass]=\"containerClass\">\r\n\t<app-sidebar></app-sidebar>\r\n\t<div class=\"layout-content-wrapper\" [style]=\"{ 'margin-left': globalThis.isHostMode ? '16rem' : '8rem' }\">\r\n\t\t<app-topbar></app-topbar>\r\n\t\t<app-breadcrumb class=\"content-breadcrumb\"></app-breadcrumb>\r\n\t\t<div class=\"layout-content\">\r\n\t\t\t<router-outlet></router-outlet>\r\n\t\t</div>\r\n\t</div>\r\n\t<app-profilemenu></app-profilemenu>\r\n\t<app-config></app-config>\r\n\t<div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<p-toast key=\"toast-root\"></p-toast>\r\n<p-dialog key=\"dialog-root\"></p-dialog>\r\n<p-messages key=\"messages-root\"></p-messages>\r\n<p-confirmPopup key=\"confirmPopup-root\"></p-confirmPopup>\r\n<p-confirmDialog key=\"confirmDialog-root\"></p-confirmDialog>\r\n" }]
+                    ], template: "<div class=\"layout-container\" [ngClass]=\"containerClass\">\r\n\t<app-sidebar></app-sidebar>\r\n\t<div class=\"layout-content-wrapper\">\r\n\t\t<app-topbar></app-topbar>\r\n\t\t<app-breadcrumb class=\"content-breadcrumb\"></app-breadcrumb>\r\n\t\t<div class=\"layout-content\">\r\n\t\t\t<router-outlet></router-outlet>\r\n\t\t</div>\r\n\t</div>\r\n\t<app-profilemenu></app-profilemenu>\r\n\t<app-config></app-config>\r\n\t<div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<p-toast key=\"toast-root\"></p-toast>\r\n<p-dialog key=\"dialog-root\"></p-dialog>\r\n<p-messages key=\"messages-root\"></p-messages>\r\n<p-confirmPopup key=\"confirmPopup-root\"></p-confirmPopup>\r\n<p-confirmDialog key=\"confirmDialog-root\"></p-confirmDialog>\r\n" }]
         }], ctorParameters: () => [{ type: AppMenuService }, { type: LayoutService }, { type: i0.Renderer2 }, { type: i1.Router }], propDecorators: { appSidebar: [{
                 type: ViewChild,
                 args: [AppSidebarComponent]
@@ -977,19 +1002,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
 class MFELayoutComponent {
     ngAfterViewInit() {
-        setTimeout(() => {
-            const appSidebar = document.getElementsByTagName('app-sidebar')[0];
-            const subMenu = document.getElementById('app-sub-menu-' + globalThis.activeMF);
-            subMenu.removeAttribute('hidden');
-            appSidebar.append(subMenu);
-        }, 10);
-    }
-    ngOnDestroy() {
-        document.getElementById('app-sub-menu-' + globalThis.activeMF)?.remove();
+        // const appMenu = document.querySelector('app-menu>ul>li>ul#' + (<any>globalThis).activeMF);
+        // const subMenuId = 'app-sub-menu-' + (<any>globalThis).activeMF;
+        // const subMenu = document.getElementById(subMenuId) as HTMLElement;
+        // appMenu?.replaceChildren(...Array.from(subMenu.children));
+        // document.querySelector(subMenuId)?.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MFELayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: MFELayoutComponent, isStandalone: true, selector: "mfe-layout", ngImport: i0, template: `
-		<app-sub-menu hidden></app-sub-menu>
+		<!-- <app-sub-menu hidden></app-sub-menu> -->
 
 		<router-outlet />
 
@@ -998,7 +1019,7 @@ class MFELayoutComponent {
 		<p-messages key="messages-root"></p-messages>
 		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
 		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
-	`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: AppSubMenuComponent, selector: "app-sub-menu" }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MFELayoutComponent, decorators: [{
             type: Component,
@@ -1006,7 +1027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     standalone: true,
                     selector: 'mfe-layout',
                     template: `
-		<app-sub-menu hidden></app-sub-menu>
+		<!-- <app-sub-menu hidden></app-sub-menu> -->
 
 		<router-outlet />