aril 1.1.96 → 1.2.0

package/fesm2022/aril-theme-layout.mjs

@@ -61,6 +61,7 @@ import * as i10 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { solidIcons, regularIcons } from 'aril/util/lib';
 import { Title } from '@angular/platform-browser';
+import { bridge } from 'aril/boot/bridge';
 import * as i2$2 from 'aril/util/pub-sub';
 import { PubSubService } from 'aril/util/pub-sub';
 import * as i1$2 from 'aril/util/pipes';
@@ -804,7 +805,7 @@ class HistoryService {
             multiLanguageTitle.en = pageTitle;
         }
         else {
-            const globalPageTitle = globalThis.__ARIL_PAGE_TITLE__?.();
+            const globalPageTitle = bridge.pageTitle();
             if (globalPageTitle) {
                 multiLanguageTitle.tr = globalPageTitle;
                 multiLanguageTitle.en = globalPageTitle;
@@ -1017,7 +1018,7 @@ class SiteMapSidebarComponent {
         this.layoutService.state.siteMapSidebarVisible = value;
     }
     loadSiteMap() {
-        const menuItems = globalThis.hostMenuItems?.() || [];
+        const menuItems = bridge.hostMenuItems();
         const nodes = this.buildSiteMapNodes(menuItems);
         const totalCount = this.countTotalPages(nodes);
         this.siteMapNodes.set(nodes);
@@ -1120,7 +1121,7 @@ class SiteMapSidebarComponent {
         return node.key || `${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SiteMapSidebarComponent, deps: [{ token: LayoutService }, { token: i5.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: SiteMapSidebarComponent, isStandalone: true, selector: "app-site-map-sidebar", ngImport: i0, template: "<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-sitemap-sidebar w-full sm:w-30rem\"\r\n\t*transloco=\"let t; read: 'siteMap'\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"flex align-items-center justify-content-between gap-2 w-full\">\r\n\t\t\t<div class=\"flex align-items-center gap-2\">\r\n\t\t\t\t<i class=\"pi pi-sitemap text-primary text-xl\"></i>\r\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('siteMap') }}</span>\r\n\t\t\t\t<span class=\"total-pages\">{{ totalPages() }} {{ t('pages') }}</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<div class=\"sitemap-content\">\r\n\t\t<div class=\"search-section grid p-fluid m-0\">\r\n\t\t\t<aril-text\r\n\t\t\t\t[placeholder]=\"t('searchPages')\"\r\n\t\t\t\t[(ngModel)]=\"searchTerm\"\r\n\t\t\t\t(ngModelChange)=\"onSearchChange()\"\r\n\t\t\t\tclass=\"col-10 m-0\">\r\n\t\t\t</aril-text>\r\n\t\t\t@if (filteredNodes().length > 0) {\r\n\t\t\t<div class=\"col-2 flex align-items-center m-0 p-0\">\r\n\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesDown\"\r\n\t\t\t\t\t\tsize=\"xl\"\r\n\t\t\t\t\t\tstyle=\"color: var(--primary-color)\"\r\n\t\t\t\t\t\tclass=\"col-1 cursor-pointer\"\r\n\t\t\t\t\t\t[pTooltip]=\"t('expandAll')\"\r\n\t\t\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t\t\t\t(click)=\"expandAll()\">\r\n\t\t\t\t\t</fa-icon>\r\n\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesUp\"\r\n\t\t\t\t\t\tsize=\"xl\"\r\n\t\t\t\t\t\tstyle=\"color: var(--red-500)\"\r\n\t\t\t\t\t\tclass=\"col-1 ml-3 cursor-pointer\"\r\n\t\t\t\t\t\t[pTooltip]=\"t('collapseAll')\"\r\n\t\t\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t\t\t\t(click)=\"collapseAll()\">\r\n\t\t\t\t\t</fa-icon>\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\t\t</div>\r\n\r\n\t\t<!-- Site Map Tree -->\r\n\t\t@if (filteredNodes().length > 0) {\r\n\t\t\t<div class=\"sitemap-tree\">\r\n\t\t\t\t<p-scrollPanel [style]=\"{ width: '100%', height: '100%' }\">\r\n\t\t\t\t\t<div class=\"tree-container\">\r\n\t\t\t\t\t\t@for (node of filteredNodes(); track trackByKey($index, node)) {\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: node, level: 0 }\"></ng-container>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</p-scrollPanel>\r\n\t\t\t</div>\r\n\t\t} @else {\r\n\t\t\t<div class=\"empty-state\">\r\n\t\t\t\t<div class=\"empty-content\">\r\n\t\t\t\t\t<i class=\"pi pi-sitemap empty-icon\"></i>\r\n\t\t\t\t\t<h3 class=\"empty-title\">\r\n\t\t\t\t\t\t{{ searchTerm() ? t('noSearchResults') : t('noPages') }}\r\n\t\t\t\t\t</h3>\r\n\t\t\t\t\t<p class=\"empty-message\">\r\n\t\t\t\t\t\t{{ searchTerm() ? t('tryDifferentKeywords') : '' }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t@if (searchTerm()) {\r\n\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t[label]=\"t('clearSearch')\"\r\n\t\t\t\t\t\t\ticon=\"TIMES\"\r\n\t\t\t\t\t\t\tcolor=\"secondary\"\r\n\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t\t(clickEvent)=\"searchTerm.set(''); onSearchChange()\">\r\n\t\t\t\t\t\t</aril-button>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t}\r\n\r\n\t\t<!-- Recursive Tree Node Template -->\r\n\t\t<ng-template #treeNodeTemplate let-node let-level=\"level\">\r\n\t\t\t<div class=\"tree-node\" [style.margin-left.px]=\"level * 20\">\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"node-item\"\r\n\t\t\t\t\t[class.has-children]=\"node.children && node.children.length > 0\"\r\n\t\t\t\t\t[class.is-page]=\"node.routerLink\"\r\n\t\t\t\t\t[routerLink]=\"node.routerLink\"\r\n\t\t\t\t\t(click)=\"!node.routerLink ? toggleNode(node) : (visible = false)\">\r\n\t\t\t\t\t<div class=\"node-content\">\r\n\t\t\t\t\t\t@if (node.children && node.children.length > 0) {\r\n\t\t\t\t\t\t\t<div class=\"toggle-btn\" (click)=\"$event.stopPropagation(); toggleNode(node)\">\r\n\t\t\t\t\t\t\t\t<i class=\"pi\" [class.pi-chevron-right]=\"!node.expanded\" [class.pi-chevron-down]=\"node.expanded\"></i>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t@if (node.icon) {\r\n\t\t\t\t\t\t\t<i class=\"node-icon\" [class]=\"node.icon\"></i>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t<span class=\"node-label\">{{ node.label | translateJson }}</span>\r\n\r\n\t\t\t\t\t\t@if (node.routerLink) {\r\n\t\t\t\t\t\t\t<i class=\"external-icon pi pi-external-link\"></i>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<!-- Recursive Children -->\r\n\t\t\t\t@if (node.children && node.expanded) {\r\n\t\t\t\t\t@for (child of node.children; track trackByKey($index, child)) {\r\n\t\t\t\t\t\t<ng-container\r\n\t\t\t\t\t\t\t*ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: child, level: level + 1 }\"></ng-container>\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t</div>\r\n</p-sidebar>\r\n", styles: [":host ::ng-deep .layout-sitemap-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem .5rem}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header .total-pages{background:#fff3;color:#ffffffe6;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500}.sitemap-content{display:flex;flex-direction:column;height:100%;background:var(--surface-ground)}.search-section{padding:1rem;border-bottom:1px solid var(--surface-border);background:var(--surface-0)}.sitemap-tree{flex:1;overflow:hidden}.tree-container{padding:.5rem 0}.tree-node .node-item{display:flex;align-items:center;padding:.5rem 1rem;border-radius:6px;margin:.1rem .5rem;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.tree-node .node-item:hover{background:var(--surface-hover);border-color:var(--surface-border)}.tree-node .node-item.is-page:hover{background:var(--primary-50);border-color:var(--primary-200)}.tree-node .node-item.is-page:hover .external-icon{opacity:1}.tree-node .node-item.has-children{font-weight:500}.tree-node .node-content{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.tree-node .toggle-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;border-radius:4px;color:var(--text-color-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0}.tree-node .toggle-btn:hover{background:var(--surface-hover);color:var(--primary-color)}.tree-node .toggle-btn i{font-size:.7rem}.tree-node .node-icon{color:var(--primary-color);font-size:.9rem;flex-shrink:0}.tree-node .node-label{flex:1;font-size:.9rem;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-node .external-icon{color:var(--text-color-secondary);font-size:.7rem;opacity:.6;transition:opacity .2s ease;flex-shrink:0}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.empty-content{text-align:center;max-width:300px}.empty-icon{font-size:3rem;color:var(--text-color-secondary);margin-bottom:1rem;opacity:.5}.empty-message{font-size:.9rem;color:var(--text-color-secondary);line-height:1.4;margin-bottom:1.5rem}:host ::ng-deep .p-scrollpanel-bar-y{background:var(--primary-200);width:4px;border-radius:2px}:host ::ng-deep .p-scrollpanel-bar-y:hover{background:var(--primary-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i6$1.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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ScrollPanelModule }, { kind: "component", type: i7$1.ScrollPanel, selector: "p-scrollPanel", inputs: ["style", "styleClass", "step"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }, { kind: "component", type: TextComponent, selector: "aril-text[ngModel], aril-text[formControl], aril-text[formControlName]", inputs: ["placeholder", "tabindex", "icon", "iconPos", "size"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslateJsonPipe, name: "translateJson" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i10.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: SiteMapSidebarComponent, isStandalone: true, selector: "app-site-map-sidebar", ngImport: i0, template: "<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-sitemap-sidebar w-full sm:w-30rem\"\n\t*transloco=\"let t; read: 'siteMap'\">\n\t<ng-template pTemplate=\"header\">\n\t\t<div class=\"flex align-items-center justify-content-between gap-2 w-full\">\n\t\t\t<div class=\"flex align-items-center gap-2\">\n\t\t\t\t<i class=\"pi pi-sitemap text-primary text-xl\"></i>\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('siteMap') }}</span>\n\t\t\t\t<span class=\"total-pages\">{{ totalPages() }} {{ t('pages') }}</span>\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\n\t<div class=\"sitemap-content\">\n\t\t<div class=\"search-section grid p-fluid m-0\">\n\t\t\t<aril-text\n\t\t\t\t[placeholder]=\"t('searchPages')\"\n\t\t\t\t[(ngModel)]=\"searchTerm\"\n\t\t\t\t(ngModelChange)=\"onSearchChange()\"\n\t\t\t\tclass=\"col-10 m-0\">\n\t\t\t</aril-text>\n\t\t\t@if (filteredNodes().length > 0) {\n\t\t\t<div class=\"col-2 flex align-items-center m-0 p-0\">\n\t\t\t\t\t<fa-icon\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesDown\"\n\t\t\t\t\t\tsize=\"xl\"\n\t\t\t\t\t\tstyle=\"color: var(--primary-color)\"\n\t\t\t\t\t\tclass=\"col-1 cursor-pointer\"\n\t\t\t\t\t\t[pTooltip]=\"t('expandAll')\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t(click)=\"expandAll()\">\n\t\t\t\t\t</fa-icon>\n\t\t\t\t\t<fa-icon\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesUp\"\n\t\t\t\t\t\tsize=\"xl\"\n\t\t\t\t\t\tstyle=\"color: var(--red-500)\"\n\t\t\t\t\t\tclass=\"col-1 ml-3 cursor-pointer\"\n\t\t\t\t\t\t[pTooltip]=\"t('collapseAll')\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t(click)=\"collapseAll()\">\n\t\t\t\t\t</fa-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t<!-- Site Map Tree -->\n\t\t@if (filteredNodes().length > 0) {\n\t\t\t<div class=\"sitemap-tree\">\n\t\t\t\t<p-scrollPanel [style]=\"{ width: '100%', height: '100%' }\">\n\t\t\t\t\t<div class=\"tree-container\">\n\t\t\t\t\t\t@for (node of filteredNodes(); track trackByKey($index, node)) {\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: node, level: 0 }\"></ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</p-scrollPanel>\n\t\t\t</div>\n\t\t} @else {\n\t\t\t<div class=\"empty-state\">\n\t\t\t\t<div class=\"empty-content\">\n\t\t\t\t\t<i class=\"pi pi-sitemap empty-icon\"></i>\n\t\t\t\t\t<h3 class=\"empty-title\">\n\t\t\t\t\t\t{{ searchTerm() ? t('noSearchResults') : t('noPages') }}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p class=\"empty-message\">\n\t\t\t\t\t\t{{ searchTerm() ? t('tryDifferentKeywords') : '' }}\n\t\t\t\t\t</p>\n\t\t\t\t\t@if (searchTerm()) {\n\t\t\t\t\t\t<aril-button\n\t\t\t\t\t\t\t[label]=\"t('clearSearch')\"\n\t\t\t\t\t\t\ticon=\"TIMES\"\n\t\t\t\t\t\t\tcolor=\"secondary\"\n\t\t\t\t\t\t\t[outlined]=\"true\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t(clickEvent)=\"searchTerm.set(''); onSearchChange()\">\n\t\t\t\t\t\t</aril-button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\n\t\t<!-- Recursive Tree Node Template -->\n\t\t<ng-template #treeNodeTemplate let-node let-level=\"level\">\n\t\t\t<div class=\"tree-node\" [style.margin-left.px]=\"level * 20\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"node-item\"\n\t\t\t\t\t[class.has-children]=\"node.children && node.children.length > 0\"\n\t\t\t\t\t[class.is-page]=\"node.routerLink\"\n\t\t\t\t\t[routerLink]=\"node.routerLink\"\n\t\t\t\t\t(click)=\"!node.routerLink ? toggleNode(node) : (visible = false)\">\n\t\t\t\t\t<div class=\"node-content\">\n\t\t\t\t\t\t@if (node.children && node.children.length > 0) {\n\t\t\t\t\t\t\t<div class=\"toggle-btn\" (click)=\"$event.stopPropagation(); toggleNode(node)\">\n\t\t\t\t\t\t\t\t<i class=\"pi\" [class.pi-chevron-right]=\"!node.expanded\" [class.pi-chevron-down]=\"node.expanded\"></i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (node.icon) {\n\t\t\t\t\t\t\t<i class=\"node-icon\" [class]=\"node.icon\"></i>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"node-label\">{{ node.label | translateJson }}</span>\n\n\t\t\t\t\t\t@if (node.routerLink) {\n\t\t\t\t\t\t\t<i class=\"external-icon pi pi-external-link\"></i>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Recursive Children -->\n\t\t\t\t@if (node.children && node.expanded) {\n\t\t\t\t\t@for (child of node.children; track trackByKey($index, child)) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: child, level: level + 1 }\"></ng-container>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</ng-template>\n\t</div>\n</p-sidebar>\n", styles: [":host ::ng-deep .layout-sitemap-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem .5rem}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header .total-pages{background:#fff3;color:#ffffffe6;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500}.sitemap-content{display:flex;flex-direction:column;height:100%;background:var(--surface-ground)}.search-section{padding:1rem;border-bottom:1px solid var(--surface-border);background:var(--surface-0)}.sitemap-tree{flex:1;overflow:hidden}.tree-container{padding:.5rem 0}.tree-node .node-item{display:flex;align-items:center;padding:.5rem 1rem;border-radius:6px;margin:.1rem .5rem;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.tree-node .node-item:hover{background:var(--surface-hover);border-color:var(--surface-border)}.tree-node .node-item.is-page:hover{background:var(--primary-50);border-color:var(--primary-200)}.tree-node .node-item.is-page:hover .external-icon{opacity:1}.tree-node .node-item.has-children{font-weight:500}.tree-node .node-content{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.tree-node .toggle-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;border-radius:4px;color:var(--text-color-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0}.tree-node .toggle-btn:hover{background:var(--surface-hover);color:var(--primary-color)}.tree-node .toggle-btn i{font-size:.7rem}.tree-node .node-icon{color:var(--primary-color);font-size:.9rem;flex-shrink:0}.tree-node .node-label{flex:1;font-size:.9rem;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-node .external-icon{color:var(--text-color-secondary);font-size:.7rem;opacity:.6;transition:opacity .2s ease;flex-shrink:0}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.empty-content{text-align:center;max-width:300px}.empty-icon{font-size:3rem;color:var(--text-color-secondary);margin-bottom:1rem;opacity:.5}.empty-message{font-size:.9rem;color:var(--text-color-secondary);line-height:1.4;margin-bottom:1.5rem}:host ::ng-deep .p-scrollpanel-bar-y{background:var(--primary-200);width:4px;border-radius:2px}:host ::ng-deep .p-scrollpanel-bar-y:hover{background:var(--primary-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i6$1.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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ScrollPanelModule }, { kind: "component", type: i7$1.ScrollPanel, selector: "p-scrollPanel", inputs: ["style", "styleClass", "step"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }, { kind: "component", type: TextComponent, selector: "aril-text[ngModel], aril-text[formControl], aril-text[formControlName]", inputs: ["placeholder", "tabindex", "icon", "iconPos", "size"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslateJsonPipe, name: "translateJson" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i10.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SiteMapSidebarComponent, decorators: [{
             type: Component,
@@ -1136,7 +1137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         TranslocoModule,
                         TranslateJsonPipe,
                         FontAwesomeModule
-                    ], template: "<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-sitemap-sidebar w-full sm:w-30rem\"\r\n\t*transloco=\"let t; read: 'siteMap'\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"flex align-items-center justify-content-between gap-2 w-full\">\r\n\t\t\t<div class=\"flex align-items-center gap-2\">\r\n\t\t\t\t<i class=\"pi pi-sitemap text-primary text-xl\"></i>\r\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('siteMap') }}</span>\r\n\t\t\t\t<span class=\"total-pages\">{{ totalPages() }} {{ t('pages') }}</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<div class=\"sitemap-content\">\r\n\t\t<div class=\"search-section grid p-fluid m-0\">\r\n\t\t\t<aril-text\r\n\t\t\t\t[placeholder]=\"t('searchPages')\"\r\n\t\t\t\t[(ngModel)]=\"searchTerm\"\r\n\t\t\t\t(ngModelChange)=\"onSearchChange()\"\r\n\t\t\t\tclass=\"col-10 m-0\">\r\n\t\t\t</aril-text>\r\n\t\t\t@if (filteredNodes().length > 0) {\r\n\t\t\t<div class=\"col-2 flex align-items-center m-0 p-0\">\r\n\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesDown\"\r\n\t\t\t\t\t\tsize=\"xl\"\r\n\t\t\t\t\t\tstyle=\"color: var(--primary-color)\"\r\n\t\t\t\t\t\tclass=\"col-1 cursor-pointer\"\r\n\t\t\t\t\t\t[pTooltip]=\"t('expandAll')\"\r\n\t\t\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t\t\t\t(click)=\"expandAll()\">\r\n\t\t\t\t\t</fa-icon>\r\n\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesUp\"\r\n\t\t\t\t\t\tsize=\"xl\"\r\n\t\t\t\t\t\tstyle=\"color: var(--red-500)\"\r\n\t\t\t\t\t\tclass=\"col-1 ml-3 cursor-pointer\"\r\n\t\t\t\t\t\t[pTooltip]=\"t('collapseAll')\"\r\n\t\t\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t\t\t\t(click)=\"collapseAll()\">\r\n\t\t\t\t\t</fa-icon>\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\t\t</div>\r\n\r\n\t\t<!-- Site Map Tree -->\r\n\t\t@if (filteredNodes().length > 0) {\r\n\t\t\t<div class=\"sitemap-tree\">\r\n\t\t\t\t<p-scrollPanel [style]=\"{ width: '100%', height: '100%' }\">\r\n\t\t\t\t\t<div class=\"tree-container\">\r\n\t\t\t\t\t\t@for (node of filteredNodes(); track trackByKey($index, node)) {\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: node, level: 0 }\"></ng-container>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</p-scrollPanel>\r\n\t\t\t</div>\r\n\t\t} @else {\r\n\t\t\t<div class=\"empty-state\">\r\n\t\t\t\t<div class=\"empty-content\">\r\n\t\t\t\t\t<i class=\"pi pi-sitemap empty-icon\"></i>\r\n\t\t\t\t\t<h3 class=\"empty-title\">\r\n\t\t\t\t\t\t{{ searchTerm() ? t('noSearchResults') : t('noPages') }}\r\n\t\t\t\t\t</h3>\r\n\t\t\t\t\t<p class=\"empty-message\">\r\n\t\t\t\t\t\t{{ searchTerm() ? t('tryDifferentKeywords') : '' }}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t@if (searchTerm()) {\r\n\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t[label]=\"t('clearSearch')\"\r\n\t\t\t\t\t\t\ticon=\"TIMES\"\r\n\t\t\t\t\t\t\tcolor=\"secondary\"\r\n\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t\t(clickEvent)=\"searchTerm.set(''); onSearchChange()\">\r\n\t\t\t\t\t\t</aril-button>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t}\r\n\r\n\t\t<!-- Recursive Tree Node Template -->\r\n\t\t<ng-template #treeNodeTemplate let-node let-level=\"level\">\r\n\t\t\t<div class=\"tree-node\" [style.margin-left.px]=\"level * 20\">\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"node-item\"\r\n\t\t\t\t\t[class.has-children]=\"node.children && node.children.length > 0\"\r\n\t\t\t\t\t[class.is-page]=\"node.routerLink\"\r\n\t\t\t\t\t[routerLink]=\"node.routerLink\"\r\n\t\t\t\t\t(click)=\"!node.routerLink ? toggleNode(node) : (visible = false)\">\r\n\t\t\t\t\t<div class=\"node-content\">\r\n\t\t\t\t\t\t@if (node.children && node.children.length > 0) {\r\n\t\t\t\t\t\t\t<div class=\"toggle-btn\" (click)=\"$event.stopPropagation(); toggleNode(node)\">\r\n\t\t\t\t\t\t\t\t<i class=\"pi\" [class.pi-chevron-right]=\"!node.expanded\" [class.pi-chevron-down]=\"node.expanded\"></i>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t@if (node.icon) {\r\n\t\t\t\t\t\t\t<i class=\"node-icon\" [class]=\"node.icon\"></i>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t<span class=\"node-label\">{{ node.label | translateJson }}</span>\r\n\r\n\t\t\t\t\t\t@if (node.routerLink) {\r\n\t\t\t\t\t\t\t<i class=\"external-icon pi pi-external-link\"></i>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<!-- Recursive Children -->\r\n\t\t\t\t@if (node.children && node.expanded) {\r\n\t\t\t\t\t@for (child of node.children; track trackByKey($index, child)) {\r\n\t\t\t\t\t\t<ng-container\r\n\t\t\t\t\t\t\t*ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: child, level: level + 1 }\"></ng-container>\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t</div>\r\n</p-sidebar>\r\n", styles: [":host ::ng-deep .layout-sitemap-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem .5rem}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header .total-pages{background:#fff3;color:#ffffffe6;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500}.sitemap-content{display:flex;flex-direction:column;height:100%;background:var(--surface-ground)}.search-section{padding:1rem;border-bottom:1px solid var(--surface-border);background:var(--surface-0)}.sitemap-tree{flex:1;overflow:hidden}.tree-container{padding:.5rem 0}.tree-node .node-item{display:flex;align-items:center;padding:.5rem 1rem;border-radius:6px;margin:.1rem .5rem;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.tree-node .node-item:hover{background:var(--surface-hover);border-color:var(--surface-border)}.tree-node .node-item.is-page:hover{background:var(--primary-50);border-color:var(--primary-200)}.tree-node .node-item.is-page:hover .external-icon{opacity:1}.tree-node .node-item.has-children{font-weight:500}.tree-node .node-content{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.tree-node .toggle-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;border-radius:4px;color:var(--text-color-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0}.tree-node .toggle-btn:hover{background:var(--surface-hover);color:var(--primary-color)}.tree-node .toggle-btn i{font-size:.7rem}.tree-node .node-icon{color:var(--primary-color);font-size:.9rem;flex-shrink:0}.tree-node .node-label{flex:1;font-size:.9rem;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-node .external-icon{color:var(--text-color-secondary);font-size:.7rem;opacity:.6;transition:opacity .2s ease;flex-shrink:0}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.empty-content{text-align:center;max-width:300px}.empty-icon{font-size:3rem;color:var(--text-color-secondary);margin-bottom:1rem;opacity:.5}.empty-message{font-size:.9rem;color:var(--text-color-secondary);line-height:1.4;margin-bottom:1.5rem}:host ::ng-deep .p-scrollpanel-bar-y{background:var(--primary-200);width:4px;border-radius:2px}:host ::ng-deep .p-scrollpanel-bar-y:hover{background:var(--primary-300)}\n"] }]
+                    ], template: "<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-sitemap-sidebar w-full sm:w-30rem\"\n\t*transloco=\"let t; read: 'siteMap'\">\n\t<ng-template pTemplate=\"header\">\n\t\t<div class=\"flex align-items-center justify-content-between gap-2 w-full\">\n\t\t\t<div class=\"flex align-items-center gap-2\">\n\t\t\t\t<i class=\"pi pi-sitemap text-primary text-xl\"></i>\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('siteMap') }}</span>\n\t\t\t\t<span class=\"total-pages\">{{ totalPages() }} {{ t('pages') }}</span>\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\n\t<div class=\"sitemap-content\">\n\t\t<div class=\"search-section grid p-fluid m-0\">\n\t\t\t<aril-text\n\t\t\t\t[placeholder]=\"t('searchPages')\"\n\t\t\t\t[(ngModel)]=\"searchTerm\"\n\t\t\t\t(ngModelChange)=\"onSearchChange()\"\n\t\t\t\tclass=\"col-10 m-0\">\n\t\t\t</aril-text>\n\t\t\t@if (filteredNodes().length > 0) {\n\t\t\t<div class=\"col-2 flex align-items-center m-0 p-0\">\n\t\t\t\t\t<fa-icon\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesDown\"\n\t\t\t\t\t\tsize=\"xl\"\n\t\t\t\t\t\tstyle=\"color: var(--primary-color)\"\n\t\t\t\t\t\tclass=\"col-1 cursor-pointer\"\n\t\t\t\t\t\t[pTooltip]=\"t('expandAll')\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t(click)=\"expandAll()\">\n\t\t\t\t\t</fa-icon>\n\t\t\t\t\t<fa-icon\n\t\t\t\t\t\t[icon]=\"solidIcons.faAnglesUp\"\n\t\t\t\t\t\tsize=\"xl\"\n\t\t\t\t\t\tstyle=\"color: var(--red-500)\"\n\t\t\t\t\t\tclass=\"col-1 ml-3 cursor-pointer\"\n\t\t\t\t\t\t[pTooltip]=\"t('collapseAll')\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t(click)=\"collapseAll()\">\n\t\t\t\t\t</fa-icon>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t<!-- Site Map Tree -->\n\t\t@if (filteredNodes().length > 0) {\n\t\t\t<div class=\"sitemap-tree\">\n\t\t\t\t<p-scrollPanel [style]=\"{ width: '100%', height: '100%' }\">\n\t\t\t\t\t<div class=\"tree-container\">\n\t\t\t\t\t\t@for (node of filteredNodes(); track trackByKey($index, node)) {\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: node, level: 0 }\"></ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</p-scrollPanel>\n\t\t\t</div>\n\t\t} @else {\n\t\t\t<div class=\"empty-state\">\n\t\t\t\t<div class=\"empty-content\">\n\t\t\t\t\t<i class=\"pi pi-sitemap empty-icon\"></i>\n\t\t\t\t\t<h3 class=\"empty-title\">\n\t\t\t\t\t\t{{ searchTerm() ? t('noSearchResults') : t('noPages') }}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p class=\"empty-message\">\n\t\t\t\t\t\t{{ searchTerm() ? t('tryDifferentKeywords') : '' }}\n\t\t\t\t\t</p>\n\t\t\t\t\t@if (searchTerm()) {\n\t\t\t\t\t\t<aril-button\n\t\t\t\t\t\t\t[label]=\"t('clearSearch')\"\n\t\t\t\t\t\t\ticon=\"TIMES\"\n\t\t\t\t\t\t\tcolor=\"secondary\"\n\t\t\t\t\t\t\t[outlined]=\"true\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t(clickEvent)=\"searchTerm.set(''); onSearchChange()\">\n\t\t\t\t\t\t</aril-button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\n\t\t<!-- Recursive Tree Node Template -->\n\t\t<ng-template #treeNodeTemplate let-node let-level=\"level\">\n\t\t\t<div class=\"tree-node\" [style.margin-left.px]=\"level * 20\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"node-item\"\n\t\t\t\t\t[class.has-children]=\"node.children && node.children.length > 0\"\n\t\t\t\t\t[class.is-page]=\"node.routerLink\"\n\t\t\t\t\t[routerLink]=\"node.routerLink\"\n\t\t\t\t\t(click)=\"!node.routerLink ? toggleNode(node) : (visible = false)\">\n\t\t\t\t\t<div class=\"node-content\">\n\t\t\t\t\t\t@if (node.children && node.children.length > 0) {\n\t\t\t\t\t\t\t<div class=\"toggle-btn\" (click)=\"$event.stopPropagation(); toggleNode(node)\">\n\t\t\t\t\t\t\t\t<i class=\"pi\" [class.pi-chevron-right]=\"!node.expanded\" [class.pi-chevron-down]=\"node.expanded\"></i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (node.icon) {\n\t\t\t\t\t\t\t<i class=\"node-icon\" [class]=\"node.icon\"></i>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"node-label\">{{ node.label | translateJson }}</span>\n\n\t\t\t\t\t\t@if (node.routerLink) {\n\t\t\t\t\t\t\t<i class=\"external-icon pi pi-external-link\"></i>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Recursive Children -->\n\t\t\t\t@if (node.children && node.expanded) {\n\t\t\t\t\t@for (child of node.children; track trackByKey($index, child)) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngTemplateOutlet=\"treeNodeTemplate; context: { $implicit: child, level: level + 1 }\"></ng-container>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</ng-template>\n\t</div>\n</p-sidebar>\n", styles: [":host ::ng-deep .layout-sitemap-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem .5rem}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}:host ::ng-deep .layout-sitemap-sidebar .p-sidebar-header .total-pages{background:#fff3;color:#ffffffe6;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500}.sitemap-content{display:flex;flex-direction:column;height:100%;background:var(--surface-ground)}.search-section{padding:1rem;border-bottom:1px solid var(--surface-border);background:var(--surface-0)}.sitemap-tree{flex:1;overflow:hidden}.tree-container{padding:.5rem 0}.tree-node .node-item{display:flex;align-items:center;padding:.5rem 1rem;border-radius:6px;margin:.1rem .5rem;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.tree-node .node-item:hover{background:var(--surface-hover);border-color:var(--surface-border)}.tree-node .node-item.is-page:hover{background:var(--primary-50);border-color:var(--primary-200)}.tree-node .node-item.is-page:hover .external-icon{opacity:1}.tree-node .node-item.has-children{font-weight:500}.tree-node .node-content{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.tree-node .toggle-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;border-radius:4px;color:var(--text-color-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0}.tree-node .toggle-btn:hover{background:var(--surface-hover);color:var(--primary-color)}.tree-node .toggle-btn i{font-size:.7rem}.tree-node .node-icon{color:var(--primary-color);font-size:.9rem;flex-shrink:0}.tree-node .node-label{flex:1;font-size:.9rem;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-node .external-icon{color:var(--text-color-secondary);font-size:.7rem;opacity:.6;transition:opacity .2s ease;flex-shrink:0}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.empty-content{text-align:center;max-width:300px}.empty-icon{font-size:3rem;color:var(--text-color-secondary);margin-bottom:1rem;opacity:.5}.empty-message{font-size:.9rem;color:var(--text-color-secondary);line-height:1.4;margin-bottom:1.5rem}:host ::ng-deep .p-scrollpanel-bar-y{background:var(--primary-200);width:4px;border-radius:2px}:host ::ng-deep .p-scrollpanel-bar-y:hover{background:var(--primary-300)}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: i5.TranslocoService }] });
 
 // API Endpoints
@@ -1710,7 +1711,7 @@ class GeneralSearchComponent {
         this.presentableData = getPresentableData(this.data, tab);
     }
     goToDetail(item) {
-        const isHostYeap = globalThis.activeHost === Apps.YEAP;
+        const isHostYeap = bridge.activeHost() === Apps.YEAP;
         if (isHostYeap) {
             this.router.navigate(['mng/master-data/view-md-data'], {
                 queryParams: { assetId: item.assetId }
@@ -1804,8 +1805,10 @@ class AppTopbarComponent {
         }
     }
     setLogoPath() {
-        if (globalThis.activeHost) {
-            switch (globalThis.activeHost) {
+        const activeHost = bridge.activeHost();
+        const activeMF = bridge.activeMF();
+        if (activeHost) {
+            switch (activeHost) {
                 case Apps.YEAP:
                     this.logoPath = 'assets/images/yeap-logo-dark.png';
                     break;
@@ -1820,7 +1823,7 @@ class AppTopbarComponent {
             }
         }
         else {
-            switch (globalThis.activeMF) {
+            switch (activeMF) {
                 case Apps.HES:
                 case Apps.CTS:
                 case Apps.SIS:
@@ -1923,8 +1926,6 @@ class ExpandableMenuComponent {
         this.http = http;
         this.overlayMenuOpenSubscription = null;
         this.routerSubscription = null;
-        this.isHostMode = globalThis.isHostMode;
-        this.hostMenuItems = globalThis.hostMenuItems;
         this.cachedMenuItems = [];
         this.selectedMainMenuItem = null;
         this.tooltipText = {
@@ -2044,7 +2045,7 @@ class ExpandableMenuComponent {
         }
     }
     updateMenuItems() {
-        this.cachedMenuItems = this.isHostMode ? this.hostMenuItems() : this.menuService.menuItems();
+        this.cachedMenuItems = bridge.isHostMode() ? bridge.hostMenuItems() : this.menuService.menuItems();
     }
     getMenuItems() {
         return this.cachedMenuItems;
@@ -2296,9 +2297,7 @@ class StaticSidebarComponent {
         });
     }
     getMenuItems() {
-        const isHostMode = globalThis.isHostMode;
-        const hostMenuItems = globalThis.hostMenuItems;
-        return isHostMode ? hostMenuItems() : this.menuService.menuItems();
+        return bridge.isHostMode() ? bridge.hostMenuItems() : this.menuService.menuItems();
     }
     getLocalText(text) {
         return this.translateJsonPipe.transform(text);
@@ -2658,7 +2657,6 @@ class AppLayoutComponent {
         this.layoutService = layoutService;
         this.renderer = renderer;
         this.router = router;
-        this.globalThis = globalThis;
         this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
             if (!this.menuOutsideClickListener) {
                 this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
@@ -2833,10 +2831,10 @@ class AppBreadcrumbComponent {
             }));
             this.breadcrumbs.unshift({ icon: 'pi pi-home', url: '/' });
             // Update global page title signal with the last breadcrumb label
-            const pageTitle = globalThis.__ARIL_PAGE_TITLE__?.();
+            const pageTitle = bridge.pageTitle();
             if (pageTitle) {
                 const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
-                pageTitle.set(lastBreadcrumb?.label || '');
+                bridge.pageTitle.set(lastBreadcrumb?.label || '');
             }
             const currentUrl = this.router.url;
             this.pubSubService.publish({