@flusys/ng-localization 5.5.0 → 6.0.0-beta.1

package/fesm2022/flusys-ng-localization.mjs

@@ -1,32 +1,18 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, ApplicationRef, signal, computed, effect, DestroyRef, ElementRef, Component, provideAppInitializer } from '@angular/core';
-import { ApiResourceService, PlatformService, TranslateService, AngularModule, PrimeModule, TranslatePipe, LANGUAGE_PERMISSIONS, HasPermissionDirective, PermissionValidatorService, TRANSLATION_KEY_PERMISSIONS, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
+import { InjectionToken, Injectable, inject, ApplicationRef, signal, computed, effect, DestroyRef, Component, provideAppInitializer } from '@angular/core';
+import { ApiResourceService, PlatformService, TranslateService, AngularModule, TranslatePipe, LANGUAGE_PERMISSIONS, HasPermissionDirective, PermissionValidatorService, TRANSLATION_KEY_PERMISSIONS, IconComponent, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
 import { HttpClient } from '@angular/common/http';
 import { APP_CONFIG, LOCALIZATION_API_SERVICE, LOCALIZATION_STATE_SERVICE } from '@flusys/ng-core';
-import { firstValueFrom, from, fromEvent, finalize, forkJoin } from 'rxjs';
+import { firstValueFrom, from, finalize, forkJoin } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
-import { PrimeNG } from 'primeng/config';
+import * as i1 from '@flusys/ng-ui';
+import { UiModule, MenuComponent, MessageService, ConfirmationService } from '@flusys/ng-ui';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import * as i1 from 'primeng/styleclass';
-import { StyleClassModule } from 'primeng/styleclass';
-import { filter } from 'rxjs/operators';
 import { LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL } from '@flusys/ng-layout';
-import * as i1$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { form, required, maxLength, FormField } from '@angular/forms/signals';
 import { Router, ActivatedRoute, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
-import { MessageService, ConfirmationService } from 'primeng/api';
-import * as i2 from 'primeng/button';
-import * as i3 from 'primeng/card';
-import * as i4 from 'primeng/inputtext';
-import * as i5 from 'primeng/select';
-import * as i2$1 from 'primeng/table';
-import * as i3$1 from 'primeng/tag';
-import * as i4$1 from 'primeng/tooltip';
-import * as i7 from 'primeng/textarea';
-import * as i8 from 'primeng/progressspinner';
-import * as i3$2 from 'primeng/iconfield';
-import * as i4$2 from 'primeng/inputicon';
 
 const LOCALIZATION_CONFIG = new InjectionToken('LOCALIZATION_CONFIG');
 /** Get localization config with sensible defaults applied */
@@ -160,10 +146,10 @@ class LanguageApiService extends ApiResourceService {
     setDefault(id) {
         return this.http.post(`${this.baseUrl}/set-default`, { id });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -180,10 +166,10 @@ class LocalizationApiService {
     getTranslationsByLanguage(languageCode, modules) {
         return this.http.post(`${this.baseUrl}/translation/get-by-language`, { languageCode, ...(modules?.length ? { modules } : {}) });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -224,10 +210,10 @@ class LocalizationInitializerService {
             this.stateService.setLoading(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationInitializerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationInitializerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationInitializerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationInitializerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationInitializerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationInitializerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -236,7 +222,6 @@ class LocalizationStateService {
     platformService = inject(PlatformService);
     document = inject(DOCUMENT);
     appRef = inject(ApplicationRef);
-    primeNG = inject(PrimeNG);
     _loadedModules = new Set();
     _currentLanguage = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_currentLanguage" }] : /* istanbul ignore next */ []));
@@ -263,86 +248,10 @@ class LocalizationStateService {
                 localStorage.setItem(STORAGE_KEYS.CURRENT_LANGUAGE, language.code);
             }
         });
-        // Trigger zoneless change detection when translations update
         effect(() => {
             this._translations();
             setTimeout(() => this.appRef.tick(), 0);
         });
-        effect(() => {
-            const translations = this._translations();
-            const fallbacks = this._fallbackMessages();
-            this.syncPrimeNGTranslations(translations, fallbacks);
-        });
-    }
-    dotToCamel(str) {
-        return str.replace(/\.([a-z])/g, (_, c) => c.toUpperCase());
-    }
-    PRIMENG_NUMERIC_KEYS = new Set(['firstDayOfWeek']);
-    PRIMENG_ARRAY_DEFAULTS = {
-        dayNames: [
-            'Sunday',
-            'Monday',
-            'Tuesday',
-            'Wednesday',
-            'Thursday',
-            'Friday',
-            'Saturday',
-        ],
-        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-        monthNames: [
-            'January',
-            'February',
-            'March',
-            'April',
-            'May',
-            'June',
-            'July',
-            'August',
-            'September',
-            'October',
-            'November',
-            'December',
-        ],
-        monthNamesShort: [
-            'Jan',
-            'Feb',
-            'Mar',
-            'Apr',
-            'May',
-            'Jun',
-            'Jul',
-            'Aug',
-            'Sep',
-            'Oct',
-            'Nov',
-            'Dec',
-        ],
-    };
-    syncPrimeNGTranslations(translations, fallbacks) {
-        const primeNGTranslations = {
-            ...this.PRIMENG_ARRAY_DEFAULTS,
-        };
-        const ariaTranslations = {};
-        const prefix = 'primeng.';
-        const ariaPrefix = 'primeng.aria.';
-        const allMessages = { ...fallbacks, ...translations };
-        for (const [key, value] of Object.entries(allMessages)) {
-            if (key.startsWith(ariaPrefix)) {
-                const ariaKey = this.dotToCamel(key.substring(ariaPrefix.length));
-                ariaTranslations[ariaKey] = value;
-            }
-            else if (key.startsWith(prefix)) {
-                const primeKey = this.dotToCamel(key.substring(prefix.length));
-                primeNGTranslations[primeKey] = this.PRIMENG_NUMERIC_KEYS.has(primeKey)
-                    ? parseInt(value, 10)
-                    : value;
-            }
-        }
-        if (Object.keys(ariaTranslations).length > 0) {
-            primeNGTranslations['aria'] = ariaTranslations;
-        }
-        this.primeNG.setTranslation(primeNGTranslations);
     }
     setCurrentLanguage(language) {
         this._currentLanguage.set(language);
@@ -379,10 +288,10 @@ class LocalizationStateService {
     updateFallbackMessages(messages) {
         this._fallbackMessages.update((current) => ({ ...current, ...messages }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -404,10 +313,10 @@ class TranslationApiService extends ApiResourceService {
     bulkUpdate(translations) {
         return this.http.post(`${this.baseUrl}/update-many-values`, { translations });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -419,10 +328,10 @@ class TranslationKeyApiService extends ApiResourceService {
     getModules() {
         return this.http.post(`${this.baseUrl}/get-modules`, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationKeyApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationKeyApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationKeyApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -486,10 +395,10 @@ class TranslationLoaderService {
     loadTranslationsAsync(languageCode, clearModules = false) {
         return from(this.loadTranslations(languageCode, clearModules));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationLoaderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationLoaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -498,121 +407,59 @@ class LanguageSelectorComponent {
     localizationState = inject(LocalizationStateService);
     translationLoader = inject(TranslationLoaderService);
     destroyRef = inject(DestroyRef);
-    document = inject(DOCUMENT);
-    elementRef = inject(ElementRef);
     languages = this.localizationState.availableLanguages;
-    _isActive = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
-    isActive = this._isActive.asReadonly();
     selectedLanguageCode = this.localizationState.currentLanguageCode;
     selectedLanguage = computed(() => this.languages().find((l) => l.code === this.selectedLanguageCode()) ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : /* istanbul ignore next */ []));
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this._isActive()))
-            .subscribe((event) => {
-            const target = event.target;
-            if (!this.elementRef.nativeElement.contains(target)) {
-                this._isActive.set(false);
-            }
-        });
-    }
-    togglePanel() {
-        this._isActive.update((v) => !v);
-    }
+    menuItems = computed(() => this.languages().map((lang) => ({
+        label: lang.nativeName || lang.name,
+        badge: lang.code.toUpperCase(),
+        selected: lang.code === this.selectedLanguageCode(),
+        command: () => this.onLanguageSelect(lang.code),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     onLanguageSelect(code) {
         const language = this.languages().find((l) => l.code === code);
         if (language) {
             this.localizationState.setCurrentLanguage(language);
-            this._isActive.set(false);
             this.translationLoader
                 .loadTranslationsAsync(code, true)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LanguageSelectorComponent, isStandalone: true, selector: "lib-language-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: LanguageSelectorComponent, isStandalone: true, selector: "lib-language-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
-      [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
-      enterFromClass="hidden"
-      enterActiveClass="animate-scalein"
-      leaveToClass="hidden"
-      leaveActiveClass="animate-fadeout"
-      [hideOnOutsideClick]="true"
-      (click)="togglePanel()">
-      <i class="pi pi-globe"></i>
+      [class.layout-topbar-action-highlight]="menu.visible()"
+      (click)="menu.toggle($event)">
+      <ui-icon name="globe"></ui-icon>
       <span class="font-semibold">{{ selectedLanguage()?.nativeName || selectedLanguage()?.name || selectedLanguageCode() }}</span>
     </button>
-    <div
-      class="hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]"
-      style="background-color: var(--surface-overlay); inset-inline-end: 0;">
-      <div class="flex flex-col">
-        @for (lang of languages(); track lang.id) {
-          <button
-            type="button"
-            class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
-            [class.bg-primary-50]="lang.code === selectedLanguageCode()"
-            [class.text-primary]="lang.code === selectedLanguageCode()"
-            (click)="onLanguageSelect(lang.code)">
-            <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
-            <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
-            @if (lang.code === selectedLanguageCode()) {
-              <i class="pi pi-check text-primary text-sm"></i>
-            }
-          </button>
-        }
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }] });
+    <f-menu #menu [model]="menuItems()" [popup]="true" class="absolute top-[3.25rem]" style="inset-inline-end: 0;" />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "component", type: i1.MenuComponent, selector: "f-menu", inputs: ["model", "popup"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-language-selector',
-                    imports: [StyleClassModule],
+                    imports: [UiModule],
                     host: { class: 'relative' },
                     template: `
     <button
       type="button"
       class="layout-topbar-action"
-      [class.layout-topbar-action-highlight]="isActive()"
-      pStyleClass="@next"
-      enterFromClass="hidden"
-      enterActiveClass="animate-scalein"
-      leaveToClass="hidden"
-      leaveActiveClass="animate-fadeout"
-      [hideOnOutsideClick]="true"
-      (click)="togglePanel()">
-      <i class="pi pi-globe"></i>
+      [class.layout-topbar-action-highlight]="menu.visible()"
+      (click)="menu.toggle($event)">
+      <ui-icon name="globe"></ui-icon>
       <span class="font-semibold">{{ selectedLanguage()?.nativeName || selectedLanguage()?.name || selectedLanguageCode() }}</span>
     </button>
-    <div
-      class="hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]"
-      style="background-color: var(--surface-overlay); inset-inline-end: 0;">
-      <div class="flex flex-col">
-        @for (lang of languages(); track lang.id) {
-          <button
-            type="button"
-            class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
-            [class.bg-primary-50]="lang.code === selectedLanguageCode()"
-            [class.text-primary]="lang.code === selectedLanguageCode()"
-            (click)="onLanguageSelect(lang.code)">
-            <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
-            <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
-            @if (lang.code === selectedLanguageCode()) {
-              <i class="pi pi-check text-primary text-sm"></i>
-            }
-          </button>
-        }
-      </div>
-    </div>
+    <f-menu #menu [model]="menuItems()" [popup]="true" class="absolute top-[3.25rem]" style="inset-inline-end: 0;" />
   `,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class LanguageSelectorPanelComponent {
     localizationState = inject(LocalizationStateService);
@@ -622,6 +469,13 @@ class LanguageSelectorPanelComponent {
     _selectedLanguageCode = signal(this.localizationState.currentLanguageCode(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_selectedLanguageCode" }] : /* istanbul ignore next */ []));
     selectedLanguageCode = this._selectedLanguageCode.asReadonly();
+    menuItems = computed(() => this.languages().map((lang) => ({
+        label: lang.nativeName || lang.name,
+        badge: lang.code.toUpperCase(),
+        selected: lang.code === this.selectedLanguageCode(),
+        command: () => this.onLanguageSelect(lang.code),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const currentCode = this.localizationState.currentLanguageCode();
@@ -641,53 +495,19 @@ class LanguageSelectorPanelComponent {
                 .subscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageSelectorPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LanguageSelectorPanelComponent, isStandalone: true, selector: "lib-language-selector-panel", host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]" }, ngImport: i0, template: `
-    <div class="flex flex-col">
-      @for (lang of languages(); track lang.id) {
-        <button
-          type="button"
-          class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
-          [class.bg-primary-50]="lang.code === selectedLanguageCode()"
-          [class.text-primary]="lang.code === selectedLanguageCode()"
-          (click)="onLanguageSelect(lang.code)">
-          <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
-          <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
-          @if (lang.code === selectedLanguageCode()) {
-            <i class="pi pi-check text-primary text-sm"></i>
-          }
-        </button>
-      }
-    </div>
-  `, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageSelectorPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: LanguageSelectorPanelComponent, isStandalone: true, selector: "lib-language-selector-panel", host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]" }, ngImport: i0, template: `<f-menu [model]="menuItems()" />`, isInline: true, dependencies: [{ kind: "component", type: MenuComponent, selector: "f-menu", inputs: ["model", "popup"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageSelectorPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageSelectorPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-language-selector-panel',
-                    imports: [],
+                    imports: [MenuComponent],
                     host: {
                         class: 'hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]',
                         style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
                     },
-                    template: `
-    <div class="flex flex-col">
-      @for (lang of languages(); track lang.id) {
-        <button
-          type="button"
-          class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
-          [class.bg-primary-50]="lang.code === selectedLanguageCode()"
-          [class.text-primary]="lang.code === selectedLanguageCode()"
-          (click)="onLanguageSelect(lang.code)">
-          <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
-          <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
-          @if (lang.code === selectedLanguageCode()) {
-            <i class="pi pi-check text-primary text-sm"></i>
-          }
-        </button>
-      }
-    </div>
-  `,
+                    template: `<f-menu [model]="menuItems()" />`,
                 }]
         }], ctorParameters: () => [] });
 
@@ -860,9 +680,9 @@ class LanguageFormPage {
     onCancel() {
         this.router.navigate(['/localization/languages']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LanguageFormPage, isStandalone: true, selector: "lib-language-form-page", ngImport: i0, template: `
-    <p-card>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LanguageFormPage, isStandalone: true, selector: "lib-language-form-page", providers: [MessageService], ngImport: i0, template: `
+    <f-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
           <h2 class="text-xl font-semibold m-0">
@@ -885,7 +705,7 @@ class LanguageFormPage {
             >{{ 'localization.language.code' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="code"
             [formField]="formTree.code"
             [placeholder]="'localization.placeholder.code' | translate"
@@ -901,7 +721,7 @@ class LanguageFormPage {
             >{{ 'localization.language.name' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="name"
             [formField]="formTree.name"
             [placeholder]="'localization.placeholder.name' | translate"
@@ -914,7 +734,7 @@ class LanguageFormPage {
             'localization.language.native.name' | translate
           }}</label>
           <input
-            pInputText
+            fInputText
             id="nativeName"
             [formField]="formTree.nativeName"
             [placeholder]="'localization.placeholder.native.name' | translate"
@@ -929,7 +749,7 @@ class LanguageFormPage {
           <label for="direction" class="font-medium"
             >{{ 'localization.language.direction' | translate }} *</label
           >
-          <p-select
+          <f-select
             id="direction"
             [ngModel]="formModel().direction"
             (ngModelChange)="updateDirection($event)"
@@ -947,7 +767,7 @@ class LanguageFormPage {
             'localization.language.display.order' | translate
           }}</label>
           <input
-            pInputText
+            fInputText
             id="serial"
             type="number"
             [formField]="formTree.serial"
@@ -960,20 +780,14 @@ class LanguageFormPage {
 
         <!-- Checkboxes -->
         <div class="flex items-center gap-6 md:col-span-2 pt-4">
-          <label class="p-checkbox-native">
-            <input type="checkbox" [formField]="formTree.isActive" />
-            <span>{{ 'shared.active' | translate }}</span>
-          </label>
-          <label class="p-checkbox-native">
-            <input type="checkbox" [formField]="formTree.isDefault" />
-            <span>{{ 'localization.language.default' | translate }}</span>
-          </label>
+          <f-checkbox [formField]="formTree.isActive" [label]="'shared.active' | translate" />
+          <f-checkbox [formField]="formTree.isDefault" [label]="'localization.language.default' | translate" />
         </div>
 
         <!-- Actions -->
         <div class="flex justify-end gap-4 md:col-span-2 pt-4">
           <button
-            pButton
+            fButton
             severity="secondary"
             [outlined]="true"
             (click)="onCancel()"
@@ -981,12 +795,12 @@ class LanguageFormPage {
             <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
           </button>
           <button
-            pButton
+            fButton
             type="submit"
             [disabled]="!isFormValid() || isSaving()"
           >
             @if (isSaving()) {
-              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             }
             <span pButtonLabel>{{ 
               isEditMode()
@@ -996,16 +810,17 @@ class LanguageFormPage {
           </button>
         </div>
       </form>
-    </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </f-card>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "component", type: i1.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageFormPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageFormPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-language-form-page',
-                    imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
+                    imports: [UiModule, AngularModule, FormsModule, FormField, TranslatePipe],
+                    providers: [MessageService],
                     template: `
-    <p-card>
+    <f-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
           <h2 class="text-xl font-semibold m-0">
@@ -1028,7 +843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             >{{ 'localization.language.code' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="code"
             [formField]="formTree.code"
             [placeholder]="'localization.placeholder.code' | translate"
@@ -1044,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             >{{ 'localization.language.name' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="name"
             [formField]="formTree.name"
             [placeholder]="'localization.placeholder.name' | translate"
@@ -1057,7 +872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             'localization.language.native.name' | translate
           }}</label>
           <input
-            pInputText
+            fInputText
             id="nativeName"
             [formField]="formTree.nativeName"
             [placeholder]="'localization.placeholder.native.name' | translate"
@@ -1072,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <label for="direction" class="font-medium"
             >{{ 'localization.language.direction' | translate }} *</label
           >
-          <p-select
+          <f-select
             id="direction"
             [ngModel]="formModel().direction"
             (ngModelChange)="updateDirection($event)"
@@ -1090,7 +905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             'localization.language.display.order' | translate
           }}</label>
           <input
-            pInputText
+            fInputText
             id="serial"
             type="number"
             [formField]="formTree.serial"
@@ -1103,20 +918,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
         <!-- Checkboxes -->
         <div class="flex items-center gap-6 md:col-span-2 pt-4">
-          <label class="p-checkbox-native">
-            <input type="checkbox" [formField]="formTree.isActive" />
-            <span>{{ 'shared.active' | translate }}</span>
-          </label>
-          <label class="p-checkbox-native">
-            <input type="checkbox" [formField]="formTree.isDefault" />
-            <span>{{ 'localization.language.default' | translate }}</span>
-          </label>
+          <f-checkbox [formField]="formTree.isActive" [label]="'shared.active' | translate" />
+          <f-checkbox [formField]="formTree.isDefault" [label]="'localization.language.default' | translate" />
         </div>
 
         <!-- Actions -->
         <div class="flex justify-end gap-4 md:col-span-2 pt-4">
           <button
-            pButton
+            fButton
             severity="secondary"
             [outlined]="true"
             (click)="onCancel()"
@@ -1124,12 +933,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
           </button>
           <button
-            pButton
+            fButton
             type="submit"
             [disabled]="!isFormValid() || isSaving()"
           >
             @if (isSaving()) {
-              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             }
             <span pButtonLabel>{{ 
               isEditMode()
@@ -1139,7 +948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </button>
         </div>
       </form>
-    </p-card>
+    </f-card>
   `,
                 }]
         }], ctorParameters: () => [] });
@@ -1174,7 +983,7 @@ class LanguageListPage {
         this.confirmationService.confirm({
             message: this.translateService.translate('localization.language.confirm.set.default', { name: lang.name }),
             header: this.translateService.translate('localization.language.set.default'),
-            icon: 'pi pi-star',
+            icon: 'star',
             accept: () => {
                 this.languageService
                     .setDefault(lang.id)
@@ -1200,7 +1009,7 @@ class LanguageListPage {
         this.confirmationService.confirm({
             message: this.translateService.translate('shared.confirm.delete'),
             header: this.translateService.translate('localization.language.delete.title'),
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptButtonStyleClass: 'p-button-danger',
             accept: () => {
                 from(this.languageService.delete({ id: lang.id, type: 'delete' }))
@@ -1222,8 +1031,8 @@ class LanguageListPage {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LanguageListPage, isStandalone: true, selector: "lib-language-list-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LanguageListPage, isStandalone: true, selector: "lib-language-list-page", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
     <div class="card">
       <div
         class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
@@ -1237,21 +1046,20 @@ class LanguageListPage {
           </p>
         </div>
         <button
-          pButton
+          fButton
           *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
           (click)="onCreate()"
           class="w-full sm:w-auto"
         >
-          <span pButtonIcon class="pi pi-plus"></span>
+          <ui-icon pButtonIcon name="plus"></ui-icon>
           <span pButtonLabel>{{ 'localization.language.new' | translate }}</span>
         </button>
       </div>
 
       <div class="overflow-x-auto -mx-4 sm:mx-0">
-        <p-table
+        <f-table
           [value]="languageService.data()"
           [loading]="languageService.isLoading()"
-          styleClass="p-datatable-sm"
           [tableStyle]="{ 'min-width': '40rem' }"
         >
           <ng-template #header>
@@ -1273,7 +1081,7 @@ class LanguageListPage {
               <td>{{ lang.name }}</td>
               <td>{{ lang.nativeName || ('shared.na' | translate) }}</td>
               <td>
-                <p-tag
+                <f-tag
                   [value]="
                     lang.direction === 'rtl'
                       ? ('localization.language.rtl' | translate)
@@ -1284,7 +1092,7 @@ class LanguageListPage {
               </td>
               <td>
                 <div class="flex gap-1 items-center">
-                  <p-tag
+                  <f-tag
                     [value]="
                       lang.isActive
                         ? ('shared.active' | translate)
@@ -1293,7 +1101,7 @@ class LanguageListPage {
                     [severity]="lang.isActive ? 'success' : 'secondary'"
                   />
                   @if (lang.isDefault) {
-                    <p-tag
+                    <f-tag
                       [value]="'localization.language.default' | translate"
                       severity="contrast"
                     />
@@ -1304,40 +1112,40 @@ class LanguageListPage {
                 <div class="flex gap-1">
                   @if (!lang.isDefault) {
                     <button
-                      pButton
+                      fButton
                       *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
                       [text]="true"
                       size="small"
-                      [pTooltip]="
+                      [fTooltip]="
                         'localization.language.set.default' | translate
                       "
                       (click)="onSetDefault(lang)"
                     >
-                      <span pButtonIcon class="pi pi-star"></span>
+                      <ui-icon pButtonIcon name="star"></ui-icon>
                     </button>
                   }
                   <button
-                    pButton
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
                     [text]="true"
                     severity="secondary"
                     size="small"
-                    [pTooltip]="'shared.edit' | translate"
+                    [fTooltip]="'shared.edit' | translate"
                     (click)="onEdit(lang.id)"
                   >
-                    <span pButtonIcon class="pi pi-pencil"></span>
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
                   </button>
                   <button
-                    pButton
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
                     [text]="true"
                     severity="danger"
                     size="small"
-                    [pTooltip]="'shared.delete' | translate"
+                    [fTooltip]="'shared.delete' | translate"
                     [disabled]="lang.isDefault"
                     (click)="onDelete(lang)"
                   >
-                    <span pButtonIcon class="pi pi-trash"></span>
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
                   </button>
                 </div>
               </td>
@@ -1351,16 +1159,20 @@ class LanguageListPage {
               </td>
             </tr>
           </ng-template>
-        </p-table>
+        </f-table>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "firstChange", "rowsChange", "totalRecordsChange", "selectionChange", "selectAllChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "onStateSave", "onStateRestore"] }, { kind: "component", type: i3$1.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+
+    <f-confirmdialog />
+    <f-toast />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.ConfirmDialog, selector: "f-confirmdialog", inputs: ["key"] }, { kind: "component", type: i1.ToastComponent, selector: "f-toast", inputs: ["key", "position"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i1.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "sortField", "sortOrder"], outputs: ["sortFieldChange", "sortOrderChange", "onLazyLoad", "onSort"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LanguageListPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageListPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-language-list-page',
-                    imports: [AngularModule, PrimeModule, HasPermissionDirective, TranslatePipe],
+                    imports: [AngularModule, UiModule, HasPermissionDirective, TranslatePipe],
+                    providers: [ConfirmationService, MessageService],
                     template: `
     <div class="card">
       <div
@@ -1375,21 +1187,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </p>
         </div>
         <button
-          pButton
+          fButton
           *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
           (click)="onCreate()"
           class="w-full sm:w-auto"
         >
-          <span pButtonIcon class="pi pi-plus"></span>
+          <ui-icon pButtonIcon name="plus"></ui-icon>
           <span pButtonLabel>{{ 'localization.language.new' | translate }}</span>
         </button>
       </div>
 
       <div class="overflow-x-auto -mx-4 sm:mx-0">
-        <p-table
+        <f-table
           [value]="languageService.data()"
           [loading]="languageService.isLoading()"
-          styleClass="p-datatable-sm"
           [tableStyle]="{ 'min-width': '40rem' }"
         >
           <ng-template #header>
@@ -1411,7 +1222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <td>{{ lang.name }}</td>
               <td>{{ lang.nativeName || ('shared.na' | translate) }}</td>
               <td>
-                <p-tag
+                <f-tag
                   [value]="
                     lang.direction === 'rtl'
                       ? ('localization.language.rtl' | translate)
@@ -1422,7 +1233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               </td>
               <td>
                 <div class="flex gap-1 items-center">
-                  <p-tag
+                  <f-tag
                     [value]="
                       lang.isActive
                         ? ('shared.active' | translate)
@@ -1431,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     [severity]="lang.isActive ? 'success' : 'secondary'"
                   />
                   @if (lang.isDefault) {
-                    <p-tag
+                    <f-tag
                       [value]="'localization.language.default' | translate"
                       severity="contrast"
                     />
@@ -1442,40 +1253,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 <div class="flex gap-1">
                   @if (!lang.isDefault) {
                     <button
-                      pButton
+                      fButton
                       *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
                       [text]="true"
                       size="small"
-                      [pTooltip]="
+                      [fTooltip]="
                         'localization.language.set.default' | translate
                       "
                       (click)="onSetDefault(lang)"
                     >
-                      <span pButtonIcon class="pi pi-star"></span>
+                      <ui-icon pButtonIcon name="star"></ui-icon>
                     </button>
                   }
                   <button
-                    pButton
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
                     [text]="true"
                     severity="secondary"
                     size="small"
-                    [pTooltip]="'shared.edit' | translate"
+                    [fTooltip]="'shared.edit' | translate"
                     (click)="onEdit(lang.id)"
                   >
-                    <span pButtonIcon class="pi pi-pencil"></span>
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
                   </button>
                   <button
-                    pButton
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
                     [text]="true"
                     severity="danger"
                     size="small"
-                    [pTooltip]="'shared.delete' | translate"
+                    [fTooltip]="'shared.delete' | translate"
                     [disabled]="lang.isDefault"
                     (click)="onDelete(lang)"
                   >
-                    <span pButtonIcon class="pi pi-trash"></span>
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
                   </button>
                 </div>
               </td>
@@ -1489,9 +1300,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               </td>
             </tr>
           </ng-template>
-        </p-table>
+        </f-table>
       </div>
     </div>
+
+    <f-confirmdialog />
+    <f-toast />
   `,
                 }]
         }] });
@@ -1507,14 +1321,14 @@ class LocalizationContainerPage {
         {
             id: 'languages',
             labelKey: 'localization.tabs.languages',
-            icon: 'pi pi-globe',
+            icon: 'globe',
             route: 'languages',
             permission: LANGUAGE_PERMISSIONS.READ,
         },
         {
             id: 'keys',
             labelKey: 'localization.tabs.keys',
-            icon: 'pi pi-key',
+            icon: 'key',
             route: 'keys',
             permission: TRANSLATION_KEY_PERMISSIONS.READ,
         },
@@ -1527,8 +1341,8 @@ class LocalizationContainerPage {
         return this.allTabs.filter((tab) => this.permissionValidator.hasPermission(tab.permission));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationContainerPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LocalizationContainerPage, isStandalone: true, selector: "lib-localization-container", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationContainerPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LocalizationContainerPage, isStandalone: true, selector: "lib-localization-container", ngImport: i0, template: `
     <div class="p-2 sm:p-4">
       <div class="mb-4">
         <h1 class="text-xl sm:text-2xl font-bold m-0">{{ 'localization.title' | translate }}</h1>
@@ -1542,7 +1356,7 @@ class LocalizationContainerPage {
             routerLinkActive="tab-active"
             class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0"
           >
-            <i [class]="tab.icon"></i>
+            <lib-icon [icon]="tab.icon"></lib-icon>
             <span>{{ tab.labelKey | translate }}</span>
           </a>
         }
@@ -1550,11 +1364,11 @@ class LocalizationContainerPage {
 
       <router-outlet />
     </div>
-  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LocalizationContainerPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationContainerPage, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-localization-container', imports: [RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], template: `
+            args: [{ selector: 'lib-localization-container', imports: [RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe, IconComponent], template: `
     <div class="p-2 sm:p-4">
       <div class="mb-4">
         <h1 class="text-xl sm:text-2xl font-bold m-0">{{ 'localization.title' | translate }}</h1>
@@ -1568,7 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             routerLinkActive="tab-active"
             class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0"
           >
-            <i [class]="tab.icon"></i>
+            <lib-icon [icon]="tab.icon"></lib-icon>
             <span>{{ tab.labelKey | translate }}</span>
           </a>
         }
@@ -1886,9 +1700,9 @@ class TranslationKeyFormPage {
     onCancel() {
         this.router.navigate(['/localization/keys']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationKeyFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TranslationKeyFormPage, isStandalone: true, selector: "lib-translation-key-form-page", ngImport: i0, template: `
-    <p-card>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TranslationKeyFormPage, isStandalone: true, selector: "lib-translation-key-form-page", providers: [MessageService], ngImport: i0, template: `
+    <f-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
           <h2 class="text-xl font-semibold m-0">
@@ -1914,7 +1728,7 @@ class TranslationKeyFormPage {
                 >{{ 'localization.key.name' | translate }} *</label
               >
               <input
-                pInputText
+                fInputText
                 id="key"
                 [formField]="formTree.key"
                 [placeholder]="'localization.placeholder.key.name' | translate"
@@ -1926,7 +1740,7 @@ class TranslationKeyFormPage {
               <label for="module" class="font-medium"
                 >{{ 'localization.key.module' | translate }} *</label
               >
-              <p-select
+              <f-select
                 id="module"
                 [ngModel]="formModel().module"
                 (ngModelChange)="updateModule($event)"
@@ -1946,7 +1760,7 @@ class TranslationKeyFormPage {
                 >{{ 'localization.key.default.message' | translate }} *</label
               >
               <textarea
-                pInputTextarea
+                fTextarea
                 id="defaultMessage"
                 [formField]="formTree.defaultMessage"
                 [rows]="2"
@@ -1962,7 +1776,7 @@ class TranslationKeyFormPage {
                 'localization.key.description' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="description"
                 [formField]="formTree.description"
                 [placeholder]="
@@ -1977,7 +1791,7 @@ class TranslationKeyFormPage {
                 'localization.key.variables' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="variables"
                 [formField]="formTree.variables"
                 [placeholder]="
@@ -1998,7 +1812,7 @@ class TranslationKeyFormPage {
           </h4>
           @if (isLoadingLanguages()) {
             <div class="flex justify-center py-4">
-              <p-progressspinner strokeWidth="4" />
+              <f-progressspinner strokeWidth="4" />
             </div>
           } @else if (languages().length === 0) {
             <p class="text-muted-color text-center py-4">
@@ -2017,14 +1831,14 @@ class TranslationKeyFormPage {
                         >
                       }
                     </label>
-                    <p-tag
+                    <f-tag
                       [value]="lang.code"
                       severity="secondary"
                       class="uppercase"
                     />
                   </div>
                   <textarea
-                    pInputTextarea
+                    fTextarea
                     [ngModel]="getTranslationValue(lang.id)"
                     (ngModelChange)="setTranslationValue(lang.id, $event)"
                     [ngModelOptions]="{ standalone: true }"
@@ -2043,7 +1857,7 @@ class TranslationKeyFormPage {
         <!-- Actions -->
         <div class="flex justify-end gap-4 pt-4">
           <button
-            pButton
+            fButton
             severity="secondary"
             [outlined]="true"
             (click)="onCancel()"
@@ -2051,12 +1865,12 @@ class TranslationKeyFormPage {
             <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
           </button>
           <button
-            pButton
+            fButton
             type="submit"
             [disabled]="!isFormValid() || isSaving()"
           >
             @if (isSaving()) {
-              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             }
             <span pButtonLabel>{{ 
               isEditMode()
@@ -2066,16 +1880,17 @@ class TranslationKeyFormPage {
           </button>
         </div>
       </form>
-    </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i3$1.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progress-spinner, p-progressspinner", inputs: ["value", "strokeWidth", "animationDuration", "min", "max", "ariaLabel", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </f-card>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.ProgressSpinnerComponent, selector: "f-progressspinner", inputs: ["size", "strokeWidth"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationKeyFormPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyFormPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-translation-key-form-page',
-                    imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
+                    imports: [UiModule, AngularModule, FormsModule, FormField, TranslatePipe],
+                    providers: [MessageService],
                     template: `
-    <p-card>
+    <f-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
           <h2 class="text-xl font-semibold m-0">
@@ -2101,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 >{{ 'localization.key.name' | translate }} *</label
               >
               <input
-                pInputText
+                fInputText
                 id="key"
                 [formField]="formTree.key"
                 [placeholder]="'localization.placeholder.key.name' | translate"
@@ -2113,7 +1928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <label for="module" class="font-medium"
                 >{{ 'localization.key.module' | translate }} *</label
               >
-              <p-select
+              <f-select
                 id="module"
                 [ngModel]="formModel().module"
                 (ngModelChange)="updateModule($event)"
@@ -2133,7 +1948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 >{{ 'localization.key.default.message' | translate }} *</label
               >
               <textarea
-                pInputTextarea
+                fTextarea
                 id="defaultMessage"
                 [formField]="formTree.defaultMessage"
                 [rows]="2"
@@ -2149,7 +1964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 'localization.key.description' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="description"
                 [formField]="formTree.description"
                 [placeholder]="
@@ -2164,7 +1979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 'localization.key.variables' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="variables"
                 [formField]="formTree.variables"
                 [placeholder]="
@@ -2185,7 +2000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </h4>
           @if (isLoadingLanguages()) {
             <div class="flex justify-center py-4">
-              <p-progressspinner strokeWidth="4" />
+              <f-progressspinner strokeWidth="4" />
             </div>
           } @else if (languages().length === 0) {
             <p class="text-muted-color text-center py-4">
@@ -2204,14 +2019,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         >
                       }
                     </label>
-                    <p-tag
+                    <f-tag
                       [value]="lang.code"
                       severity="secondary"
                       class="uppercase"
                     />
                   </div>
                   <textarea
-                    pInputTextarea
+                    fTextarea
                     [ngModel]="getTranslationValue(lang.id)"
                     (ngModelChange)="setTranslationValue(lang.id, $event)"
                     [ngModelOptions]="{ standalone: true }"
@@ -2230,7 +2045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <!-- Actions -->
         <div class="flex justify-end gap-4 pt-4">
           <button
-            pButton
+            fButton
             severity="secondary"
             [outlined]="true"
             (click)="onCancel()"
@@ -2238,12 +2053,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
           </button>
           <button
-            pButton
+            fButton
             type="submit"
             [disabled]="!isFormValid() || isSaving()"
           >
             @if (isSaving()) {
-              <span pButtonIcon class="pi pi-spinner pi-spin"></span>
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             }
             <span pButtonLabel>{{ 
               isEditMode()
@@ -2253,7 +2068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           </button>
         </div>
       </form>
-    </p-card>
+    </f-card>
   `,
                 }]
         }], ctorParameters: () => [] });
@@ -2373,7 +2188,7 @@ class TranslationKeyListPage {
         this.confirmationService.confirm({
             message: this.translateService.translate('shared.confirm.delete'),
             header: this.translateService.translate('localization.key.delete.title'),
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptButtonStyleClass: 'p-button-danger',
             accept: () => {
                 from(this.translationKeyService.delete({ id: key.id, type: 'delete' }))
@@ -2395,8 +2210,8 @@ class TranslationKeyListPage {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationKeyListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TranslationKeyListPage, isStandalone: true, selector: "lib-translation-key-list-page", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TranslationKeyListPage, isStandalone: true, selector: "lib-translation-key-list-page", ngImport: i0, template: `
     <div class="card">
       <div
         class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
@@ -2411,11 +2226,11 @@ class TranslationKeyListPage {
         </div>
         <div class="flex gap-2">
           <button
-            pButton
+            fButton
             *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
             (click)="onCreate()"
           >
-            <span pButtonIcon class="pi pi-plus"></span>
+            <ui-icon pButtonIcon name="plus"></ui-icon>
             <span pButtonLabel>{{ 'localization.key.new' | translate }}</span>
           </button>
         </div>
@@ -2423,7 +2238,7 @@ class TranslationKeyListPage {
 
       <div class="flex flex-col md:flex-row gap-4 mb-4">
         <div class="flex-1">
-          <p-select
+          <f-select
             [options]="moduleOptions()"
             [ngModel]="selectedModule()"
             (ngModelChange)="onModuleChange($event)"
@@ -2436,28 +2251,27 @@ class TranslationKeyListPage {
           />
         </div>
         <div class="flex-1">
-          <p-iconfield class="w-full">
-            <p-inputicon class="pi pi-search" />
+          <f-iconfield class="w-full">
+            <f-inputicon><ui-icon name="search" /></f-inputicon>
             <input
-              pInputText
+              fInputText
               [ngModel]="searchTerm()"
               (ngModelChange)="searchTerm.set($event)"
               [ngModelOptions]="{ standalone: true }"
               [placeholder]="'shared.search' | translate"
               class="w-full"
             />
-          </p-iconfield>
+          </f-iconfield>
         </div>
       </div>
 
       <!-- Table -->
-      <p-table
+      <f-table
         [value]="filteredKeys()"
         [loading]="isLoading()"
         [paginator]="true"
         [rows]="15"
         [rowsPerPageOptions]="[10, 15, 25, 50]"
-        class="p-datatable-sm"
       >
         <ng-template #header>
           <tr>
@@ -2481,7 +2295,7 @@ class TranslationKeyListPage {
           @let languageCount = languages().length;
           <tr>
             <td>
-              <p-tag [value]="key.module" severity="secondary" />
+              <f-tag [value]="key.module" severity="secondary" />
             </td>
             <td>
               <div class="font-medium">{{ key.key }}</div>
@@ -2505,26 +2319,26 @@ class TranslationKeyListPage {
             <td>
               <div class="flex gap-1">
                 <button
-                  pButton
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
                   [text]="true"
                   severity="secondary"
                   size="small"
-                  [pTooltip]="'shared.edit' | translate"
+                  [fTooltip]="'shared.edit' | translate"
                   (click)="onEdit(key)"
                 >
-                  <span pButtonIcon class="pi pi-pencil"></span>
+                  <ui-icon pButtonIcon name="pencil"></ui-icon>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
                   [text]="true"
                   severity="danger"
                   size="small"
-                  [pTooltip]="'shared.delete' | translate"
+                  [fTooltip]="'shared.delete' | translate"
                   (click)="onDelete(key)"
                 >
-                  <span pButtonIcon class="pi pi-trash"></span>
+                  <ui-icon pButtonIcon name="trash"></ui-icon>
                 </button>
               </div>
             </td>
@@ -2537,17 +2351,20 @@ class TranslationKeyListPage {
             </td>
           </tr>
         </ng-template>
-      </p-table>
+      </f-table>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: i2.ButtonLabel, selector: "[pButtonLabel]", inputs: ["pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "component", type: i3$2.IconField, selector: "p-iconfield, p-icon-field", inputs: ["hostName", "iconPosition"] }, { kind: "component", type: i4$2.InputIcon, selector: "p-inputicon", inputs: ["hostName"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "firstChange", "rowsChange", "totalRecordsChange", "selectionChange", "selectAllChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "onStateSave", "onStateRestore"] }, { kind: "component", type: i3$1.Tag, selector: "p-tag", inputs: ["severity", "value", "icon", "rounded"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+
+    <f-confirmdialog />
+    <f-toast />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i1.ConfirmDialog, selector: "f-confirmdialog", inputs: ["key"] }, { kind: "component", type: i1.ToastComponent, selector: "f-toast", inputs: ["key", "position"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i1.IconFieldComponent, selector: "f-iconfield" }, { kind: "component", type: i1.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "component", type: i1.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "sortField", "sortOrder"], outputs: ["sortFieldChange", "sortOrderChange", "onLazyLoad", "onSort"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TranslationKeyListPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyListPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-translation-key-list-page',
                     imports: [
                         AngularModule,
-                        PrimeModule,
+                        UiModule,
                         FormsModule,
                         HasPermissionDirective,
                         TranslatePipe,
@@ -2567,11 +2384,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </div>
         <div class="flex gap-2">
           <button
-            pButton
+            fButton
             *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
             (click)="onCreate()"
           >
-            <span pButtonIcon class="pi pi-plus"></span>
+            <ui-icon pButtonIcon name="plus"></ui-icon>
             <span pButtonLabel>{{ 'localization.key.new' | translate }}</span>
           </button>
         </div>
@@ -2579,7 +2396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
       <div class="flex flex-col md:flex-row gap-4 mb-4">
         <div class="flex-1">
-          <p-select
+          <f-select
             [options]="moduleOptions()"
             [ngModel]="selectedModule()"
             (ngModelChange)="onModuleChange($event)"
@@ -2592,28 +2409,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           />
         </div>
         <div class="flex-1">
-          <p-iconfield class="w-full">
-            <p-inputicon class="pi pi-search" />
+          <f-iconfield class="w-full">
+            <f-inputicon><ui-icon name="search" /></f-inputicon>
             <input
-              pInputText
+              fInputText
               [ngModel]="searchTerm()"
               (ngModelChange)="searchTerm.set($event)"
               [ngModelOptions]="{ standalone: true }"
               [placeholder]="'shared.search' | translate"
               class="w-full"
             />
-          </p-iconfield>
+          </f-iconfield>
         </div>
       </div>
 
       <!-- Table -->
-      <p-table
+      <f-table
         [value]="filteredKeys()"
         [loading]="isLoading()"
         [paginator]="true"
         [rows]="15"
         [rowsPerPageOptions]="[10, 15, 25, 50]"
-        class="p-datatable-sm"
       >
         <ng-template #header>
           <tr>
@@ -2637,7 +2453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           @let languageCount = languages().length;
           <tr>
             <td>
-              <p-tag [value]="key.module" severity="secondary" />
+              <f-tag [value]="key.module" severity="secondary" />
             </td>
             <td>
               <div class="font-medium">{{ key.key }}</div>
@@ -2661,26 +2477,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <td>
               <div class="flex gap-1">
                 <button
-                  pButton
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
                   [text]="true"
                   severity="secondary"
                   size="small"
-                  [pTooltip]="'shared.edit' | translate"
+                  [fTooltip]="'shared.edit' | translate"
                   (click)="onEdit(key)"
                 >
-                  <span pButtonIcon class="pi pi-pencil"></span>
+                  <ui-icon pButtonIcon name="pencil"></ui-icon>
                 </button>
                 <button
-                  pButton
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
                   [text]="true"
                   severity="danger"
                   size="small"
-                  [pTooltip]="'shared.delete' | translate"
+                  [fTooltip]="'shared.delete' | translate"
                   (click)="onDelete(key)"
                 >
-                  <span pButtonIcon class="pi pi-trash"></span>
+                  <ui-icon pButtonIcon name="trash"></ui-icon>
                 </button>
               </div>
             </td>
@@ -2693,8 +2509,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             </td>
           </tr>
         </ng-template>
-      </p-table>
+      </f-table>
     </div>
+
+    <f-confirmdialog />
+    <f-toast />
   `,
                 }]
         }] });