aril 1.2.10 → 1.2.11

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

@@ -1,121 +1,121 @@
-<p-sidebar
-	[(visible)]="visible"
-	position="right"
-	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
-	styleClass="layout-sitemap-sidebar w-full sm:w-30rem"
-	*transloco="let t; read: 'siteMap'">
-	<ng-template pTemplate="header">
-		<div class="flex align-items-center justify-content-between gap-2 w-full">
-			<div class="flex align-items-center gap-2">
-				<i class="pi pi-sitemap text-primary text-xl"></i>
-				<span class="font-bold text-lg">{{ t('siteMap') }}</span>
-				<span class="total-pages">{{ totalPages() }} {{ t('pages') }}</span>
-			</div>
-		</div>
-	</ng-template>
-
-	<div class="sitemap-content">
-		<div class="search-section grid p-fluid m-0">
-			<aril-text
-				[placeholder]="t('searchPages')"
-				[(ngModel)]="searchTerm"
-				(ngModelChange)="onSearchChange()"
-				class="col-10 m-0">
-			</aril-text>
-			@if (filteredNodes().length > 0) {
-			<div class="col-2 flex align-items-center m-0 p-0">
-					<fa-icon
-						[icon]="solidIcons.faAnglesDown"
-						size="xl"
-						style="color: var(--primary-color)"
-						class="col-1 cursor-pointer"
-						[pTooltip]="t('expandAll')"
-						tooltipPosition="top"
-						(click)="expandAll()">
-					</fa-icon>
-					<fa-icon
-						[icon]="solidIcons.faAnglesUp"
-						size="xl"
-						style="color: var(--red-500)"
-						class="col-1 ml-3 cursor-pointer"
-						[pTooltip]="t('collapseAll')"
-						tooltipPosition="top"
-						(click)="collapseAll()">
-					</fa-icon>
-				</div>
-			}
-		</div>
-
-		<!-- Site Map Tree -->
-		@if (filteredNodes().length > 0) {
-			<div class="sitemap-tree">
-				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
-					<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>
-			</div>
-		} @else {
-			<div class="empty-state">
-				<div class="empty-content">
-					<i class="pi pi-sitemap empty-icon"></i>
-					<h3 class="empty-title">
-						{{ searchTerm() ? t('noSearchResults') : t('noPages') }}
-					</h3>
-					<p class="empty-message">
-						{{ searchTerm() ? t('tryDifferentKeywords') : '' }}
-					</p>
-					@if (searchTerm()) {
-						<aril-button
-							[label]="t('clearSearch')"
-							icon="TIMES"
-							color="secondary"
-							[outlined]="true"
-							size="sm"
-							(clickEvent)="searchTerm.set(''); onSearchChange()">
-						</aril-button>
-					}
-				</div>
-			</div>
-		}
-
-		<!-- Recursive Tree Node Template -->
-		<ng-template #treeNodeTemplate let-node let-level="level">
-			<div class="tree-node" [style.margin-left.px]="level * 20">
-				<div
-					class="node-item"
-					[class.has-children]="node.children && node.children.length > 0"
-					[class.is-page]="node.routerLink"
-					[routerLink]="node.routerLink"
-					(click)="!node.routerLink ? toggleNode(node) : (visible = false)">
-					<div class="node-content">
-						@if (node.children && node.children.length > 0) {
-							<div class="toggle-btn" (click)="$event.stopPropagation(); toggleNode(node)">
-								<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">{{ node.label | translateJson }}</span>
-
-						@if (node.routerLink) {
-							<i class="external-icon pi pi-external-link"></i>
-						}
-					</div>
-				</div>
-
-				<!-- Recursive Children -->
-				@if (node.children && node.expanded) {
-					@for (child of node.children; track trackByKey($index, child)) {
-						<ng-container
-							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
-					}
-				}
-			</div>
-		</ng-template>
-	</div>
-</p-sidebar>
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-sitemap-sidebar w-full sm:w-30rem"
+	*transloco="let t; read: 'siteMap'">
+	<ng-template pTemplate="header">
+		<div class="flex align-items-center justify-content-between gap-2 w-full">
+			<div class="flex align-items-center gap-2">
+				<i class="pi pi-sitemap text-primary text-xl"></i>
+				<span class="font-bold text-lg">{{ t('siteMap') }}</span>
+				<span class="total-pages">{{ totalPages() }} {{ t('pages') }}</span>
+			</div>
+		</div>
+	</ng-template>
+
+	<div class="sitemap-content">
+		<div class="search-section grid p-fluid m-0">
+			<aril-text
+				[placeholder]="t('searchPages')"
+				[(ngModel)]="searchTerm"
+				(ngModelChange)="onSearchChange()"
+				class="col-10 m-0">
+			</aril-text>
+			@if (filteredNodes().length > 0) {
+			<div class="col-2 flex align-items-center m-0 p-0">
+					<fa-icon
+						[icon]="solidIcons.faAnglesDown"
+						size="xl"
+						style="color: var(--primary-color)"
+						class="col-1 cursor-pointer"
+						[pTooltip]="t('expandAll')"
+						tooltipPosition="top"
+						(click)="expandAll()">
+					</fa-icon>
+					<fa-icon
+						[icon]="solidIcons.faAnglesUp"
+						size="xl"
+						style="color: var(--red-500)"
+						class="col-1 ml-3 cursor-pointer"
+						[pTooltip]="t('collapseAll')"
+						tooltipPosition="top"
+						(click)="collapseAll()">
+					</fa-icon>
+				</div>
+			}
+		</div>
+
+		<!-- Site Map Tree -->
+		@if (filteredNodes().length > 0) {
+			<div class="sitemap-tree">
+				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
+					<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>
+			</div>
+		} @else {
+			<div class="empty-state">
+				<div class="empty-content">
+					<i class="pi pi-sitemap empty-icon"></i>
+					<h3 class="empty-title">
+						{{ searchTerm() ? t('noSearchResults') : t('noPages') }}
+					</h3>
+					<p class="empty-message">
+						{{ searchTerm() ? t('tryDifferentKeywords') : '' }}
+					</p>
+					@if (searchTerm()) {
+						<aril-button
+							[label]="t('clearSearch')"
+							icon="TIMES"
+							color="secondary"
+							[outlined]="true"
+							size="sm"
+							(clickEvent)="searchTerm.set(''); onSearchChange()">
+						</aril-button>
+					}
+				</div>
+			</div>
+		}
+
+		<!-- Recursive Tree Node Template -->
+		<ng-template #treeNodeTemplate let-node let-level="level">
+			<div class="tree-node" [style.margin-left.px]="level * 20">
+				<div
+					class="node-item"
+					[class.has-children]="node.children && node.children.length > 0"
+					[class.is-page]="node.routerLink"
+					[routerLink]="node.routerLink"
+					(click)="!node.routerLink ? toggleNode(node) : (visible = false)">
+					<div class="node-content">
+						@if (node.children && node.children.length > 0) {
+							<div class="toggle-btn" (click)="$event.stopPropagation(); toggleNode(node)">
+								<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">{{ node.label | translateJson }}</span>
+
+						@if (node.routerLink) {
+							<i class="external-icon pi pi-external-link"></i>
+						}
+					</div>
+				</div>
+
+				<!-- Recursive Children -->
+				@if (node.children && node.expanded) {
+					@for (child of node.children; track trackByKey($index, child)) {
+						<ng-container
+							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
+					}
+				}
+			</div>
+		</ng-template>
+	</div>
+</p-sidebar>

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

@@ -126,7 +126,8 @@ export class SiteMapSidebarComponent implements OnInit {
 	}
 
 	onSearchChange(): void {
-		const searchTerm = this.searchTerm()?.toLowerCase()?.trim();
+		const currentLang = this.translocoService.getActiveLang();
+		const searchTerm = this.searchTerm()?.toLocaleLowerCase(currentLang)?.trim();
 		if (!searchTerm) {
 			this.filteredNodes.set(this.siteMapNodes());
 		} else {
@@ -146,7 +147,7 @@ export class SiteMapSidebarComponent implements OnInit {
 					node.label
 				:	(node.label as any)?.[currentLang] || (node.label as any)?.tr || (node.label as any)?.en || '';
 
-			const matches = labelText.toLowerCase().includes(searchTerm);
+			const matches = labelText.toLocaleLowerCase(currentLang).includes(searchTerm);
 			let filteredChildren: MenuNode[] = [];
 
 			if (node.children) {

package/theme/layout/app/static-sidebar/static-sidebar.component.d.ts

@@ -51,7 +51,6 @@ export declare class StaticSidebarComponent implements OnInit, OnDestroy {
     toggleNode(node: MenuNode, level?: number): void;
     private closeOtherTopLevelNodes;
     private closeAllChildNodes;
-    trackByKey(index: number, node: MenuNode): any;
     onMenuItemClick(): void;
     onActionItemClick(node: MenuNode, event: Event): void;
     private buildSuccessRoute;

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

@@ -16,7 +16,7 @@
 			</div>
 			<p-scrollPanel [style]="{ width: '100%', height: 'calc(100vh - 130px)' }">
 				<div class="tree-container">
-					@for (node of filteredNodes(); track trackByKey($index, node)) {
+					@for (node of filteredNodes(); track node.key) {
 						<ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: node, level: 0 }"></ng-container>
 					}
 				</div>
@@ -24,7 +24,7 @@
 		} @else {
 			<!-- Collapsed mode - only icons -->
 			<div class="collapsed-container">
-				@for (node of topLevelNodes; track trackByKey($index, node)) {
+				@for (node of topLevelNodes; track node.key) {
 					@if (node.action && (!node.children || node.children.length === 0)) {
 						<div
 							class="collapsed-item is-action"
@@ -151,7 +151,7 @@
 			<!-- Recursive Children -->
 			@if (node.children && node.expanded) {
 				<div class="children-container" [attr.data-level]="level">
-					@for (child of node.children; track trackByKey($index, child)) {
+					@for (child of node.children; track child.key) {
 						<ng-container
 							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
 					}

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

@@ -5,6 +5,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterLink } from '@angular/router';
 
+import { InputTextModule } from 'primeng/inputtext';
 import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { TooltipModule } from 'primeng/tooltip';
 
@@ -32,7 +33,16 @@ interface MenuNode {
 @Component({
 	standalone: true,
 	selector: 'app-static-sidebar',
-	imports: [RouterLink, NgClass, NgTemplateOutlet, ScrollPanelModule, TooltipModule, FormsModule, TranslocoModule],
+	imports: [
+		RouterLink,
+		NgClass,
+		NgTemplateOutlet,
+		ScrollPanelModule,
+		TooltipModule,
+		FormsModule,
+		TranslocoModule,
+		InputTextModule
+	],
 	templateUrl: './static-sidebar.component.html',
 	styleUrl: './static-sidebar.component.scss',
 	providers: [TranslateJsonPipe]
@@ -212,10 +222,6 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 		}
 	}
 
-	trackByKey(index: number, node: MenuNode): any {
-		return node.key;
-	}
-
 	onMenuItemClick() {
 		if (this.isMobile()) {
 			this.layoutService.closeMobileMenu();
@@ -296,7 +302,8 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 	}
 
 	onSearchChange(): void {
-		const currentSearchTerm = this.searchTerm()?.toLowerCase()?.trim();
+		const currentLang = this.translocoService.getActiveLang();
+		const currentSearchTerm = this.searchTerm()?.toLocaleLowerCase(currentLang)?.trim();
 		if (!currentSearchTerm) {
 			this.filteredNodes.set(this.menuNodes() || []);
 			return;
@@ -315,7 +322,7 @@ export class StaticSidebarComponent implements OnInit, OnDestroy {
 					node.label
 				:	(node.label as any)?.[currentLang] || (node.label as any)?.tr || (node.label as any)?.en || '';
 
-			const matches = labelText.toLowerCase().includes(searchTerm);
+			const matches = labelText.toLocaleLowerCase(currentLang).includes(searchTerm);
 			let filteredChildren: MenuNode[] = [];
 
 			if (node.children) {

package/ui/autoComplete/src/auto-complete.component.d.ts

@@ -1,12 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { AfterViewInit } from '@angular/core';
 import { AutoComplete } from 'primeng/autocomplete';
+import { TranslocoService } from '@ngneat/transloco';
 import { BaseInputComponent } from 'aril/ui/lib';
 import { ReferenceAsset, SuggestionsDTO } from './interfaces';
 import * as i0 from "@angular/core";
 import * as i1 from "aril/ui/lib";
 export declare class AutoCompleteComponent extends BaseInputComponent implements AfterViewInit {
     private http;
+    private translocoService;
     autoCompleteRef: AutoComplete;
     items: import("@angular/core").InputSignal<SuggestionsDTO[], SuggestionsDTO[]>;
     referenceAsset: import("@angular/core").InputSignal<ReferenceAsset | null, ReferenceAsset | null>;
@@ -18,7 +20,7 @@ export declare class AutoCompleteComponent extends BaseInputComponent implements
     optionLabel: import("@angular/core").InputSignal<keyof SuggestionsDTO, keyof SuggestionsDTO>;
     selectionItems: SuggestionsDTO[];
     filteredSelectionItems: SuggestionsDTO[];
-    constructor(http: HttpClient);
+    constructor(http: HttpClient, translocoService: TranslocoService);
     ngAfterViewInit(): void;
     getOptionValue(option: any): any;
     search(event: any): void;

package/ui-business/rolePicker/src/role-picker.component.d.ts

@@ -1,11 +1,13 @@
 import { HttpClient } from '@angular/common/http';
 import { EventEmitter } from '@angular/core';
+import { TranslocoService } from '@ngneat/transloco';
 import { BaseInputComponent } from 'aril/ui/lib';
 import { SelectBoxItem } from './interface';
 import * as i0 from "@angular/core";
 import * as i1 from "aril/ui/lib";
 export declare class RolePickerComponent extends BaseInputComponent {
     private http;
+    private translocoService;
     placeholder: import("@angular/core").InputSignal<string, string>;
     forceSelection: import("@angular/core").InputSignal<boolean, boolean>;
     multiple: import("@angular/core").InputSignal<boolean, boolean>;
@@ -16,7 +18,7 @@ export declare class RolePickerComponent extends BaseInputComponent {
     roleItems: any;
     selectionItems: string[];
     SelectionChanged: EventEmitter<SelectBoxItem>;
-    constructor(http: HttpClient);
+    constructor(http: HttpClient, translocoService: TranslocoService);
     getRoleItems(): Promise<string[]>;
     completeMethod(event: any): void;
     filterSelection(query: string, selectionItems: string[]): string[];