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

package/fesm2022/flusys-ng-localization.mjs

@@ -1,34 +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 i6 from 'primeng/toast';
-import * as i2$1 from 'primeng/confirmdialog';
-import * as i3$1 from 'primeng/table';
-import * as i4$1 from 'primeng/tag';
-import * as i6$1 from 'primeng/tooltip';
-import * as i7 from 'primeng/textarea';
-import * as i9 from 'primeng/progressspinner';
-import * as i4$2 from 'primeng/iconfield';
-import * as i5$1 from 'primeng/inputicon';
 
 const LOCALIZATION_CONFIG = new InjectionToken('LOCALIZATION_CONFIG');
 /** Get localization config with sensible defaults applied */
@@ -162,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: "21.1.5", ngImport: i0, type: LanguageApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.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: "21.1.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: () => [] });
@@ -182,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: "21.1.5", ngImport: i0, type: LocalizationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.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: "21.1.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' }]
         }] });
@@ -226,10 +210,10 @@ class LocalizationInitializerService {
             this.stateService.setLoading(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationInitializerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.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: "21.1.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' }]
         }] });
@@ -238,18 +222,23 @@ class LocalizationStateService {
     platformService = inject(PlatformService);
     document = inject(DOCUMENT);
     appRef = inject(ApplicationRef);
-    primeNG = inject(PrimeNG);
     _loadedModules = new Set();
-    _currentLanguage = signal(null, ...(ngDevMode ? [{ debugName: "_currentLanguage" }] : []));
-    _availableLanguages = signal([], ...(ngDevMode ? [{ debugName: "_availableLanguages" }] : []));
-    _translations = signal({}, ...(ngDevMode ? [{ debugName: "_translations" }] : []));
-    _fallbackMessages = signal({}, ...(ngDevMode ? [{ debugName: "_fallbackMessages" }] : []));
-    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    _currentLanguage = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentLanguage" }] : /* istanbul ignore next */ []));
+    _availableLanguages = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_availableLanguages" }] : /* istanbul ignore next */ []));
+    _translations = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_translations" }] : /* istanbul ignore next */ []));
+    _fallbackMessages = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fallbackMessages" }] : /* istanbul ignore next */ []));
+    _isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
     availableLanguages = this._availableLanguages.asReadonly();
     translations = this._translations.asReadonly();
     fallbackMessages = this._fallbackMessages.asReadonly();
     isLoading = this._isLoading.asReadonly();
-    currentLanguageCode = computed(() => this._currentLanguage()?.code ?? 'en', ...(ngDevMode ? [{ debugName: "currentLanguageCode" }] : []));
+    currentLanguageCode = computed(() => this._currentLanguage()?.code ?? 'en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLanguageCode" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const language = this._currentLanguage();
@@ -259,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);
@@ -375,10 +288,10 @@ class LocalizationStateService {
     updateFallbackMessages(messages) {
         this._fallbackMessages.update((current) => ({ ...current, ...messages }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.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: "21.1.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: () => [] });
@@ -400,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: "21.1.5", ngImport: i0, type: TranslationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.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: "21.1.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: () => [] });
@@ -415,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: "21.1.5", ngImport: i0, type: TranslationKeyApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.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: "21.1.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: () => [] });
@@ -482,10 +395,10 @@ class TranslationLoaderService {
     loadTranslationsAsync(languageCode, clearModules = false) {
         return from(this.loadTranslations(languageCode, clearModules));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.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: "21.1.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' }]
         }] });
@@ -494,127 +407,75 @@ class LanguageSelectorComponent {
     localizationState = inject(LocalizationStateService);
     translationLoader = inject(TranslationLoaderService);
     destroyRef = inject(DestroyRef);
-    document = inject(DOCUMENT);
-    elementRef = inject(ElementRef);
     languages = this.localizationState.availableLanguages;
-    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
-    isActive = this._isActive.asReadonly();
     selectedLanguageCode = this.localizationState.currentLanguageCode;
-    selectedLanguage = computed(() => this.languages().find((l) => l.code === this.selectedLanguageCode()) ?? null, ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : []));
-    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);
-    }
+    selectedLanguage = computed(() => this.languages().find((l) => l.code === this.selectedLanguageCode()) ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : /* istanbul ignore next */ []));
+    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: "21.1.5", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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: "21.1.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);
     translationLoader = inject(TranslationLoaderService);
     destroyRef = inject(DestroyRef);
     languages = this.localizationState.availableLanguages;
-    _selectedLanguageCode = signal(this.localizationState.currentLanguageCode(), ...(ngDevMode ? [{ debugName: "_selectedLanguageCode" }] : []));
+    _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();
@@ -634,53 +495,19 @@ class LanguageSelectorPanelComponent {
                 .subscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageSelectorPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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: "21.1.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: () => [] });
 
@@ -724,9 +551,12 @@ class LanguageFormPage {
     destroyRef = inject(DestroyRef);
     routeParams = toSignal(this.route.paramMap);
     loadTriggered = false;
-    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
-    existingLanguage = signal(null, ...(ngDevMode ? [{ debugName: "existingLanguage" }] : []));
-    isEditMode = computed(() => !!this.existingLanguage(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    isSaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+    existingLanguage = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "existingLanguage" }] : /* istanbul ignore next */ []));
+    isEditMode = computed(() => !!this.existingLanguage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
     translate(key, vars) {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
@@ -739,7 +569,8 @@ class LanguageFormPage {
             label: this.translate('localization.language.direction.rtl'),
             value: 'rtl',
         },
-    ], ...(ngDevMode ? [{ debugName: "directionOptions" }] : []));
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionOptions" }] : /* istanbul ignore next */ []));
     formModel = signal({
         code: '',
         name: '',
@@ -748,7 +579,8 @@ class LanguageFormPage {
         serial: '',
         isActive: true,
         isDefault: false,
-    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
     formTree = form(this.formModel, (f) => {
         required(f.code, {
             message: this.translate('localization.validation.code.required'),
@@ -766,7 +598,8 @@ class LanguageFormPage {
     isFormValid = computed(() => {
         const model = this.formModel();
         return model.code.trim().length > 0 && model.name.trim().length > 0;
-    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const params = this.routeParams();
@@ -847,9 +680,9 @@ class LanguageFormPage {
     onCancel() {
         this.router.navigate(['/localization/languages']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: LanguageFormPage, isStandalone: true, selector: "lib-language-form-page", providers: [MessageService], 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">
@@ -872,7 +705,7 @@ class LanguageFormPage {
             >{{ 'localization.language.code' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="code"
             [formField]="formTree.code"
             [placeholder]="'localization.placeholder.code' | translate"
@@ -888,7 +721,7 @@ class LanguageFormPage {
             >{{ 'localization.language.name' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="name"
             [formField]="formTree.name"
             [placeholder]="'localization.placeholder.name' | translate"
@@ -901,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"
@@ -916,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)"
@@ -934,7 +767,7 @@ class LanguageFormPage {
             'localization.language.display.order' | translate
           }}</label>
           <input
-            pInputText
+            fInputText
             id="serial"
             type="number"
             [formField]="formTree.serial"
@@ -947,49 +780,47 @@ 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">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
             [outlined]="true"
-            (onClick)="onCancel()"
-          />
-          <p-button
-            [label]="
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isSaving()"
+          >
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
               isEditMode()
                 ? ('shared.update' | translate)
                 : ('shared.create' | translate)
-            "
-            type="submit"
-            [loading]="isSaving()"
-            [disabled]="!isFormValid() || isSaving()"
-          />
+             }}</span>
+          </button>
         </div>
       </form>
-    </p-card>
-
-    <p-toast />
-  `, 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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["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: "21.1.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">
@@ -1012,7 +843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             >{{ 'localization.language.code' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="code"
             [formField]="formTree.code"
             [placeholder]="'localization.placeholder.code' | translate"
@@ -1028,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             >{{ 'localization.language.name' | translate }} *</label
           >
           <input
-            pInputText
+            fInputText
             id="name"
             [formField]="formTree.name"
             [placeholder]="'localization.placeholder.name' | translate"
@@ -1041,7 +872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             'localization.language.native.name' | translate
           }}</label>
           <input
-            pInputText
+            fInputText
             id="nativeName"
             [formField]="formTree.nativeName"
             [placeholder]="'localization.placeholder.native.name' | translate"
@@ -1056,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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)"
@@ -1074,7 +905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             'localization.language.display.order' | translate
           }}</label>
           <input
-            pInputText
+            fInputText
             id="serial"
             type="number"
             [formField]="formTree.serial"
@@ -1087,39 +918,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
             [outlined]="true"
-            (onClick)="onCancel()"
-          />
-          <p-button
-            [label]="
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isSaving()"
+          >
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
               isEditMode()
                 ? ('shared.update' | translate)
                 : ('shared.create' | translate)
-            "
-            type="submit"
-            [loading]="isSaving()"
-            [disabled]="!isFormValid() || isSaving()"
-          />
+             }}</span>
+          </button>
         </div>
       </form>
-    </p-card>
-
-    <p-toast />
+    </f-card>
   `,
                 }]
         }], ctorParameters: () => [] });
@@ -1154,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)
@@ -1180,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' }))
@@ -1202,8 +1031,8 @@ class LanguageListPage {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LanguageListPage, isStandalone: true, selector: "lib-language-list-page", providers: [ConfirmationService, MessageService], 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"
@@ -1216,20 +1045,21 @@ class LanguageListPage {
             {{ 'localization.language.subtitle' | translate }}
           </p>
         </div>
-        <p-button
+        <button
+          fButton
           *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
-          [label]="'localization.language.new' | translate"
-          icon="pi pi-plus"
-          (onClick)="onCreate()"
-          styleClass="w-full sm:w-auto"
-        />
+          (click)="onCreate()"
+          class="w-full sm:w-auto"
+        >
+          <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>
@@ -1251,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)
@@ -1262,7 +1092,7 @@ class LanguageListPage {
               </td>
               <td>
                 <div class="flex gap-1 items-center">
-                  <p-tag
+                  <f-tag
                     [value]="
                       lang.isActive
                         ? ('shared.active' | translate)
@@ -1271,7 +1101,7 @@ class LanguageListPage {
                     [severity]="lang.isActive ? 'success' : 'secondary'"
                   />
                   @if (lang.isDefault) {
-                    <p-tag
+                    <f-tag
                       [value]="'localization.language.default' | translate"
                       severity="contrast"
                     />
@@ -1281,36 +1111,42 @@ class LanguageListPage {
               <td>
                 <div class="flex gap-1">
                   @if (!lang.isDefault) {
-                    <p-button
+                    <button
+                      fButton
                       *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
-                      icon="pi pi-star"
                       [text]="true"
                       size="small"
-                      [pTooltip]="
+                      [fTooltip]="
                         'localization.language.set.default' | translate
                       "
-                      (onClick)="onSetDefault(lang)"
-                    />
+                      (click)="onSetDefault(lang)"
+                    >
+                      <ui-icon pButtonIcon name="star"></ui-icon>
+                    </button>
                   }
-                  <p-button
+                  <button
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
-                    icon="pi pi-pencil"
                     [text]="true"
                     severity="secondary"
                     size="small"
-                    [pTooltip]="'shared.edit' | translate"
-                    (onClick)="onEdit(lang.id)"
-                  />
-                  <p-button
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(lang.id)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  <button
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
-                    icon="pi pi-trash"
                     [text]="true"
                     severity="danger"
                     size="small"
-                    [pTooltip]="'shared.delete' | translate"
+                    [fTooltip]="'shared.delete' | translate"
                     [disabled]="lang.isDefault"
-                    (onClick)="onDelete(lang)"
-                  />
+                    (click)="onDelete(lang)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -1323,19 +1159,19 @@ class LanguageListPage {
               </td>
             </tr>
           </ng-template>
-        </p-table>
+        </f-table>
       </div>
     </div>
 
-    <p-confirmDialog />
-    <p-toast />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "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", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "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: "21.1.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">
@@ -1350,20 +1186,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             {{ 'localization.language.subtitle' | translate }}
           </p>
         </div>
-        <p-button
+        <button
+          fButton
           *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
-          [label]="'localization.language.new' | translate"
-          icon="pi pi-plus"
-          (onClick)="onCreate()"
-          styleClass="w-full sm:w-auto"
-        />
+          (click)="onCreate()"
+          class="w-full sm:w-auto"
+        >
+          <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>
@@ -1385,7 +1222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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)
@@ -1396,7 +1233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </td>
               <td>
                 <div class="flex gap-1 items-center">
-                  <p-tag
+                  <f-tag
                     [value]="
                       lang.isActive
                         ? ('shared.active' | translate)
@@ -1405,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     [severity]="lang.isActive ? 'success' : 'secondary'"
                   />
                   @if (lang.isDefault) {
-                    <p-tag
+                    <f-tag
                       [value]="'localization.language.default' | translate"
                       severity="contrast"
                     />
@@ -1415,36 +1252,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               <td>
                 <div class="flex gap-1">
                   @if (!lang.isDefault) {
-                    <p-button
+                    <button
+                      fButton
                       *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
-                      icon="pi pi-star"
                       [text]="true"
                       size="small"
-                      [pTooltip]="
+                      [fTooltip]="
                         'localization.language.set.default' | translate
                       "
-                      (onClick)="onSetDefault(lang)"
-                    />
+                      (click)="onSetDefault(lang)"
+                    >
+                      <ui-icon pButtonIcon name="star"></ui-icon>
+                    </button>
                   }
-                  <p-button
+                  <button
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
-                    icon="pi pi-pencil"
                     [text]="true"
                     severity="secondary"
                     size="small"
-                    [pTooltip]="'shared.edit' | translate"
-                    (onClick)="onEdit(lang.id)"
-                  />
-                  <p-button
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(lang.id)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  <button
+                    fButton
                     *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
-                    icon="pi pi-trash"
                     [text]="true"
                     severity="danger"
                     size="small"
-                    [pTooltip]="'shared.delete' | translate"
+                    [fTooltip]="'shared.delete' | translate"
                     [disabled]="lang.isDefault"
-                    (onClick)="onDelete(lang)"
-                  />
+                    (click)="onDelete(lang)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -1457,12 +1300,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </td>
             </tr>
           </ng-template>
-        </p-table>
+        </f-table>
       </div>
     </div>
 
-    <p-confirmDialog />
-    <p-toast />
+    <f-confirmdialog />
+    <f-toast />
   `,
                 }]
         }] });
@@ -1478,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,
         },
@@ -1496,9 +1339,10 @@ class LocalizationContainerPage {
         if (!permissions.length)
             return [];
         return this.allTabs.filter((tab) => this.permissionValidator.hasPermission(tab.permission));
-    }, ...(ngDevMode ? [{ debugName: "visibleTabs" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationContainerPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LocalizationContainerPage, isStandalone: true, selector: "lib-localization-container", ngImport: i0, template: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
+    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>
@@ -1512,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>
         }
@@ -1520,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", "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: "21.1.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>
@@ -1538,7 +1382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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>
         }
@@ -1606,24 +1450,33 @@ class TranslationKeyFormPage {
     destroyRef = inject(DestroyRef);
     routeParams = toSignal(this.route.paramMap);
     loadTriggered = false;
-    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
-    isLoadingLanguages = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLanguages" }] : []));
-    existingKey = signal(null, ...(ngDevMode ? [{ debugName: "existingKey" }] : []));
-    isEditMode = computed(() => !!this.existingKey(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
-    modules = signal([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
-    translations = signal([], ...(ngDevMode ? [{ debugName: "translations" }] : []));
+    isSaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+    isLoadingLanguages = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoadingLanguages" }] : /* istanbul ignore next */ []));
+    existingKey = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "existingKey" }] : /* istanbul ignore next */ []));
+    isEditMode = computed(() => !!this.existingKey(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    languages = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+    modules = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
+    translations = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translations" }] : /* istanbul ignore next */ []));
     translate(key, vars) {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
-    moduleOptions = computed(() => this.modules().map((m) => ({ label: m, value: m })), ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
+    moduleOptions = computed(() => this.modules().map((m) => ({ label: m, value: m })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moduleOptions" }] : /* istanbul ignore next */ []));
     formModel = signal({
         key: '',
         module: '',
         defaultMessage: '',
         description: '',
         variables: '',
-    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
     formTree = form(this.formModel, (f) => {
         required(f.key, {
             message: this.translate('localization.validation.key.required'),
@@ -1637,7 +1490,8 @@ class TranslationKeyFormPage {
         return (model.key.trim().length > 0 &&
             model.module.trim().length > 0 &&
             model.defaultMessage.trim().length > 0);
-    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const params = this.routeParams();
@@ -1846,9 +1700,9 @@ class TranslationKeyFormPage {
     onCancel() {
         this.router.navigate(['/localization/keys']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TranslationKeyFormPage, isStandalone: true, selector: "lib-translation-key-form-page", providers: [MessageService], 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">
@@ -1874,7 +1728,7 @@ class TranslationKeyFormPage {
                 >{{ 'localization.key.name' | translate }} *</label
               >
               <input
-                pInputText
+                fInputText
                 id="key"
                 [formField]="formTree.key"
                 [placeholder]="'localization.placeholder.key.name' | translate"
@@ -1886,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)"
@@ -1906,7 +1760,7 @@ class TranslationKeyFormPage {
                 >{{ 'localization.key.default.message' | translate }} *</label
               >
               <textarea
-                pInputTextarea
+                fTextarea
                 id="defaultMessage"
                 [formField]="formTree.defaultMessage"
                 [rows]="2"
@@ -1922,7 +1776,7 @@ class TranslationKeyFormPage {
                 'localization.key.description' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="description"
                 [formField]="formTree.description"
                 [placeholder]="
@@ -1937,7 +1791,7 @@ class TranslationKeyFormPage {
                 'localization.key.variables' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="variables"
                 [formField]="formTree.variables"
                 [placeholder]="
@@ -1958,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">
@@ -1977,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 }"
@@ -2002,37 +1856,41 @@ class TranslationKeyFormPage {
 
         <!-- Actions -->
         <div class="flex justify-end gap-4 pt-4">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
             [outlined]="true"
-            (onClick)="onCancel()"
-          />
-          <p-button
-            [label]="
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isSaving()"
+          >
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
               isEditMode()
                 ? ('shared.update' | translate)
                 : ('shared.create' | translate)
-            "
-            type="submit"
-            [loading]="isSaving()"
-            [disabled]="!isFormValid() || isSaving()"
-          />
+             }}</span>
+          </button>
         </div>
       </form>
-    </p-card>
-
-    <p-toast />
-  `, 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "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: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["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: "21.1.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">
@@ -2058,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 >{{ 'localization.key.name' | translate }} *</label
               >
               <input
-                pInputText
+                fInputText
                 id="key"
                 [formField]="formTree.key"
                 [placeholder]="'localization.placeholder.key.name' | translate"
@@ -2070,7 +1928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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)"
@@ -2090,7 +1948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 >{{ 'localization.key.default.message' | translate }} *</label
               >
               <textarea
-                pInputTextarea
+                fTextarea
                 id="defaultMessage"
                 [formField]="formTree.defaultMessage"
                 [rows]="2"
@@ -2106,7 +1964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 'localization.key.description' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="description"
                 [formField]="formTree.description"
                 [placeholder]="
@@ -2121,7 +1979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 'localization.key.variables' | translate
               }}</label>
               <input
-                pInputText
+                fInputText
                 id="variables"
                 [formField]="formTree.variables"
                 [placeholder]="
@@ -2142,7 +2000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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">
@@ -2161,14 +2019,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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 }"
@@ -2186,27 +2044,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
         <!-- Actions -->
         <div class="flex justify-end gap-4 pt-4">
-          <p-button
-            [label]="'shared.cancel' | translate"
+          <button
+            fButton
             severity="secondary"
             [outlined]="true"
-            (onClick)="onCancel()"
-          />
-          <p-button
-            [label]="
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isSaving()"
+          >
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
               isEditMode()
                 ? ('shared.update' | translate)
                 : ('shared.create' | translate)
-            "
-            type="submit"
-            [loading]="isSaving()"
-            [disabled]="!isFormValid() || isSaving()"
-          />
+             }}</span>
+          </button>
         </div>
       </form>
-    </p-card>
-
-    <p-toast />
+    </f-card>
   `,
                 }]
         }], ctorParameters: () => [] });
@@ -2226,17 +2088,25 @@ class TranslationKeyListPage {
     messageService = inject(MessageService);
     translateService = inject(TranslateService);
     destroyRef = inject(DestroyRef);
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
-    modules = signal([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
-    translationKeys = signal([], ...(ngDevMode ? [{ debugName: "translationKeys" }] : []));
-    translationCounts = signal(new Map(), ...(ngDevMode ? [{ debugName: "translationCounts" }] : []));
-    selectedModule = signal(null, ...(ngDevMode ? [{ debugName: "selectedModule" }] : []));
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    languages = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+    modules = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
+    translationKeys = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translationKeys" }] : /* istanbul ignore next */ []));
+    translationCounts = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translationCounts" }] : /* istanbul ignore next */ []));
+    selectedModule = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedModule" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     moduleOptions = computed(() => [
         { label: this.translateService.translate('shared.all'), value: null },
         ...this.modules().map((m) => ({ label: m, value: m })),
-    ], ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moduleOptions" }] : /* istanbul ignore next */ []));
     filteredKeys = computed(() => {
         let keys = this.translationKeys();
         const module = this.selectedModule();
@@ -2250,7 +2120,8 @@ class TranslationKeyListPage {
                 k.module.toLowerCase().includes(search));
         }
         return keys;
-    }, ...(ngDevMode ? [{ debugName: "filteredKeys" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredKeys" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.loadData();
     }
@@ -2317,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' }))
@@ -2339,8 +2210,8 @@ class TranslationKeyListPage {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TranslationKeyListPage, isStandalone: true, selector: "lib-translation-key-list-page", providers: [ConfirmationService, MessageService], 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"
@@ -2354,18 +2225,20 @@ class TranslationKeyListPage {
           </p>
         </div>
         <div class="flex gap-2">
-          <p-button
+          <button
+            fButton
             *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
-            [label]="'localization.key.new' | translate"
-            icon="pi pi-plus"
-            (onClick)="onCreate()"
-          />
+            (click)="onCreate()"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'localization.key.new' | translate }}</span>
+          </button>
         </div>
       </div>
 
       <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)"
@@ -2378,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>
@@ -2423,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>
@@ -2446,24 +2318,28 @@ class TranslationKeyListPage {
             </td>
             <td>
               <div class="flex gap-1">
-                <p-button
+                <button
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
-                  icon="pi pi-pencil"
                   [text]="true"
                   severity="secondary"
                   size="small"
-                  [pTooltip]="'shared.edit' | translate"
-                  (onClick)="onEdit(key)"
-                />
-                <p-button
+                  [fTooltip]="'shared.edit' | translate"
+                  (click)="onEdit(key)"
+                >
+                  <ui-icon pButtonIcon name="pencil"></ui-icon>
+                </button>
+                <button
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
-                  icon="pi pi-trash"
                   [text]="true"
                   severity="danger"
                   size="small"
-                  [pTooltip]="'shared.delete' | translate"
-                  (onClick)="onDelete(key)"
-                />
+                  [fTooltip]="'shared.delete' | translate"
+                  (click)="onDelete(key)"
+                >
+                  <ui-icon pButtonIcon name="trash"></ui-icon>
+                </button>
               </div>
             </td>
           </tr>
@@ -2475,25 +2351,24 @@ class TranslationKeyListPage {
             </td>
           </tr>
         </ng-template>
-      </p-table>
+      </f-table>
     </div>
 
-    <p-confirmDialog />
-    <p-toast />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "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", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "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: "21.1.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,
                     ],
-                    providers: [ConfirmationService, MessageService],
                     template: `
     <div class="card">
       <div
@@ -2508,18 +2383,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           </p>
         </div>
         <div class="flex gap-2">
-          <p-button
+          <button
+            fButton
             *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
-            [label]="'localization.key.new' | translate"
-            icon="pi pi-plus"
-            (onClick)="onCreate()"
-          />
+            (click)="onCreate()"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'localization.key.new' | translate }}</span>
+          </button>
         </div>
       </div>
 
       <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)"
@@ -2532,28 +2409,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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>
@@ -2577,7 +2453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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>
@@ -2600,24 +2476,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             </td>
             <td>
               <div class="flex gap-1">
-                <p-button
+                <button
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
-                  icon="pi pi-pencil"
                   [text]="true"
                   severity="secondary"
                   size="small"
-                  [pTooltip]="'shared.edit' | translate"
-                  (onClick)="onEdit(key)"
-                />
-                <p-button
+                  [fTooltip]="'shared.edit' | translate"
+                  (click)="onEdit(key)"
+                >
+                  <ui-icon pButtonIcon name="pencil"></ui-icon>
+                </button>
+                <button
+                  fButton
                   *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
-                  icon="pi pi-trash"
                   [text]="true"
                   severity="danger"
                   size="small"
-                  [pTooltip]="'shared.delete' | translate"
-                  (onClick)="onDelete(key)"
-                />
+                  [fTooltip]="'shared.delete' | translate"
+                  (click)="onDelete(key)"
+                >
+                  <ui-icon pButtonIcon name="trash"></ui-icon>
+                </button>
               </div>
             </td>
           </tr>
@@ -2629,11 +2509,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             </td>
           </tr>
         </ng-template>
-      </p-table>
+      </f-table>
     </div>
 
-    <p-confirmDialog />
-    <p-toast />
+    <f-confirmdialog />
+    <f-toast />
   `,
                 }]
         }] });