aril 1.1.64 → 1.1.65

package/theme/layout/app/site-map/site-map-sidebar.component.ts

@@ -1,193 +1,193 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnInit, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-import { ScrollPanelModule } from 'primeng/scrollpanel';
-import { SidebarModule } from 'primeng/sidebar';
-import { TooltipModule } from 'primeng/tooltip';
-
-import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-
-import { ButtonComponent } from 'aril/ui/button';
-import { TextComponent } from 'aril/ui/text';
-import { TranslateJsonPipe } from 'aril/util/pipes';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { solidIcons } from 'aril/util/lib';
-
-interface MenuNode {
-	key: string;
-	label: string | object;
-	icon?: string;
-	routerLink?: string;
-	children?: MenuNode[];
-	expanded?: boolean;
-}
-
-@Component({
-	standalone: true,
-	selector: 'app-site-map-sidebar',
-	imports: [
-		CommonModule,
-		FormsModule,
-		RouterModule,
-		SidebarModule,
-		ScrollPanelModule,
-		TooltipModule,
-		ButtonComponent,
-		TextComponent,
-		TranslocoModule,
-		TranslateJsonPipe,
-		FontAwesomeModule
-	],
-	templateUrl: './site-map-sidebar.component.html',
-	styleUrls: ['./site-map-sidebar.component.scss']
-})
-export class SiteMapSidebarComponent implements OnInit {
-	siteMapNodes = signal<MenuNode[]>([]);
-	filteredNodes = signal<MenuNode[]>([]);
-	searchTerm = signal<string>('');
-	totalPages = signal<number>(0);
-  solidIcons = solidIcons;
-	
-	constructor(
-		public layoutService: LayoutService,
-		private translocoService: TranslocoService
-	) {}
-
-	ngOnInit(): void {
-		this.loadSiteMap();
-	}
-
-	get visible(): boolean {
-		return this.layoutService.state.siteMapSidebarVisible;
-	}
-
-	set visible(value: boolean) {
-		this.layoutService.state.siteMapSidebarVisible = value;
-	}
-
-	private loadSiteMap(): void {
-		const menuItems = (<any>globalThis).hostMenuItems?.() || [];
-		const nodes = this.buildSiteMapNodes(menuItems);
-		const totalCount = this.countTotalPages(nodes);
-
-		this.siteMapNodes.set(nodes);
-		this.filteredNodes.set(nodes);
-		this.totalPages.set(totalCount);
-	}
-
-	private buildSiteMapNodes(items: any[], parentKey = ''): MenuNode[] {
-		return items
-			.filter((item) => {
-				// Keep the home page route ("/") and any non-empty routes
-				return !item.routerLink || item.routerLink === '/' || item.routerLink.trim() !== '';
-			})
-			.map((item, index) => {
-				const key = parentKey ? `${parentKey}-${index}` : `${index}`;
-
-				let label: string | object;
-				if (item.routerLink === '/') {
-					label = { tr: 'Anasayfa', en: 'Home' };
-				} else {
-					label = item.label || { tr: 'Bilinmeyen', en: 'Unknown' };
-				}
-
-				const node: MenuNode = {
-					key,
-					label,
-					icon: item.icon,
-					routerLink: item.routerLink,
-					expanded: false
-				};
-
-				if (item.items && item.items.length > 0) {
-					node.children = this.buildSiteMapNodes(item.items, key);
-				}
-
-				return node;
-			});
-	}
-
-	private countTotalPages(nodes: MenuNode[]): number {
-		let count = 0;
-		for (const node of nodes) {
-			if (node.routerLink) {
-				count++;
-			}
-			if (node.children) {
-				count += this.countTotalPages(node.children);
-			}
-		}
-		return count;
-	}
-
-	onSearchChange(): void {
-		const searchTerm = this.searchTerm()?.toLowerCase()?.trim();
-		if (!searchTerm) {
-			this.filteredNodes.set(this.siteMapNodes());
-		} else {
-			const filtered = this.filterNodes(this.siteMapNodes(), searchTerm);
-			this.filteredNodes.set(filtered);
-		}
-	}
-
-	private filterNodes(nodes: MenuNode[], searchTerm: string): MenuNode[] {
-		const filtered: MenuNode[] = [];
-		const currentLang = this.translocoService.getActiveLang();
-
-		for (const node of nodes) {
-			// Convert label to string for search based on active language
-			const labelText =
-				typeof node.label === 'string' ?
-					node.label
-				:	(node.label as any)?.[currentLang] || (node.label as any)?.tr || (node.label as any)?.en || '';
-
-			const matches = labelText.toLowerCase().includes(searchTerm);
-			let filteredChildren: MenuNode[] = [];
-
-			if (node.children) {
-				filteredChildren = this.filterNodes(node.children, searchTerm);
-			}
-
-			if (matches || filteredChildren.length > 0) {
-				filtered.push({
-					...node,
-					children: filteredChildren.length > 0 ? filteredChildren : node.children,
-					expanded: filteredChildren.length > 0
-				});
-			}
-		}
-
-		return filtered;
-	}
-
-	expandAll(): void {
-		const expanded = this.expandNodes(this.filteredNodes(), true);
-		this.filteredNodes.set([...expanded]);
-	}
-
-	collapseAll(): void {
-		const collapsed = this.expandNodes(this.filteredNodes(), false);
-		this.filteredNodes.set([...collapsed]);
-	}
-
-	private expandNodes(nodes: MenuNode[], expanded: boolean): MenuNode[] {
-		return nodes.map((node) => ({
-			...node,
-			expanded,
-			children: node.children ? this.expandNodes(node.children, expanded) : undefined
-		}));
-	}
-
-	toggleNode(node: MenuNode): void {
-		node.expanded = !node.expanded;
-		this.filteredNodes.set([...this.filteredNodes()]);
-	}
-
-	trackByKey(index: number, node: MenuNode): string {
-		return node.key || `${index}`;
-	}
-}
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { SidebarModule } from 'primeng/sidebar';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+
+import { ButtonComponent } from 'aril/ui/button';
+import { TextComponent } from 'aril/ui/text';
+import { TranslateJsonPipe } from 'aril/util/pipes';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { solidIcons } from 'aril/util/lib';
+
+interface MenuNode {
+	key: string;
+	label: string | object;
+	icon?: string;
+	routerLink?: string;
+	children?: MenuNode[];
+	expanded?: boolean;
+}
+
+@Component({
+	standalone: true,
+	selector: 'app-site-map-sidebar',
+	imports: [
+		CommonModule,
+		FormsModule,
+		RouterModule,
+		SidebarModule,
+		ScrollPanelModule,
+		TooltipModule,
+		ButtonComponent,
+		TextComponent,
+		TranslocoModule,
+		TranslateJsonPipe,
+		FontAwesomeModule
+	],
+	templateUrl: './site-map-sidebar.component.html',
+	styleUrls: ['./site-map-sidebar.component.scss']
+})
+export class SiteMapSidebarComponent implements OnInit {
+	siteMapNodes = signal<MenuNode[]>([]);
+	filteredNodes = signal<MenuNode[]>([]);
+	searchTerm = signal<string>('');
+	totalPages = signal<number>(0);
+  solidIcons = solidIcons;
+	
+	constructor(
+		public layoutService: LayoutService,
+		private translocoService: TranslocoService
+	) {}
+
+	ngOnInit(): void {
+		this.loadSiteMap();
+	}
+
+	get visible(): boolean {
+		return this.layoutService.state.siteMapSidebarVisible;
+	}
+
+	set visible(value: boolean) {
+		this.layoutService.state.siteMapSidebarVisible = value;
+	}
+
+	private loadSiteMap(): void {
+		const menuItems = (<any>globalThis).hostMenuItems?.() || [];
+		const nodes = this.buildSiteMapNodes(menuItems);
+		const totalCount = this.countTotalPages(nodes);
+
+		this.siteMapNodes.set(nodes);
+		this.filteredNodes.set(nodes);
+		this.totalPages.set(totalCount);
+	}
+
+	private buildSiteMapNodes(items: any[], parentKey = ''): MenuNode[] {
+		return items
+			.filter((item) => {
+				// Keep the home page route ("/") and any non-empty routes
+				return !item.routerLink || item.routerLink === '/' || item.routerLink.trim() !== '';
+			})
+			.map((item, index) => {
+				const key = parentKey ? `${parentKey}-${index}` : `${index}`;
+
+				let label: string | object;
+				if (item.routerLink === '/') {
+					label = { tr: 'Anasayfa', en: 'Home' };
+				} else {
+					label = item.label || { tr: 'Bilinmeyen', en: 'Unknown' };
+				}
+
+				const node: MenuNode = {
+					key,
+					label,
+					icon: item.icon,
+					routerLink: item.routerLink,
+					expanded: false
+				};
+
+				if (item.items && item.items.length > 0) {
+					node.children = this.buildSiteMapNodes(item.items, key);
+				}
+
+				return node;
+			});
+	}
+
+	private countTotalPages(nodes: MenuNode[]): number {
+		let count = 0;
+		for (const node of nodes) {
+			if (node.routerLink) {
+				count++;
+			}
+			if (node.children) {
+				count += this.countTotalPages(node.children);
+			}
+		}
+		return count;
+	}
+
+	onSearchChange(): void {
+		const searchTerm = this.searchTerm()?.toLowerCase()?.trim();
+		if (!searchTerm) {
+			this.filteredNodes.set(this.siteMapNodes());
+		} else {
+			const filtered = this.filterNodes(this.siteMapNodes(), searchTerm);
+			this.filteredNodes.set(filtered);
+		}
+	}
+
+	private filterNodes(nodes: MenuNode[], searchTerm: string): MenuNode[] {
+		const filtered: MenuNode[] = [];
+		const currentLang = this.translocoService.getActiveLang();
+
+		for (const node of nodes) {
+			// Convert label to string for search based on active language
+			const labelText =
+				typeof node.label === 'string' ?
+					node.label
+				:	(node.label as any)?.[currentLang] || (node.label as any)?.tr || (node.label as any)?.en || '';
+
+			const matches = labelText.toLowerCase().includes(searchTerm);
+			let filteredChildren: MenuNode[] = [];
+
+			if (node.children) {
+				filteredChildren = this.filterNodes(node.children, searchTerm);
+			}
+
+			if (matches || filteredChildren.length > 0) {
+				filtered.push({
+					...node,
+					children: filteredChildren.length > 0 ? filteredChildren : node.children,
+					expanded: filteredChildren.length > 0
+				});
+			}
+		}
+
+		return filtered;
+	}
+
+	expandAll(): void {
+		const expanded = this.expandNodes(this.filteredNodes(), true);
+		this.filteredNodes.set([...expanded]);
+	}
+
+	collapseAll(): void {
+		const collapsed = this.expandNodes(this.filteredNodes(), false);
+		this.filteredNodes.set([...collapsed]);
+	}
+
+	private expandNodes(nodes: MenuNode[], expanded: boolean): MenuNode[] {
+		return nodes.map((node) => ({
+			...node,
+			expanded,
+			children: node.children ? this.expandNodes(node.children, expanded) : undefined
+		}));
+	}
+
+	toggleNode(node: MenuNode): void {
+		node.expanded = !node.expanded;
+		this.filteredNodes.set([...this.filteredNodes()]);
+	}
+
+	trackByKey(index: number, node: MenuNode): string {
+		return node.key || `${index}`;
+	}
+}

package/theme/layout/app/static-sidebar/static-sidebar.component.html

@@ -1,124 +1,124 @@
-<div class="static-sidebar" [class.collapsed]="isCollapsed">
-	<div class="static-sidebar-content">
-		@if (!isCollapsed) {
-			<div class="search-container" *transloco="let t; read: ''">
-				<div class="search-wrapper">
-					<i class="pi pi-search search-icon"></i>
-					<input
-						type="text"
-						pInputText
-						variant="filled"
-						[placeholder]="t('search')"
-						[(ngModel)]="searchTerm"
-						(ngModelChange)="onSearchChange()"
-						class="search-static-sidebar" />
-				</div>
-			</div>
-			<p-scrollPanel [style]="{ width: '100%', height: 'calc(100vh - 130px)' }">
-				<div class="tree-container">
-					@for (node of filteredNodes(); track trackByKey($index, node)) {
-						<ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: node, level: 0 }"></ng-container>
-					}
-				</div>
-			</p-scrollPanel>
-		} @else {
-			<!-- Collapsed mode - only icons -->
-			<div class="collapsed-container">
-				@for (node of topLevelNodes; track trackByKey($index, node)) {
-					@if (node.routerLink && (!node.children || node.children.length === 0)) {
-						<a 
-							class="collapsed-item" 
-							[pTooltip]="getLocalText(node.label)" 
-							tooltipPosition="right"
-							[routerLink]="node.routerLink"
-							[class.active]="isTopLevelNodeActive(node)"
-							(click)="onCollapsedItemClick(node)">
-							@if (node.icon) {
-								<i class="collapsed-icon" [class]="node.icon"></i>
-							} @else {
-								<i class="collapsed-icon pi pi-circle"></i>
-							}
-						</a>
-					} @else {
-						<div 
-							class="collapsed-item" 
-							[pTooltip]="getLocalText(node.label)" 
-							tooltipPosition="right"
-							[class.active]="isTopLevelNodeActive(node)"
-							(click)="onCollapsedItemClick(node)">
-							@if (node.icon) {
-								<i class="collapsed-icon" [class]="node.icon"></i>
-							} @else {
-								<i class="collapsed-icon pi pi-circle"></i>
-							}
-						</div>
-					}
-				}
-			</div>
-		}
-	</div>
-
-	<!-- Recursive Tree Node Template -->
-	<ng-template #treeNodeTemplate let-node let-level="level">
-		<div class="tree-node" [ngClass]="'level-' + level">
-			@if (node.routerLink) {
-				<a
-					[routerLink]="node.routerLink"
-					class="node-item"
-					[class.has-children]="node.children && node.children.length > 0"
-					[class.is-page]="node.routerLink"
-					[class.active]="isChildNodeActive(node)"
-					[pTooltip]="!isMobile() && isTextTruncated(node.label, activeLang(), level) ? getLocalText(node.label) : ''"
-					tooltipPosition="right"
-					(click)="onMenuItemClick()">
-					<div class="node-content">
-						@if (node.children && node.children.length > 0) {
-							<div class="toggle-btn"
-								(click)="$event.stopPropagation(); toggleNode(node, level)">
-								<i class="pi" [class.pi-chevron-right]="!node.expanded" [class.pi-chevron-down]="node.expanded"></i>
-							</div>
-						}
-
-						@if (node.icon) {
-							<i class="node-icon" [class]="node.icon"></i>
-						}
-						<span class="node-label">{{ getLocalText(node.label) }}</span>
-					</div>
-				</a>
-			} @else {
-				<div
-					class="node-item"
-					[class.has-children]="node.children && node.children.length > 0"
-					[class.is-page]="node.routerLink"
-					[class.active]="isChildNodeActive(node)"
-					[pTooltip]="!isMobile() && isTextTruncated(node.label, activeLang(), level) ? getLocalText(node.label) : ''"
-					tooltipPosition="right"
-					(click)="toggleNode(node, level)">
-					<div class="node-content">
-						@if (node.children && node.children.length > 0) {
-							<div class="toggle-btn"
-								(click)="$event.stopPropagation(); toggleNode(node, level)">
-								<i class="pi" [class.pi-chevron-right]="!node.expanded" [class.pi-chevron-down]="node.expanded"></i>
-							</div>
-						}
-
-						@if (node.icon) {
-							<i class="node-icon" [class]="node.icon"></i>
-						}
-						<span class="node-label">{{ getLocalText(node.label) }}</span>
-					</div>
-				</div>
-			}
-
-			<!-- Recursive Children -->
-			@if (node.children && node.expanded) {
-				<div class="children-container" [attr.data-level]="level">
-					@for (child of node.children; track trackByKey($index, child)) {
-						<ng-container
-							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
-					}
-				</div>
-			}
-		</div>
-	</ng-template>
+<div class="static-sidebar" [class.collapsed]="isCollapsed">
+	<div class="static-sidebar-content">
+		@if (!isCollapsed) {
+			<div class="search-container" *transloco="let t; read: ''">
+				<div class="search-wrapper">
+					<i class="pi pi-search search-icon"></i>
+					<input
+						type="text"
+						pInputText
+						variant="filled"
+						[placeholder]="t('search')"
+						[(ngModel)]="searchTerm"
+						(ngModelChange)="onSearchChange()"
+						class="search-static-sidebar" />
+				</div>
+			</div>
+			<p-scrollPanel [style]="{ width: '100%', height: 'calc(100vh - 130px)' }">
+				<div class="tree-container">
+					@for (node of filteredNodes(); track trackByKey($index, node)) {
+						<ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: node, level: 0 }"></ng-container>
+					}
+				</div>
+			</p-scrollPanel>
+		} @else {
+			<!-- Collapsed mode - only icons -->
+			<div class="collapsed-container">
+				@for (node of topLevelNodes; track trackByKey($index, node)) {
+					@if (node.routerLink && (!node.children || node.children.length === 0)) {
+						<a 
+							class="collapsed-item" 
+							[pTooltip]="getLocalText(node.label)" 
+							tooltipPosition="right"
+							[routerLink]="node.routerLink"
+							[class.active]="isTopLevelNodeActive(node)"
+							(click)="onCollapsedItemClick(node)">
+							@if (node.icon) {
+								<i class="collapsed-icon" [class]="node.icon"></i>
+							} @else {
+								<i class="collapsed-icon pi pi-circle"></i>
+							}
+						</a>
+					} @else {
+						<div 
+							class="collapsed-item" 
+							[pTooltip]="getLocalText(node.label)" 
+							tooltipPosition="right"
+							[class.active]="isTopLevelNodeActive(node)"
+							(click)="onCollapsedItemClick(node)">
+							@if (node.icon) {
+								<i class="collapsed-icon" [class]="node.icon"></i>
+							} @else {
+								<i class="collapsed-icon pi pi-circle"></i>
+							}
+						</div>
+					}
+				}
+			</div>
+		}
+	</div>
+
+	<!-- Recursive Tree Node Template -->
+	<ng-template #treeNodeTemplate let-node let-level="level">
+		<div class="tree-node" [ngClass]="'level-' + level">
+			@if (node.routerLink) {
+				<a
+					[routerLink]="node.routerLink"
+					class="node-item"
+					[class.has-children]="node.children && node.children.length > 0"
+					[class.is-page]="node.routerLink"
+					[class.active]="isChildNodeActive(node)"
+					[pTooltip]="!isMobile() && isTextTruncated(node.label, activeLang(), level) ? getLocalText(node.label) : ''"
+					tooltipPosition="right"
+					(click)="onMenuItemClick()">
+					<div class="node-content">
+						@if (node.children && node.children.length > 0) {
+							<div class="toggle-btn"
+								(click)="$event.stopPropagation(); toggleNode(node, level)">
+								<i class="pi" [class.pi-chevron-right]="!node.expanded" [class.pi-chevron-down]="node.expanded"></i>
+							</div>
+						}
+
+						@if (node.icon) {
+							<i class="node-icon" [class]="node.icon"></i>
+						}
+						<span class="node-label">{{ getLocalText(node.label) }}</span>
+					</div>
+				</a>
+			} @else {
+				<div
+					class="node-item"
+					[class.has-children]="node.children && node.children.length > 0"
+					[class.is-page]="node.routerLink"
+					[class.active]="isChildNodeActive(node)"
+					[pTooltip]="!isMobile() && isTextTruncated(node.label, activeLang(), level) ? getLocalText(node.label) : ''"
+					tooltipPosition="right"
+					(click)="toggleNode(node, level)">
+					<div class="node-content">
+						@if (node.children && node.children.length > 0) {
+							<div class="toggle-btn"
+								(click)="$event.stopPropagation(); toggleNode(node, level)">
+								<i class="pi" [class.pi-chevron-right]="!node.expanded" [class.pi-chevron-down]="node.expanded"></i>
+							</div>
+						}
+
+						@if (node.icon) {
+							<i class="node-icon" [class]="node.icon"></i>
+						}
+						<span class="node-label">{{ getLocalText(node.label) }}</span>
+					</div>
+				</div>
+			}
+
+			<!-- Recursive Children -->
+			@if (node.children && node.expanded) {
+				<div class="children-container" [attr.data-level]="level">
+					@for (child of node.children; track trackByKey($index, child)) {
+						<ng-container
+							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
+					}
+				</div>
+			}
+		</div>
+	</ng-template>
 </div>