aril 1.2.24 → 1.2.25

package/theme/layout/app/breadcrumb/app.breadcrumb.component.ts

@@ -1,127 +1,127 @@
-import { NgClass } from '@angular/common';
-import { Component, effect } from '@angular/core';
-import { ActivatedRouteSnapshot, NavigationEnd, Router, RouterLink } from '@angular/router';
-
-import { MenuItem } from 'primeng/api';
-import { BreadcrumbModule } from 'primeng/breadcrumb';
-
-import { BehaviorSubject, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-
-import { bridge } from 'aril/boot/bridge';
-import { PubSubService } from 'aril/util/pub-sub';
-import { BreadcrumbService } from '../../service/breadcrumb.service';
-
-interface Breadcrumb {
-	label: string;
-	url?: string;
-}
-
-@Component({
-	standalone: true,
-	selector: 'app-breadcrumb',
-	imports: [RouterLink, BreadcrumbModule, NgClass],
-	templateUrl: './app.breadcrumb.component.html'
-})
-export class AppBreadcrumbComponent {
-	private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
-	private breadcrumbsSubscription!: Subscription;
-
-	readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
-	breadcrumbs: MenuItem[] = [];
-
-	constructor(
-		private router: Router,
-		private breadcrumbService: BreadcrumbService,
-		private pubSubService: PubSubService
-	) {
-		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
-			const root = this.router.routerState.snapshot.root;
-			const breadcrumbs: Breadcrumb[] = [];
-
-			this.addBreadcrumb(root, [], breadcrumbs);
-
-			this._breadcrumbs$.next(breadcrumbs);
-		});
-
-		effect(() => {
-			if (this.breadcrumbService.keyValues()) {
-				const root = this.router.routerState.snapshot.root;
-				const breadcrumbs: Breadcrumb[] = [];
-
-				this.addBreadcrumb(root, [], breadcrumbs);
-
-				this._breadcrumbs$.next(breadcrumbs);
-			}
-		});
-	}
-
-	ngOnInit() {
-		this.breadcrumbsSubscription = this.breadcrumbs$.subscribe((breadcrumbs) => {
-			this.breadcrumbs = breadcrumbs.map((breadcrumb) => ({
-				label: breadcrumb.label,
-				url: breadcrumb.url
-			}));
-			this.breadcrumbs.unshift({ icon: 'pi pi-home', url: '/' });
-			
-			// Update global page title signal with the last breadcrumb label
-			const pageTitle = bridge.pageTitle();
-			if (pageTitle) {
-					const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
-					bridge.pageTitle.set(lastBreadcrumb?.label || '');
-			}
-
-			const currentUrl = this.router.url;
-			this.pubSubService.publish({
-				name: 'breadcrumbUpdated',
-				data: { 
-					path: currentUrl,
-					custom: {
-						breadcrumbs: breadcrumbs,
-						pageTitle: breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].label : ''
-					}
-				}
-			});
-		});
-	}
-
-	ngOnDestroy() {
-		if (this.breadcrumbsSubscription) {
-			this.breadcrumbsSubscription.unsubscribe();
-		}
-	}
-
-	private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
-		const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
-		const breadcrumb = route.data['breadcrumb'];
-		const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
-
-		if (breadcrumb && breadcrumb !== parentBreadcrumb) {
-			const keyRegex = new RegExp('(?<=\\{)([^}]+)(?=\\})');
-			const key = (keyRegex.exec(route.data['breadcrumb']) || [])[0]!;
-			const value = this.breadcrumbService.getValue(key);
-
-			if (key && value) {
-				breadcrumbs.push({
-					label: (route.data['breadcrumb'] as string).replace(`{${key}}`, value),
-					url: '/' + routeUrl.join('/')
-				});
-			} else if (key && !value) {
-				// Key exists but value not loaded yet - show loading placeholder
-				breadcrumbs.push({
-					label: '...',
-					url: '/' + routeUrl.join('/')
-				});
-			} else {
-				breadcrumbs.push({
-					label: route.data['breadcrumb'],
-					url: '/' + routeUrl.join('/')
-				});
-			}
-		}
-
-		if (route.firstChild) {
-			this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
-		}
-	}
-}
+import { NgClass } from '@angular/common';
+import { Component, effect } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router, RouterLink } from '@angular/router';
+
+import { MenuItem } from 'primeng/api';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+import { bridge } from 'aril/boot/bridge';
+import { PubSubService } from 'aril/util/pub-sub';
+import { BreadcrumbService } from '../../service/breadcrumb.service';
+
+interface Breadcrumb {
+	label: string;
+	url?: string;
+}
+
+@Component({
+	standalone: true,
+	selector: 'app-breadcrumb',
+	imports: [RouterLink, BreadcrumbModule, NgClass],
+	templateUrl: './app.breadcrumb.component.html'
+})
+export class AppBreadcrumbComponent {
+	private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+	private breadcrumbsSubscription!: Subscription;
+
+	readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+	breadcrumbs: MenuItem[] = [];
+
+	constructor(
+		private router: Router,
+		private breadcrumbService: BreadcrumbService,
+		private pubSubService: PubSubService
+	) {
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+			const root = this.router.routerState.snapshot.root;
+			const breadcrumbs: Breadcrumb[] = [];
+
+			this.addBreadcrumb(root, [], breadcrumbs);
+
+			this._breadcrumbs$.next(breadcrumbs);
+		});
+
+		effect(() => {
+			if (this.breadcrumbService.keyValues()) {
+				const root = this.router.routerState.snapshot.root;
+				const breadcrumbs: Breadcrumb[] = [];
+
+				this.addBreadcrumb(root, [], breadcrumbs);
+
+				this._breadcrumbs$.next(breadcrumbs);
+			}
+		});
+	}
+
+	ngOnInit() {
+		this.breadcrumbsSubscription = this.breadcrumbs$.subscribe((breadcrumbs) => {
+			this.breadcrumbs = breadcrumbs.map((breadcrumb) => ({
+				label: breadcrumb.label,
+				url: breadcrumb.url
+			}));
+			this.breadcrumbs.unshift({ icon: 'pi pi-home', url: '/' });
+			
+			// Update global page title signal with the last breadcrumb label
+			const pageTitle = bridge.pageTitle();
+			if (pageTitle) {
+					const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
+					bridge.pageTitle.set(lastBreadcrumb?.label || '');
+			}
+
+			const currentUrl = this.router.url;
+			this.pubSubService.publish({
+				name: 'breadcrumbUpdated',
+				data: { 
+					path: currentUrl,
+					custom: {
+						breadcrumbs: breadcrumbs,
+						pageTitle: breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].label : ''
+					}
+				}
+			});
+		});
+	}
+
+	ngOnDestroy() {
+		if (this.breadcrumbsSubscription) {
+			this.breadcrumbsSubscription.unsubscribe();
+		}
+	}
+
+	private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
+		const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
+		const breadcrumb = route.data['breadcrumb'];
+		const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+		if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+			const keyRegex = new RegExp('(?<=\\{)([^}]+)(?=\\})');
+			const key = (keyRegex.exec(route.data['breadcrumb']) || [])[0]!;
+			const value = this.breadcrumbService.getValue(key);
+
+			if (key && value) {
+				breadcrumbs.push({
+					label: (route.data['breadcrumb'] as string).replace(`{${key}}`, value),
+					url: '/' + routeUrl.join('/')
+				});
+			} else if (key && !value) {
+				// Key exists but value not loaded yet - show loading placeholder
+				breadcrumbs.push({
+					label: '...',
+					url: '/' + routeUrl.join('/')
+				});
+			} else {
+				breadcrumbs.push({
+					label: route.data['breadcrumb'],
+					url: '/' + routeUrl.join('/')
+				});
+			}
+		}
+
+		if (route.firstChild) {
+			this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+		}
+	}
+}

package/theme/layout/app/expandableMenu/expandable-menu.component.html

@@ -1,137 +1,137 @@
-<div class="new-layout-sidebar" >
-	<!-- Main sidebar (first level) -->
-	<div class="main-sidebar" style="position: relative;">
-		<div class="main-sidebar-content">
-			<ul class="main-menu">
-				@for(item of getMenuItems(); track item; let i = $index){
-					@if(!item.separator){
-						<li
-						[ngClass]="{'active': isActiveRoute(item) || isHaveSelectedChildItem(item)}"
-						(click)="selectMainItem(i, item)"
-						[pTooltip]="(item.label && activeLang() ? item.label[activeLang()!] || '' : '')"
-						tooltipPosition="right">
-						<div class="main-menu-item">
-							<i [ngClass]="item.icon" class="menu-icon"></i>
-							<!-- <small class="menu-label">{{ item.label && activeLang() ? item.label[activeLang()!] || '' : '' }}</small> -->
-						</div>
-					</li>
-					}
-				}
-			</ul>
-		</div>
-	</div>
-		 @if(selectedMainMenuItem && selectedMainMenuItem.items && selectedMainMenuItem.items.length > 0){
-
-			 <div class="sidebar-toggle-container">
-				 <button class="sidebar-circle-toggle-btn" (click)="toggleSidebar()">
-					 <i class="pi" [ngClass]="sidebarExpanded ? 'pi-angle-left' : 'pi-angle-right'"></i>
-				 </button>
-			 </div>
-		 }
-
-	<!-- Secondary sidebar (second level) -->
-	<div class="secondary-sidebar" [ngClass]="{'expanded': sidebarExpanded}">
-		<div class="secondary-content-wrapper" style="position: relative;">
-			<!-- Secondary sidebar content -->
-			<div class="secondary-sidebar-content">
-				@if(selectedMainMenuItem){
-					<ul class="secondary-menu">
-						@for(subItem of selectedMainMenuItem.items; track subItem; let i = $index){
-								<!-- Action menu item -->
-								@if(subItem.action) {
-									<li class="secondary-menu-item" [ngClass]="{'action-loading': isActionLoading(subItem)}">
-										<a class="secondary-menu-link is-action"
-											(click)="onActionItemClick(subItem, $event)"
-											[pTooltip]="!isMobile() && isTextTruncated(subItem.label, activeLang(), 'secondary') ? (subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '') : ''"
-											tooltipPosition="right">
-											@if(isActionLoading(subItem)){
-												<i class="submenu-icon pi pi-spin pi-spinner"></i>
-											} @else {
-												<i [ngClass]="subItem.icon" class="submenu-icon"></i>
-											}
-											<span class="submenu-label">{{ subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '' }}</span>
-										</a>
-									</li>
-								} @else {
-								<!-- Regular menu item -->
-								<li class="secondary-menu-item" [ngClass]="{'active': isActiveRoute(subItem)}">
-									<a [routerLink]="subItem.routerLink" 
-										class="secondary-menu-link"
-										[pTooltip]="!isMobile() && isTextTruncated(subItem.label, activeLang(), 'secondary') ? (subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '') : ''"
-										tooltipPosition="right">
-										<i [ngClass]="subItem.icon" class="submenu-icon"></i>
-										<span class="submenu-label">{{ subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '' }}</span>
-									</a>
-									<!-- Always render submenu if it exists -->
-									 @if(subItem.items && subItem.items.length > 0){
-										 <ul class="tertiary-menu always-open">
-											@for(childItem of subItem.items; track childItem; let i = $index){
-												<!-- Action item at tertiary level -->
-												@if(childItem.action) {
-													<li class="tertiary-menu-item" [ngClass]="{'action-loading': isActionLoading(childItem)}">
-														<a class="tertiary-menu-link is-action"
-															(click)="onActionItemClick(childItem, $event)"
-															[pTooltip]="!isMobile() && isTextTruncated(childItem.label, activeLang(), 'tertiary') ? (childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '') : ''"
-															tooltipPosition="right">
-															@if(isActionLoading(childItem)){
-																<span class="tertiary-label"><i class="pi pi-spin pi-spinner"></i> {{ childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '' }}</span>
-															} @else {
-																<span class="tertiary-label">{{ childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '' }}</span>
-															}
-														</a>
-													</li>
-												} @else {
-												<li class="tertiary-menu-item" [ngClass]="{'active': isActiveRoute(childItem)}">
-													<a [routerLink]="childItem.routerLink" 
-														class="tertiary-menu-link"
-														[pTooltip]="!isMobile() && isTextTruncated(childItem.label, activeLang(), 'tertiary') ? (childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '') : ''"
-														tooltipPosition="right">
-														<span class="tertiary-label">{{ childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '' }}</span>
-													</a>
-													<!-- Always render deeper levels if they exist, also visible by default -->
-													@if(childItem.items && childItem.items.length > 0){
-														<ul class="nested-menu always-open">
-															@for(nestedItem of childItem.items; track nestedItem; let i = $index){
-																@if(nestedItem.action) {
-																	<li class="nested-menu-item" [ngClass]="{'action-loading': isActionLoading(nestedItem)}">
-																		<a class="nested-menu-link is-action"
-																			(click)="onActionItemClick(nestedItem, $event)"
-																			[pTooltip]="!isMobile() && isTextTruncated(nestedItem.label, activeLang(), 'nested') ? (nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '') : ''"
-																			tooltipPosition="right">
-																			@if(isActionLoading(nestedItem)){
-																				<span class="nested-label"><i class="pi pi-spin pi-spinner"></i> {{ nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '' }}</span>
-																			} @else {
-																				<span class="nested-label">{{ nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '' }}</span>
-																			}
-																		</a>
-																	</li>
-																} @else {
-																<li 
-																	class="nested-menu-item"
-																	[ngClass]="{'active': isActiveRoute(nestedItem)}">
-																	<a [routerLink]="nestedItem.routerLink" 
-																		class="nested-menu-link"
-																		[pTooltip]="!isMobile() && isTextTruncated(nestedItem.label, activeLang(), 'nested') ? (nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '') : ''"
-																		tooltipPosition="right">
-																		<span class="nested-label">{{ nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '' }}</span>
-																	</a>
-																</li>
-																}
-															}
-														</ul>
-													}
-												</li>
-												}
-											}
-										 </ul>
-									 }
-								</li>
-								}
-						}
-					</ul>
-				}
-			</div>
-		</div>
-	</div>
-	
-</div>
+<div class="new-layout-sidebar" >
+	<!-- Main sidebar (first level) -->
+	<div class="main-sidebar" style="position: relative;">
+		<div class="main-sidebar-content">
+			<ul class="main-menu">
+				@for(item of getMenuItems(); track item; let i = $index){
+					@if(!item.separator){
+						<li
+						[ngClass]="{'active': isActiveRoute(item) || isHaveSelectedChildItem(item)}"
+						(click)="selectMainItem(i, item)"
+						[pTooltip]="(item.label && activeLang() ? item.label[activeLang()!] || '' : '')"
+						tooltipPosition="right">
+						<div class="main-menu-item">
+							<i [ngClass]="item.icon" class="menu-icon"></i>
+							<!-- <small class="menu-label">{{ item.label && activeLang() ? item.label[activeLang()!] || '' : '' }}</small> -->
+						</div>
+					</li>
+					}
+				}
+			</ul>
+		</div>
+	</div>
+		 @if(selectedMainMenuItem && selectedMainMenuItem.items && selectedMainMenuItem.items.length > 0){
+
+			 <div class="sidebar-toggle-container">
+				 <button class="sidebar-circle-toggle-btn" (click)="toggleSidebar()">
+					 <i class="pi" [ngClass]="sidebarExpanded ? 'pi-angle-left' : 'pi-angle-right'"></i>
+				 </button>
+			 </div>
+		 }
+
+	<!-- Secondary sidebar (second level) -->
+	<div class="secondary-sidebar" [ngClass]="{'expanded': sidebarExpanded}">
+		<div class="secondary-content-wrapper" style="position: relative;">
+			<!-- Secondary sidebar content -->
+			<div class="secondary-sidebar-content">
+				@if(selectedMainMenuItem){
+					<ul class="secondary-menu">
+						@for(subItem of selectedMainMenuItem.items; track subItem; let i = $index){
+								<!-- Action menu item -->
+								@if(subItem.action) {
+									<li class="secondary-menu-item" [ngClass]="{'action-loading': isActionLoading(subItem)}">
+										<a class="secondary-menu-link is-action"
+											(click)="onActionItemClick(subItem, $event)"
+											[pTooltip]="!isMobile() && isTextTruncated(subItem.label, activeLang(), 'secondary') ? (subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '') : ''"
+											tooltipPosition="right">
+											@if(isActionLoading(subItem)){
+												<i class="submenu-icon pi pi-spin pi-spinner"></i>
+											} @else {
+												<i [ngClass]="subItem.icon" class="submenu-icon"></i>
+											}
+											<span class="submenu-label">{{ subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '' }}</span>
+										</a>
+									</li>
+								} @else {
+								<!-- Regular menu item -->
+								<li class="secondary-menu-item" [ngClass]="{'active': isActiveRoute(subItem)}">
+									<a [routerLink]="subItem.routerLink" 
+										class="secondary-menu-link"
+										[pTooltip]="!isMobile() && isTextTruncated(subItem.label, activeLang(), 'secondary') ? (subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '') : ''"
+										tooltipPosition="right">
+										<i [ngClass]="subItem.icon" class="submenu-icon"></i>
+										<span class="submenu-label">{{ subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '' }}</span>
+									</a>
+									<!-- Always render submenu if it exists -->
+									 @if(subItem.items && subItem.items.length > 0){
+										 <ul class="tertiary-menu always-open">
+											@for(childItem of subItem.items; track childItem; let i = $index){
+												<!-- Action item at tertiary level -->
+												@if(childItem.action) {
+													<li class="tertiary-menu-item" [ngClass]="{'action-loading': isActionLoading(childItem)}">
+														<a class="tertiary-menu-link is-action"
+															(click)="onActionItemClick(childItem, $event)"
+															[pTooltip]="!isMobile() && isTextTruncated(childItem.label, activeLang(), 'tertiary') ? (childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '') : ''"
+															tooltipPosition="right">
+															@if(isActionLoading(childItem)){
+																<span class="tertiary-label"><i class="pi pi-spin pi-spinner"></i> {{ childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '' }}</span>
+															} @else {
+																<span class="tertiary-label">{{ childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '' }}</span>
+															}
+														</a>
+													</li>
+												} @else {
+												<li class="tertiary-menu-item" [ngClass]="{'active': isActiveRoute(childItem)}">
+													<a [routerLink]="childItem.routerLink" 
+														class="tertiary-menu-link"
+														[pTooltip]="!isMobile() && isTextTruncated(childItem.label, activeLang(), 'tertiary') ? (childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '') : ''"
+														tooltipPosition="right">
+														<span class="tertiary-label">{{ childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '' }}</span>
+													</a>
+													<!-- Always render deeper levels if they exist, also visible by default -->
+													@if(childItem.items && childItem.items.length > 0){
+														<ul class="nested-menu always-open">
+															@for(nestedItem of childItem.items; track nestedItem; let i = $index){
+																@if(nestedItem.action) {
+																	<li class="nested-menu-item" [ngClass]="{'action-loading': isActionLoading(nestedItem)}">
+																		<a class="nested-menu-link is-action"
+																			(click)="onActionItemClick(nestedItem, $event)"
+																			[pTooltip]="!isMobile() && isTextTruncated(nestedItem.label, activeLang(), 'nested') ? (nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '') : ''"
+																			tooltipPosition="right">
+																			@if(isActionLoading(nestedItem)){
+																				<span class="nested-label"><i class="pi pi-spin pi-spinner"></i> {{ nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '' }}</span>
+																			} @else {
+																				<span class="nested-label">{{ nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '' }}</span>
+																			}
+																		</a>
+																	</li>
+																} @else {
+																<li 
+																	class="nested-menu-item"
+																	[ngClass]="{'active': isActiveRoute(nestedItem)}">
+																	<a [routerLink]="nestedItem.routerLink" 
+																		class="nested-menu-link"
+																		[pTooltip]="!isMobile() && isTextTruncated(nestedItem.label, activeLang(), 'nested') ? (nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '') : ''"
+																		tooltipPosition="right">
+																		<span class="nested-label">{{ nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '' }}</span>
+																	</a>
+																</li>
+																}
+															}
+														</ul>
+													}
+												</li>
+												}
+											}
+										 </ul>
+									 }
+								</li>
+								}
+						}
+					</ul>
+				}
+			</div>
+		</div>
+	</div>
+	
+</div>