@flusys/ng-localization 1.2.0-rc.1

package/fesm2022/flusys-ng-localization.mjs

@@ -0,0 +1,2556 @@
+import * as i0 from '@angular/core';
+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, finalize, forkJoin } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@flusys/ng-ui';
+import { UiModule, MenuComponent, MessageService, ConfirmationService } from '@flusys/ng-ui';
+import { LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL } from '@flusys/ng-layout';
+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';
+
+const LOCALIZATION_CONFIG = new InjectionToken('LOCALIZATION_CONFIG');
+/** Get localization config with sensible defaults applied */
+function getLocalizationConfig(overrides) {
+    const defaults = {
+        defaultLanguageCode: 'en',
+        loadStrategy: 'all',
+        initialModules: [],
+        enableLayoutSelector: false,
+    };
+    return {
+        ...defaults,
+        ...overrides,
+        defaultLanguageCode: overrides?.defaultLanguageCode || defaults.defaultLanguageCode,
+    };
+}
+
+const STORAGE_KEYS = {
+    CURRENT_LANGUAGE: 'flusys.language',
+};
+
+const LOCALIZATION_MESSAGES = {
+    // Language CRUD (API keys)
+    'language.create.success': 'Language created successfully',
+    'language.create.many.success': '{{count}} languages created successfully',
+    'language.get.success': 'Language retrieved successfully',
+    'language.get.by.ids.success': 'Languages retrieved successfully by Ids',
+    'language.get.by.filter.success': 'Languages retrieved successfully by filter',
+    'language.get.all.success': 'Languages retrieved successfully',
+    'language.update.success': 'Language updated successfully',
+    'language.update.many.success': '{{count}} languages updated successfully',
+    'language.delete.success': 'Language deleted successfully',
+    'language.restore.success': 'Language restored successfully',
+    'language.active.success': 'Active languages retrieved successfully',
+    'language.set.default.success': 'Default language updated successfully',
+    'language.get.default.success': 'Default language retrieved successfully',
+    // Translation key CRUD (API keys)
+    'translation.key.create.success': 'Translation key created successfully',
+    'translation.key.create.many.success': '{{count}} translation keys created successfully',
+    'translation.key.get.success': 'Translation key retrieved successfully',
+    'translation.key.get.by.ids.success': 'Translation keys retrieved successfully by Ids',
+    'translation.key.get.by.filter.success': 'Translation keys retrieved successfully by filter',
+    'translation.key.get.all.success': 'Translation keys retrieved successfully',
+    'translation.key.update.success': 'Translation key updated successfully',
+    'translation.key.update.many.success': '{{count}} translation keys updated successfully',
+    'translation.key.delete.success': 'Translation key deleted successfully',
+    'translation.key.restore.success': 'Translation key restored successfully',
+    'translation.key.modules.success': 'Modules retrieved successfully',
+    'translation.key.readonly.delete.forbidden': 'Cannot delete readonly translation keys: {{keys}}',
+    'translation.key.readonly.update.forbidden': 'Cannot modify key or module of system translation keys',
+    'translation.key.duplicate.key.in.module': 'Translation key "{{key}}" already exists in module "{{module}}"',
+    // Translation CRUD (API keys)
+    'translation.create.success': 'Translation created successfully',
+    'translation.create.many.success': '{{count}} translations created successfully',
+    'translation.get.success': 'Translation retrieved successfully',
+    'translation.get.by.ids.success': 'Translations retrieved successfully by Ids',
+    'translation.get.by.filter.success': 'Translations retrieved successfully by filter',
+    'translation.get.all.success': 'Translations retrieved successfully',
+    'translation.update.success': 'Translation updated successfully',
+    'translation.update.many.success': '{{count}} translations updated successfully',
+    'translation.delete.success': 'Translation deleted successfully',
+    'translation.restore.success': 'Translation restored successfully',
+    'translation.by.language.success': 'Translations retrieved successfully',
+    // pages/localization-container/localization-container.page.ts
+    'localization.title': 'Localization',
+    'localization.subtitle': 'Manage languages and translations',
+    'localization.tabs.languages': 'Languages',
+    'localization.tabs.keys': 'Keys',
+    // pages/language-list/language-list.page.ts
+    'localization.language.title': 'Languages',
+    'localization.language.subtitle': 'Manage available languages for your application',
+    'localization.language.new': 'Add Language',
+    'localization.language.code': 'Language Code',
+    'localization.language.name': 'Language Name',
+    'localization.language.native.name': 'Native Name',
+    'localization.language.direction': 'Text Direction',
+    'localization.language.rtl': 'RTL',
+    'localization.language.ltr': 'LTR',
+    'localization.language.default': 'Default',
+    'localization.language.set.default': 'Set as Default',
+    'localization.language.empty': 'No languages configured. Add a language to get started.',
+    'localization.language.confirm.set.default': 'Set "{{name}}" as the default language?',
+    'localization.language.delete.title': 'Delete Language',
+    // pages/language-form/language-form.page.ts
+    'localization.language.edit': 'Edit Language',
+    'localization.placeholder.code': 'en',
+    'localization.language.iso.code.hint': 'ISO 639-1 language code (e.g., en, ar, fr)',
+    'localization.placeholder.name': 'English',
+    'localization.placeholder.native.name': 'English',
+    'localization.language.native.name.hint': 'Name in the native language (e.g., العربية for Arabic)',
+    'localization.language.display.order': 'Display Order',
+    'localization.language.direction.ltr': 'Left to Right (LTR)',
+    'localization.language.direction.rtl': 'Right to Left (RTL)',
+    'localization.validation.code.required': 'Language code is required',
+    'localization.validation.code.max.length': 'Language code must be at most 10 characters',
+    'localization.validation.name.required': 'Language name is required',
+    'localization.validation.name.max.length': 'Language name must be at most 100 characters',
+    // pages/translation-key-list/translation-key-list.page.ts
+    'localization.key.title': 'Translation Keys',
+    'localization.key.subtitle': 'Manage translation keys for your application',
+    'localization.key.new': 'Add Key',
+    'localization.key.filter.module': 'Filter by module',
+    'localization.key.module': 'Module',
+    'localization.key.name': 'Key Name',
+    'localization.key.default.message': 'Default Message',
+    'localization.key.translations': 'Translations',
+    'localization.key.empty': 'No translation keys found',
+    'localization.key.delete.title': 'Delete Translation Key',
+    // pages/translation-key-form/translation-key-form.page.ts
+    'localization.key.edit': 'Edit Key',
+    'localization.key.about': 'Key Information',
+    'localization.placeholder.key.name': 'button.submit',
+    'localization.key.select.module': 'Select or enter module',
+    'localization.placeholder.default.message': 'Enter default value (English)',
+    'localization.key.description': 'Description',
+    'localization.placeholder.key.description': 'Optional description for translators',
+    'localization.key.variables': 'Variables',
+    'localization.key.variables.placeholder': 'e.g., name, count, date',
+    'localization.key.variables.hint': 'Enter variable names used in this translation',
+    'localization.key.translations.section': 'Translations',
+    'localization.key.no.languages': 'No active languages configured',
+    'localization.key.enter.translation': 'Enter translation',
+    'localization.validation.key.required': 'Translation key is required',
+    'localization.validation.default.message.required': 'Default message is required',
+};
+
+class LanguageApiService extends ApiResourceService {
+    constructor() {
+        super('language', 'localization');
+    }
+    setDefault(id) {
+        return this.http.post(`${this.baseUrl}/set-default`, { id });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class LocalizationApiService {
+    http = inject(HttpClient);
+    appConfig = inject(APP_CONFIG);
+    get baseUrl() {
+        return `${this.appConfig.apiBaseUrl}/localization`;
+    }
+    getActiveLanguages() {
+        return this.http.post(`${this.baseUrl}/language/get-active`, {});
+    }
+    getTranslationsByLanguage(languageCode, modules) {
+        return this.http.post(`${this.baseUrl}/translation/get-by-language`, { languageCode, ...(modules?.length ? { modules } : {}) });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LocalizationInitializerService {
+    apiService = inject(LOCALIZATION_API_SERVICE, {
+        optional: false,
+    });
+    stateService = inject(LOCALIZATION_STATE_SERVICE, {
+        optional: false,
+    });
+    async initialize(initialFallbackMessages) {
+        try {
+            this.stateService.setLoading(true);
+            if (initialFallbackMessages) {
+                this.stateService.updateFallbackMessages(initialFallbackMessages);
+            }
+            const languagesResponse = await firstValueFrom(this.apiService.getActiveLanguages());
+            if (languagesResponse.success && languagesResponse.data) {
+                this.stateService.setAvailableLanguages(languagesResponse.data);
+                const savedCode = this.stateService.getSavedLanguageCode();
+                let selectedLanguage = languagesResponse.data.find((l) => l.code === savedCode);
+                if (!selectedLanguage) {
+                    selectedLanguage = languagesResponse.data.find((l) => l.isDefault);
+                }
+                if (!selectedLanguage && languagesResponse.data.length > 0) {
+                    selectedLanguage = languagesResponse.data[0];
+                }
+                if (selectedLanguage) {
+                    this.stateService.setCurrentLanguage(selectedLanguage);
+                }
+            }
+        }
+        catch (error) {
+            // Silently fail - use default language
+        }
+        finally {
+            this.stateService.setLoading(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationInitializerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationInitializerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationInitializerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LocalizationStateService {
+    platformService = inject(PlatformService);
+    document = inject(DOCUMENT);
+    appRef = inject(ApplicationRef);
+    _loadedModules = new Set();
+    _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', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLanguageCode" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const language = this._currentLanguage();
+            if (language && !this.platformService.isServer) {
+                this.document.documentElement.dir = language.direction ?? 'ltr';
+                this.document.documentElement.lang = language.code;
+                localStorage.setItem(STORAGE_KEYS.CURRENT_LANGUAGE, language.code);
+            }
+        });
+        effect(() => {
+            this._translations();
+            setTimeout(() => this.appRef.tick(), 0);
+        });
+    }
+    setCurrentLanguage(language) {
+        this._currentLanguage.set(language);
+    }
+    setAvailableLanguages(languages) {
+        this._availableLanguages.set(languages);
+    }
+    setTranslations(translations) {
+        this._translations.set(translations);
+    }
+    mergeTranslations(translations) {
+        this._translations.update((current) => ({ ...current, ...translations }));
+    }
+    setLoading(loading) {
+        this._isLoading.set(loading);
+    }
+    getSavedLanguageCode() {
+        if (this.platformService.isServer)
+            return null;
+        return localStorage.getItem(STORAGE_KEYS.CURRENT_LANGUAGE);
+    }
+    isModuleLoaded(module) {
+        return this._loadedModules.has(module);
+    }
+    markModuleLoaded(module) {
+        this._loadedModules.add(module);
+    }
+    getLoadedModules() {
+        return Array.from(this._loadedModules);
+    }
+    clearLoadedModules() {
+        this._loadedModules.clear();
+    }
+    updateFallbackMessages(messages) {
+        this._fallbackMessages.update((current) => ({ ...current, ...messages }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LocalizationStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TranslationApiService extends ApiResourceService {
+    constructor() {
+        super('translation', 'localization');
+    }
+    getByKeyId(translationKeyId) {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 1000 },
+            filter: { translationKeyId },
+            sort: {},
+        });
+    }
+    getCounts() {
+        return this.http.post(`${this.baseUrl}/get-counts`, {});
+    }
+    bulkUpdate(translations) {
+        return this.http.post(`${this.baseUrl}/update-many-values`, { translations });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TranslationKeyApiService extends ApiResourceService {
+    constructor() {
+        super('translation-key', 'localization');
+    }
+    getModules() {
+        return this.http.post(`${this.baseUrl}/get-modules`, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TranslationLoaderService {
+    DEFAULT_INITIAL_MODULES = ['shared', 'layout'];
+    config = inject(LOCALIZATION_CONFIG, { optional: true });
+    apiService = inject(LOCALIZATION_API_SERVICE, {
+        optional: false,
+    });
+    stateService = inject(LOCALIZATION_STATE_SERVICE, {
+        optional: false,
+    });
+    async loadTranslations(languageCode, clearModules = false) {
+        const strategy = this.config?.loadStrategy ?? 'all';
+        // Save currently loaded modules before clearing (for language switch)
+        const previouslyLoadedModules = clearModules
+            ? this.stateService.getLoadedModules()
+            : [];
+        if (clearModules) {
+            this.stateService.clearLoadedModules();
+        }
+        this.stateService.setLoading(true);
+        try {
+            if (strategy === 'all') {
+                await this.loadAndSetTranslations(languageCode);
+            }
+            else {
+                const modules = this.config?.initialModules ?? this.DEFAULT_INITIAL_MODULES;
+                await this.loadAndSetTranslations(languageCode, modules);
+                // Reload all previously loaded modules for the new language
+                if (previouslyLoadedModules.length > 0) {
+                    await this.reloadModules(languageCode, previouslyLoadedModules);
+                }
+            }
+        }
+        finally {
+            this.stateService.setLoading(false);
+        }
+    }
+    async loadAndSetTranslations(languageCode, modules) {
+        const response = await firstValueFrom(this.apiService.getTranslationsByLanguage(languageCode, modules));
+        if (response.success && response.data) {
+            this.stateService.setTranslations(response.data);
+            if (modules) {
+                modules.forEach((m) => this.stateService.markModuleLoaded(m));
+            }
+        }
+    }
+    async reloadModules(languageCode, modules) {
+        const initialModules = this.config?.initialModules ?? this.DEFAULT_INITIAL_MODULES;
+        const additionalModules = modules.filter((m) => !initialModules.includes(m));
+        if (additionalModules.length === 0)
+            return;
+        const response = await firstValueFrom(this.apiService.getTranslationsByLanguage(languageCode, additionalModules));
+        if (response.success && response.data) {
+            this.stateService.mergeTranslations(response.data);
+            additionalModules.forEach((m) => this.stateService.markModuleLoaded(m));
+        }
+    }
+    loadTranslationsAsync(languageCode, clearModules = false) {
+        return from(this.loadTranslations(languageCode, clearModules));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationLoaderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LanguageSelectorComponent {
+    localizationState = inject(LocalizationStateService);
+    translationLoader = inject(TranslationLoaderService);
+    destroyRef = inject(DestroyRef);
+    languages = this.localizationState.availableLanguages;
+    selectedLanguageCode = this.localizationState.currentLanguageCode;
+    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.translationLoader
+                .loadTranslationsAsync(code, true)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe();
+        }
+    }
+    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]="menu.visible()"
+      (click)="menu.toggle($event)"
+    >
+      <ui-icon name="globe"></ui-icon>
+      <span class="font-semibold">{{
+        selectedLanguage()?.nativeName ||
+          selectedLanguage()?.name ||
+          selectedLanguageCode()
+      }}</span>
+    </button>
+    <f-menu
+      #menu
+      [model]="menuItems()"
+      [popup]="true"
+      class="absolute left-[0]"
+      [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", "severity"] }, { kind: "component", type: i1.MenuComponent, selector: "f-menu", inputs: ["model", "popup", "appendTo", "styleClass", "style"], outputs: ["onShow", "onHide"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-language-selector',
+                    imports: [UiModule],
+                    host: { class: 'relative' },
+                    template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      [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>
+    <f-menu
+      #menu
+      [model]="menuItems()"
+      [popup]="true"
+      class="absolute left-[0]"
+      [style]="{ 'inset-inline-end': '0' }"
+    />
+  `,
+                }]
+        }] });
+
+class LanguageSelectorPanelComponent {
+    localizationState = inject(LocalizationStateService);
+    translationLoader = inject(TranslationLoaderService);
+    destroyRef = inject(DestroyRef);
+    languages = this.localizationState.availableLanguages;
+    _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();
+            if (currentCode !== this._selectedLanguageCode()) {
+                this._selectedLanguageCode.set(currentCode);
+            }
+        });
+    }
+    onLanguageSelect(code) {
+        const language = this.languages().find((l) => l.code === code);
+        if (language) {
+            this._selectedLanguageCode.set(code);
+            this.localizationState.setCurrentLanguage(language);
+            this.translationLoader
+                .loadTranslationsAsync(code, true)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe();
+        }
+    }
+    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 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", "appendTo", "styleClass", "style"], outputs: ["onShow", "onHide"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageSelectorPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-language-selector-panel',
+                    imports: [MenuComponent],
+                    host: {
+                        class: 'hidden absolute 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: `<f-menu [model]="menuItems()" />`,
+                }]
+        }], ctorParameters: () => [] });
+
+function provideLocalization(config, initialFallbackMessages) {
+    const providers = [
+        // 1. Value/Existing Providers
+        { provide: LOCALIZATION_CONFIG, useValue: config },
+        {
+            provide: LOCALIZATION_STATE_SERVICE,
+            useExisting: LocalizationStateService,
+        },
+        { provide: LOCALIZATION_API_SERVICE, useExisting: LocalizationApiService },
+        // 2. The Service itself
+        LocalizationInitializerService,
+        // 3. The modern Initializer
+        provideAppInitializer(() => {
+            const initializer = inject(LocalizationInitializerService);
+            return initializer.initialize(initialFallbackMessages);
+        }),
+    ];
+    if (config.enableLayoutSelector) {
+        providers.push({
+            provide: LAYOUT_LANGUAGE_SELECTOR,
+            useValue: LanguageSelectorComponent,
+        }, {
+            provide: LAYOUT_LANGUAGE_SELECTOR_PANEL,
+            useValue: LanguageSelectorPanelComponent,
+        });
+    }
+    return providers;
+}
+
+class LanguageFormPage {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    languageService = inject(LanguageApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    destroyRef = inject(DestroyRef);
+    routeParams = toSignal(this.route.paramMap);
+    loadTriggered = false;
+    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;
+    }
+    directionOptions = computed(() => [
+        {
+            label: this.translate('localization.language.direction.ltr'),
+            value: 'ltr',
+        },
+        {
+            label: this.translate('localization.language.direction.rtl'),
+            value: 'rtl',
+        },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionOptions" }] : /* istanbul ignore next */ []));
+    formModel = signal({
+        code: '',
+        name: '',
+        nativeName: '',
+        direction: 'ltr',
+        serial: '',
+        isActive: true,
+        isDefault: false,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
+    formTree = form(this.formModel, (f) => {
+        required(f.code, {
+            message: this.translate('localization.validation.code.required'),
+        });
+        maxLength(f.code, 10, {
+            message: this.translate('localization.validation.code.max.length'),
+        });
+        required(f.name, {
+            message: this.translate('localization.validation.name.required'),
+        });
+        maxLength(f.name, 100, {
+            message: this.translate('localization.validation.name.max.length'),
+        });
+    });
+    isFormValid = computed(() => {
+        const model = this.formModel();
+        return model.code.trim().length > 0 && model.name.trim().length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const params = this.routeParams();
+            if (!params || this.loadTriggered)
+                return;
+            this.loadTriggered = true;
+            const id = params.get('id');
+            if (id && id !== 'new') {
+                this.loadLanguage(id);
+            }
+        });
+    }
+    updateDirection(value) {
+        this.formModel.update((m) => ({ ...m, direction: value }));
+    }
+    loadLanguage(id) {
+        this.isSaving.set(true);
+        from(this.languageService.findById(id))
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false)))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.existingLanguage.set(response.data);
+                    this.formModel.set(this.toFormModel(response.data));
+                }
+            },
+            error: () => this.router.navigate(['/localization/languages']),
+        });
+    }
+    toFormModel(language) {
+        return {
+            code: language.code,
+            name: language.name,
+            nativeName: language.nativeName ?? '',
+            direction: language.direction ?? 'ltr',
+            serial: language.serial?.toString() ?? '',
+            isActive: language.isActive,
+            isDefault: language.isDefault,
+        };
+    }
+    onSubmit() {
+        if (!this.isFormValid())
+            return;
+        this.isSaving.set(true);
+        const model = this.formModel();
+        const dto = {
+            code: model.code,
+            name: model.name,
+            nativeName: model.nativeName || undefined,
+            direction: model.direction,
+            serial: model.serial ? parseInt(model.serial, 10) : undefined,
+            isActive: model.isActive,
+            isDefault: model.isDefault,
+        };
+        const operation$ = this.isEditMode()
+            ? from(this.languageService.update({
+                id: this.existingLanguage().id,
+                ...dto,
+            }))
+            : from(this.languageService.insert(dto));
+        operation$
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false)))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: this.translate('shared.success'),
+                        detail: response.messageKey
+                            ? this.translate(response.messageKey, response.messageVariables)
+                            : (response.message ?? ''),
+                    });
+                    this.router.navigate(['/localization/languages']);
+                }
+            },
+        });
+    }
+    onCancel() {
+        this.router.navigate(['/localization/languages']);
+    }
+    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">
+            {{
+              isEditMode()
+                ? ('localization.language.edit' | translate)
+                : ('localization.language.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form
+        (ngSubmit)="onSubmit()"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <!-- Language Code -->
+        <div class="flex flex-col gap-2">
+          <label for="code" class="font-medium"
+            >{{ 'localization.language.code' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="code"
+            [formField]="formTree.code"
+            [placeholder]="'localization.placeholder.code' | translate"
+          />
+          <small class="text-muted-color">{{
+            'localization.language.iso.code.hint' | translate
+          }}</small>
+        </div>
+
+        <!-- Language Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'localization.language.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="formTree.name"
+            [placeholder]="'localization.placeholder.name' | translate"
+          />
+        </div>
+
+        <!-- Native Name -->
+        <div class="flex flex-col gap-2">
+          <label for="nativeName" class="font-medium">{{
+            'localization.language.native.name' | translate
+          }}</label>
+          <input
+            fInputText
+            id="nativeName"
+            [formField]="formTree.nativeName"
+            [placeholder]="'localization.placeholder.native.name' | translate"
+          />
+          <small class="text-muted-color">{{
+            'localization.language.native.name.hint' | translate
+          }}</small>
+        </div>
+
+        <!-- Text Direction -->
+        <div class="flex flex-col gap-2">
+          <label for="direction" class="font-medium"
+            >{{ 'localization.language.direction' | translate }} *</label
+          >
+          <f-select
+            id="direction"
+            [ngModel]="formModel().direction"
+            (ngModelChange)="updateDirection($event)"
+            [ngModelOptions]="{ standalone: true }"
+            [options]="directionOptions()"
+            optionLabel="label"
+            optionValue="value"
+            class="w-full"
+          />
+        </div>
+
+        <!-- Display Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">{{
+            'localization.language.display.order' | translate
+          }}</label>
+          <input
+            fInputText
+            id="serial"
+            type="number"
+            [formField]="formTree.serial"
+            [placeholder]="'shared.display.order.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Empty cell for alignment -->
+        <div class="hidden md:block"></div>
+
+        <!-- Checkboxes -->
+        <div class="flex items-center gap-6 md:col-span-2 pt-4">
+          <f-checkbox [formField]="formTree.isActive" [label]="'shared.active' | translate" />
+          <f-checkbox [formField]="formTree.isDefault" [label]="'localization.language.default' | translate" />
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (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)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: i1.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LanguageFormPage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-language-form-page',
+                    imports: [UiModule, AngularModule, FormsModule, FormField, TranslatePipe],
+                    providers: [MessageService],
+                    template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('localization.language.edit' | translate)
+                : ('localization.language.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form
+        (ngSubmit)="onSubmit()"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <!-- Language Code -->
+        <div class="flex flex-col gap-2">
+          <label for="code" class="font-medium"
+            >{{ 'localization.language.code' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="code"
+            [formField]="formTree.code"
+            [placeholder]="'localization.placeholder.code' | translate"
+          />
+          <small class="text-muted-color">{{
+            'localization.language.iso.code.hint' | translate
+          }}</small>
+        </div>
+
+        <!-- Language Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'localization.language.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="formTree.name"
+            [placeholder]="'localization.placeholder.name' | translate"
+          />
+        </div>
+
+        <!-- Native Name -->
+        <div class="flex flex-col gap-2">
+          <label for="nativeName" class="font-medium">{{
+            'localization.language.native.name' | translate
+          }}</label>
+          <input
+            fInputText
+            id="nativeName"
+            [formField]="formTree.nativeName"
+            [placeholder]="'localization.placeholder.native.name' | translate"
+          />
+          <small class="text-muted-color">{{
+            'localization.language.native.name.hint' | translate
+          }}</small>
+        </div>
+
+        <!-- Text Direction -->
+        <div class="flex flex-col gap-2">
+          <label for="direction" class="font-medium"
+            >{{ 'localization.language.direction' | translate }} *</label
+          >
+          <f-select
+            id="direction"
+            [ngModel]="formModel().direction"
+            (ngModelChange)="updateDirection($event)"
+            [ngModelOptions]="{ standalone: true }"
+            [options]="directionOptions()"
+            optionLabel="label"
+            optionValue="value"
+            class="w-full"
+          />
+        </div>
+
+        <!-- Display Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">{{
+            'localization.language.display.order' | translate
+          }}</label>
+          <input
+            fInputText
+            id="serial"
+            type="number"
+            [formField]="formTree.serial"
+            [placeholder]="'shared.display.order.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Empty cell for alignment -->
+        <div class="hidden md:block"></div>
+
+        <!-- Checkboxes -->
+        <div class="flex items-center gap-6 md:col-span-2 pt-4">
+          <f-checkbox [formField]="formTree.isActive" [label]="'shared.active' | translate" />
+          <f-checkbox [formField]="formTree.isDefault" [label]="'localization.language.default' | translate" />
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (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)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+var languageForm_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LanguageFormPage: LanguageFormPage
+});
+
+class LanguageListPage {
+    LANGUAGE_PERMISSIONS = LANGUAGE_PERMISSIONS;
+    router = inject(Router);
+    languageService = inject(LanguageApiService);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        this.languageService.fetchList('', {
+            pagination: { currentPage: 0, pageSize: 100 },
+            filter: {},
+            sort: { serial: 'ASC', name: 'ASC' },
+        });
+    }
+    onCreate() {
+        this.router.navigate(['/localization/languages/new']);
+    }
+    onEdit(id) {
+        this.router.navigate(['/localization/languages', id]);
+    }
+    onSetDefault(lang) {
+        this.confirmationService.confirm({
+            message: this.translateService.translate('localization.language.confirm.set.default', { name: lang.name }),
+            header: this.translateService.translate('localization.language.set.default'),
+            icon: 'star',
+            accept: () => {
+                this.languageService
+                    .setDefault(lang.id)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.messageService.add({
+                                severity: 'success',
+                                summary: this.translateService.translate('shared.success'),
+                                detail: response.messageKey
+                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
+                                    : (response.message ?? ''),
+                            });
+                            this.languageService.reload();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    onDelete(lang) {
+        this.confirmationService.confirm({
+            message: this.translateService.translate('shared.confirm.delete'),
+            header: this.translateService.translate('localization.language.delete.title'),
+            icon: 'exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                from(this.languageService.delete({ id: lang.id, type: 'delete' }))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.messageService.add({
+                                severity: 'success',
+                                summary: this.translateService.translate('shared.success'),
+                                detail: response.messageKey
+                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
+                                    : (response.message ?? ''),
+                            });
+                            this.languageService.reload();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    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"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ 'localization.language.title' | translate }}
+          </h3>
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'localization.language.subtitle' | translate }}
+          </p>
+        </div>
+        <button
+          fButton
+          *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
+          (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">
+        <f-table
+          [value]="languageService.data()"
+          [loading]="languageService.isLoading()"
+          [tableStyle]="{ 'min-width': '40rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'localization.language.code' | translate }}</th>
+              <th>{{ 'localization.language.name' | translate }}</th>
+              <th>{{ 'localization.language.native.name' | translate }}</th>
+              <th>{{ 'localization.language.direction' | translate }}</th>
+              <th>{{ 'shared.status' | translate }}</th>
+              <th class="w-[150px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+
+          <ng-template #body let-lang>
+            <tr>
+              <td>
+                <span class="uppercase font-semibold">{{ lang.code }}</span>
+              </td>
+              <td>{{ lang.name }}</td>
+              <td>{{ lang.nativeName || ('shared.na' | translate) }}</td>
+              <td>
+                <f-tag
+                  [value]="
+                    lang.direction === 'rtl'
+                      ? ('localization.language.rtl' | translate)
+                      : ('localization.language.ltr' | translate)
+                  "
+                  [severity]="lang.direction === 'rtl' ? 'warn' : 'info'"
+                />
+              </td>
+              <td>
+                <div class="flex gap-1 items-center">
+                  <f-tag
+                    [value]="
+                      lang.isActive
+                        ? ('shared.active' | translate)
+                        : ('shared.inactive' | translate)
+                    "
+                    [severity]="lang.isActive ? 'success' : 'secondary'"
+                  />
+                  @if (lang.isDefault) {
+                    <f-tag
+                      [value]="'localization.language.default' | translate"
+                      severity="contrast"
+                    />
+                  }
+                </div>
+              </td>
+              <td>
+                <div class="flex gap-1">
+                  @if (!lang.isDefault) {
+                    <button
+                      fButton
+                      *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                      [text]="true"
+                      size="small"
+                      [fTooltip]="
+                        'localization.language.set.default' | translate
+                      "
+                      (click)="onSetDefault(lang)"
+                    >
+                      <ui-icon pButtonIcon name="star"></ui-icon>
+                    </button>
+                  }
+                  <button
+                    fButton
+                    *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(lang.id)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  <button
+                    fButton
+                    *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    [fTooltip]="'shared.delete' | translate"
+                    [disabled]="lang.isDefault"
+                    (click)="onDelete(lang)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="6" class="text-center py-4 text-muted-color">
+                {{ 'localization.language.empty' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </f-table>
+      </div>
+    </div>
+
+    <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", "icon", "acceptLabel", "rejectLabel", "acceptIcon", "rejectIcon", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "blockScroll", "defaultFocus", "styleClass", "style"] }, { kind: "component", type: i1.ToastComponent, selector: "f-toast", inputs: ["key", "position"], outputs: ["onClose"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i1.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "scrollHeight", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "filterDelay", "responsiveLayout", "selectionMode", "sortMode", "rowExpandMode", "resizableColumns", "rowStyleClass", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "expandedRowKeys", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "expandedRowKeysChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onRowSelect", "onRowUnselect", "onSelectAllChange", "onRowExpand", "onRowCollapse", "onColResize", "onRowContextMenu"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+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, UiModule, HasPermissionDirective, TranslatePipe],
+                    providers: [ConfirmationService, MessageService],
+                    template: `
+    <div class="card">
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ 'localization.language.title' | translate }}
+          </h3>
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'localization.language.subtitle' | translate }}
+          </p>
+        </div>
+        <button
+          fButton
+          *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
+          (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">
+        <f-table
+          [value]="languageService.data()"
+          [loading]="languageService.isLoading()"
+          [tableStyle]="{ 'min-width': '40rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'localization.language.code' | translate }}</th>
+              <th>{{ 'localization.language.name' | translate }}</th>
+              <th>{{ 'localization.language.native.name' | translate }}</th>
+              <th>{{ 'localization.language.direction' | translate }}</th>
+              <th>{{ 'shared.status' | translate }}</th>
+              <th class="w-[150px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+
+          <ng-template #body let-lang>
+            <tr>
+              <td>
+                <span class="uppercase font-semibold">{{ lang.code }}</span>
+              </td>
+              <td>{{ lang.name }}</td>
+              <td>{{ lang.nativeName || ('shared.na' | translate) }}</td>
+              <td>
+                <f-tag
+                  [value]="
+                    lang.direction === 'rtl'
+                      ? ('localization.language.rtl' | translate)
+                      : ('localization.language.ltr' | translate)
+                  "
+                  [severity]="lang.direction === 'rtl' ? 'warn' : 'info'"
+                />
+              </td>
+              <td>
+                <div class="flex gap-1 items-center">
+                  <f-tag
+                    [value]="
+                      lang.isActive
+                        ? ('shared.active' | translate)
+                        : ('shared.inactive' | translate)
+                    "
+                    [severity]="lang.isActive ? 'success' : 'secondary'"
+                  />
+                  @if (lang.isDefault) {
+                    <f-tag
+                      [value]="'localization.language.default' | translate"
+                      severity="contrast"
+                    />
+                  }
+                </div>
+              </td>
+              <td>
+                <div class="flex gap-1">
+                  @if (!lang.isDefault) {
+                    <button
+                      fButton
+                      *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                      [text]="true"
+                      size="small"
+                      [fTooltip]="
+                        'localization.language.set.default' | translate
+                      "
+                      (click)="onSetDefault(lang)"
+                    >
+                      <ui-icon pButtonIcon name="star"></ui-icon>
+                    </button>
+                  }
+                  <button
+                    fButton
+                    *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(lang.id)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  <button
+                    fButton
+                    *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    [fTooltip]="'shared.delete' | translate"
+                    [disabled]="lang.isDefault"
+                    (click)="onDelete(lang)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="6" class="text-center py-4 text-muted-color">
+                {{ 'localization.language.empty' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </f-table>
+      </div>
+    </div>
+
+    <f-confirmdialog />
+    <f-toast />
+  `,
+                }]
+        }] });
+
+var languageList_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LanguageListPage: LanguageListPage
+});
+
+class LocalizationContainerPage {
+    permissionValidator = inject(PermissionValidatorService);
+    allTabs = [
+        {
+            id: 'languages',
+            labelKey: 'localization.tabs.languages',
+            icon: 'globe',
+            route: 'languages',
+            permission: LANGUAGE_PERMISSIONS.READ,
+        },
+        {
+            id: 'keys',
+            labelKey: 'localization.tabs.keys',
+            icon: 'key',
+            route: 'keys',
+            permission: TRANSLATION_KEY_PERMISSIONS.READ,
+        },
+    ];
+    visibleTabs = computed(() => {
+        // Explicitly track permissions signal for reactivity
+        const permissions = this.permissionValidator.permissions();
+        if (!permissions.length)
+            return [];
+        return this.allTabs.filter((tab) => this.permissionValidator.hasPermission(tab.permission));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.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>
+        <p class="text-muted-color mt-1 text-sm sm:text-base">{{ 'localization.subtitle' | translate }}</p>
+      </div>
+
+      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
+        @for (tab of visibleTabs(); track tab.id) {
+          <a
+            [routerLink]="tab.route"
+            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"
+          >
+            <lib-icon [icon]="tab.icon"></lib-icon>
+            <span>{{ tab.labelKey | translate }}</span>
+          </a>
+        }
+      </div>
+
+      <router-outlet />
+    </div>
+  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+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, 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>
+        <p class="text-muted-color mt-1 text-sm sm:text-base">{{ 'localization.subtitle' | translate }}</p>
+      </div>
+
+      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
+        @for (tab of visibleTabs(); track tab.id) {
+          <a
+            [routerLink]="tab.route"
+            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"
+          >
+            <lib-icon [icon]="tab.icon"></lib-icon>
+            <span>{{ tab.labelKey | translate }}</span>
+          </a>
+        }
+      </div>
+
+      <router-outlet />
+    </div>
+  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
+        }] });
+
+var localizationContainer_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LocalizationContainerPage: LocalizationContainerPage
+});
+
+const LOCALIZATION_ROUTES = [
+    {
+        path: '',
+        resolve: { translations: resolveTranslationModule({ modules: ['localization'], fallbackMessages: { ...LOCALIZATION_MESSAGES, ...SHARED_MESSAGES } }) },
+        loadComponent: () => Promise.resolve().then(function () { return localizationContainer_page; }).then((m) => m.LocalizationContainerPage),
+        children: [
+            {
+                path: 'languages',
+                loadComponent: () => Promise.resolve().then(function () { return languageList_page; }).then((m) => m.LanguageListPage),
+            },
+            {
+                path: 'languages/new',
+                loadComponent: () => Promise.resolve().then(function () { return languageForm_page; }).then((m) => m.LanguageFormPage),
+            },
+            {
+                path: 'languages/:id',
+                loadComponent: () => Promise.resolve().then(function () { return languageForm_page; }).then((m) => m.LanguageFormPage),
+            },
+            {
+                path: 'keys',
+                loadComponent: () => Promise.resolve().then(function () { return translationKeyList_page; }).then((m) => m.TranslationKeyListPage),
+            },
+            {
+                path: 'keys/new',
+                loadComponent: () => Promise.resolve().then(function () { return translationKeyForm_page; }).then((m) => m.TranslationKeyFormPage),
+            },
+            {
+                path: 'keys/:id',
+                loadComponent: () => Promise.resolve().then(function () { return translationKeyForm_page; }).then((m) => m.TranslationKeyFormPage),
+            },
+            {
+                path: '',
+                redirectTo: 'languages',
+                pathMatch: 'full',
+            },
+        ],
+    },
+];
+
+class TranslationKeyFormPage {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    languageService = inject(LanguageApiService);
+    translationKeyService = inject(TranslationKeyApiService);
+    translationService = inject(TranslationApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    destroyRef = inject(DestroyRef);
+    routeParams = toSignal(this.route.paramMap);
+    loadTriggered = false;
+    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 })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moduleOptions" }] : /* istanbul ignore next */ []));
+    formModel = signal({
+        key: '',
+        module: '',
+        defaultMessage: '',
+        description: '',
+        variables: '',
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
+    formTree = form(this.formModel, (f) => {
+        required(f.key, {
+            message: this.translate('localization.validation.key.required'),
+        });
+        required(f.defaultMessage, {
+            message: this.translate('localization.validation.default.message.required'),
+        });
+    });
+    isFormValid = computed(() => {
+        const model = this.formModel();
+        return (model.key.trim().length > 0 &&
+            model.module.trim().length > 0 &&
+            model.defaultMessage.trim().length > 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const params = this.routeParams();
+            if (!params || this.loadTriggered)
+                return;
+            this.loadTriggered = true;
+            const id = params.get('id');
+            if (id && id !== 'new') {
+                this.loadTranslationKey(id);
+            }
+        });
+    }
+    ngOnInit() {
+        this.loadInitialData();
+    }
+    loadInitialData() {
+        this.isLoadingLanguages.set(true);
+        forkJoin({
+            languages: from(this.languageService.getAll({
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: {},
+                sort: { serial: 'ASC', name: 'ASC' },
+            })),
+            modules: this.translationKeyService.getModules(),
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoadingLanguages.set(false)))
+            .subscribe({
+            next: ({ languages, modules }) => {
+                if (languages.success && languages.data) {
+                    const activeLanguages = languages.data.filter((l) => l.isActive);
+                    this.languages.set(activeLanguages);
+                    this.initializeTranslations(activeLanguages);
+                }
+                if (modules.success && modules.data) {
+                    this.modules.set(modules.data);
+                }
+            },
+        });
+    }
+    initializeTranslations(languages) {
+        const current = this.translations();
+        if (current.length === 0) {
+            this.translations.set(languages.map((lang) => ({ languageId: lang.id, value: '' })));
+        }
+    }
+    updateModule(value) {
+        this.formModel.update((m) => ({ ...m, module: value ?? '' }));
+    }
+    getTranslationValue(languageId) {
+        return (this.translations().find((t) => t.languageId === languageId)?.value ?? '');
+    }
+    setTranslationValue(languageId, value) {
+        this.translations.update((list) => {
+            const existing = list.find((t) => t.languageId === languageId);
+            if (existing) {
+                return list.map((t) => t.languageId === languageId ? { ...t, value } : t);
+            }
+            return [...list, { languageId, value }];
+        });
+    }
+    loadTranslationKey(id) {
+        this.isSaving.set(true);
+        from(this.translationKeyService.findById(id))
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false)))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.existingKey.set(response.data);
+                    this.formModel.set(this.toFormModel(response.data));
+                    this.loadExistingTranslations(id);
+                }
+            },
+            error: () => this.router.navigate(['/localization/keys']),
+        });
+    }
+    loadExistingTranslations(keyId) {
+        this.translationService
+            .getByKeyId(keyId)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.translations.update((list) => {
+                        const updated = [...list];
+                        response.data.forEach((t) => {
+                            const existing = updated.find((tr) => tr.languageId === t.languageId);
+                            if (existing) {
+                                existing.value = t.value;
+                                existing.translationId = t.id;
+                            }
+                            else {
+                                updated.push({
+                                    languageId: t.languageId,
+                                    value: t.value,
+                                    translationId: t.id,
+                                });
+                            }
+                        });
+                        return updated;
+                    });
+                }
+            },
+        });
+    }
+    toFormModel(key) {
+        return {
+            key: key.key,
+            module: key.module,
+            defaultMessage: key.defaultMessage,
+            description: key.description ?? '',
+            variables: key.variables?.join(', ') ?? '',
+        };
+    }
+    onSubmit() {
+        if (!this.isFormValid())
+            return;
+        this.isSaving.set(true);
+        const model = this.formModel();
+        const variables = model.variables
+            .split(',')
+            .map((v) => v.trim())
+            .filter((v) => v.length > 0);
+        if (this.isEditMode()) {
+            this.updateKey(model, variables);
+        }
+        else {
+            this.createKey(model, variables);
+        }
+    }
+    createKey(model, variables) {
+        const createDto = {
+            key: model.key,
+            module: model.module,
+            defaultMessage: model.defaultMessage,
+            description: model.description || undefined,
+            variables: variables.length > 0 ? variables : undefined,
+        };
+        from(this.translationKeyService.insert(createDto))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.saveTranslations(response.data.id, response.messageKey, response.messageVariables);
+                }
+                else {
+                    this.isSaving.set(false);
+                }
+            },
+            error: () => this.isSaving.set(false),
+        });
+    }
+    updateKey(model, variables) {
+        const updateDto = {
+            id: this.existingKey().id,
+            key: model.key,
+            module: model.module,
+            defaultMessage: model.defaultMessage,
+            description: model.description || undefined,
+            variables: variables.length > 0 ? variables : undefined,
+        };
+        from(this.translationKeyService.update(updateDto))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.saveTranslations(this.existingKey().id, response.messageKey, response.messageVariables);
+                }
+                else {
+                    this.isSaving.set(false);
+                }
+            },
+            error: () => this.isSaving.set(false),
+        });
+    }
+    saveTranslations(keyId, messageKey, messageVariables) {
+        const translationsToSave = this.translations()
+            .filter((t) => t.value?.trim())
+            .map((t) => ({
+            id: t.translationId,
+            languageId: t.languageId,
+            translationKeyId: keyId,
+            value: t.value,
+            isVerified: false,
+        }));
+        if (translationsToSave.length === 0) {
+            this.onSaveSuccess(messageKey, messageVariables);
+            return;
+        }
+        this.translationService
+            .bulkUpdate(translationsToSave)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => this.onSaveSuccess(messageKey, messageVariables),
+            error: () => this.onSaveSuccess(messageKey, messageVariables),
+        });
+    }
+    onSaveSuccess(messageKey, messageVariables) {
+        this.messageService.add({
+            severity: 'success',
+            summary: this.translate('shared.success'),
+            detail: messageKey ? this.translate(messageKey, messageVariables) : '',
+        });
+        this.isSaving.set(false);
+        this.router.navigate(['/localization/keys']);
+    }
+    onCancel() {
+        this.router.navigate(['/localization/keys']);
+    }
+    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">
+            {{
+              isEditMode()
+                ? ('localization.key.edit' | translate)
+                : ('localization.key.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form (ngSubmit)="onSubmit()" class="flex flex-col gap-6">
+        <!-- Key Info Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.about' | translate }}
+          </h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Key Name -->
+            <div class="flex flex-col gap-2">
+              <label for="key" class="font-medium"
+                >{{ 'localization.key.name' | translate }} *</label
+              >
+              <input
+                fInputText
+                id="key"
+                [formField]="formTree.key"
+                [placeholder]="'localization.placeholder.key.name' | translate"
+              />
+            </div>
+
+            <!-- Module -->
+            <div class="flex flex-col gap-2">
+              <label for="module" class="font-medium"
+                >{{ 'localization.key.module' | translate }} *</label
+              >
+              <f-select
+                id="module"
+                [ngModel]="formModel().module"
+                (ngModelChange)="updateModule($event)"
+                [ngModelOptions]="{ standalone: true }"
+                [options]="moduleOptions()"
+                optionLabel="label"
+                optionValue="value"
+                [editable]="true"
+                [placeholder]="'localization.key.select.module' | translate"
+                class="w-full"
+              />
+            </div>
+
+            <!-- Default Message -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="defaultMessage" class="font-medium"
+                >{{ 'localization.key.default.message' | translate }} *</label
+              >
+              <textarea
+                fTextarea
+                id="defaultMessage"
+                [formField]="formTree.defaultMessage"
+                [rows]="2"
+                [placeholder]="
+                  'localization.placeholder.default.message' | translate
+                "
+              ></textarea>
+            </div>
+
+            <!-- Description -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="description" class="font-medium">{{
+                'localization.key.description' | translate
+              }}</label>
+              <input
+                fInputText
+                id="description"
+                [formField]="formTree.description"
+                [placeholder]="
+                  'localization.placeholder.key.description' | translate
+                "
+              />
+            </div>
+
+            <!-- Variables -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="variables" class="font-medium">{{
+                'localization.key.variables' | translate
+              }}</label>
+              <input
+                fInputText
+                id="variables"
+                [formField]="formTree.variables"
+                [placeholder]="
+                  'localization.key.variables.placeholder' | translate
+                "
+              />
+              <small class="text-muted-color">{{
+                'localization.key.variables.hint' | translate
+              }}</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Translations Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.translations.section' | translate }}
+          </h4>
+          @if (isLoadingLanguages()) {
+            <div class="flex justify-center py-4">
+              <f-progressspinner strokeWidth="4" />
+            </div>
+          } @else if (languages().length === 0) {
+            <p class="text-muted-color text-center py-4">
+              {{ 'localization.key.no.languages' | translate }}
+            </p>
+          } @else {
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              @for (lang of languages(); track lang.id) {
+                <div class="flex flex-col gap-2">
+                  <div class="flex justify-between items-center">
+                    <label class="font-medium">
+                      {{ lang.name }}
+                      @if (lang.nativeName && lang.nativeName !== lang.name) {
+                        <span class="text-muted-color"
+                          >({{ lang.nativeName }})</span
+                        >
+                      }
+                    </label>
+                    <f-tag
+                      [value]="lang.code"
+                      severity="secondary"
+                      class="uppercase"
+                    />
+                  </div>
+                  <textarea
+                    fTextarea
+                    [ngModel]="getTranslationValue(lang.id)"
+                    (ngModelChange)="setTranslationValue(lang.id, $event)"
+                    [ngModelOptions]="{ standalone: true }"
+                    [rows]="2"
+                    [placeholder]="
+                      formModel().defaultMessage ||
+                      ('localization.key.enter.translation' | translate)
+                    "
+                  ></textarea>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 pt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (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)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.ProgressSpinnerComponent, selector: "f-progressspinner", inputs: ["size", "strokeWidth", "animationDuration", "styleClass", "ariaLabel"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i1.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyFormPage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-translation-key-form-page',
+                    imports: [UiModule, AngularModule, FormsModule, FormField, TranslatePipe],
+                    providers: [MessageService],
+                    template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('localization.key.edit' | translate)
+                : ('localization.key.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form (ngSubmit)="onSubmit()" class="flex flex-col gap-6">
+        <!-- Key Info Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.about' | translate }}
+          </h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Key Name -->
+            <div class="flex flex-col gap-2">
+              <label for="key" class="font-medium"
+                >{{ 'localization.key.name' | translate }} *</label
+              >
+              <input
+                fInputText
+                id="key"
+                [formField]="formTree.key"
+                [placeholder]="'localization.placeholder.key.name' | translate"
+              />
+            </div>
+
+            <!-- Module -->
+            <div class="flex flex-col gap-2">
+              <label for="module" class="font-medium"
+                >{{ 'localization.key.module' | translate }} *</label
+              >
+              <f-select
+                id="module"
+                [ngModel]="formModel().module"
+                (ngModelChange)="updateModule($event)"
+                [ngModelOptions]="{ standalone: true }"
+                [options]="moduleOptions()"
+                optionLabel="label"
+                optionValue="value"
+                [editable]="true"
+                [placeholder]="'localization.key.select.module' | translate"
+                class="w-full"
+              />
+            </div>
+
+            <!-- Default Message -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="defaultMessage" class="font-medium"
+                >{{ 'localization.key.default.message' | translate }} *</label
+              >
+              <textarea
+                fTextarea
+                id="defaultMessage"
+                [formField]="formTree.defaultMessage"
+                [rows]="2"
+                [placeholder]="
+                  'localization.placeholder.default.message' | translate
+                "
+              ></textarea>
+            </div>
+
+            <!-- Description -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="description" class="font-medium">{{
+                'localization.key.description' | translate
+              }}</label>
+              <input
+                fInputText
+                id="description"
+                [formField]="formTree.description"
+                [placeholder]="
+                  'localization.placeholder.key.description' | translate
+                "
+              />
+            </div>
+
+            <!-- Variables -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="variables" class="font-medium">{{
+                'localization.key.variables' | translate
+              }}</label>
+              <input
+                fInputText
+                id="variables"
+                [formField]="formTree.variables"
+                [placeholder]="
+                  'localization.key.variables.placeholder' | translate
+                "
+              />
+              <small class="text-muted-color">{{
+                'localization.key.variables.hint' | translate
+              }}</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Translations Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.translations.section' | translate }}
+          </h4>
+          @if (isLoadingLanguages()) {
+            <div class="flex justify-center py-4">
+              <f-progressspinner strokeWidth="4" />
+            </div>
+          } @else if (languages().length === 0) {
+            <p class="text-muted-color text-center py-4">
+              {{ 'localization.key.no.languages' | translate }}
+            </p>
+          } @else {
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              @for (lang of languages(); track lang.id) {
+                <div class="flex flex-col gap-2">
+                  <div class="flex justify-between items-center">
+                    <label class="font-medium">
+                      {{ lang.name }}
+                      @if (lang.nativeName && lang.nativeName !== lang.name) {
+                        <span class="text-muted-color"
+                          >({{ lang.nativeName }})</span
+                        >
+                      }
+                    </label>
+                    <f-tag
+                      [value]="lang.code"
+                      severity="secondary"
+                      class="uppercase"
+                    />
+                  </div>
+                  <textarea
+                    fTextarea
+                    [ngModel]="getTranslationValue(lang.id)"
+                    (ngModelChange)="setTranslationValue(lang.id, $event)"
+                    [ngModelOptions]="{ standalone: true }"
+                    [rows]="2"
+                    [placeholder]="
+                      formModel().defaultMessage ||
+                      ('localization.key.enter.translation' | translate)
+                    "
+                  ></textarea>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 pt-4">
+          <button
+            fButton
+            severity="secondary"
+            [outlined]="true"
+            (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)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+var translationKeyForm_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TranslationKeyFormPage: TranslationKeyFormPage
+});
+
+class TranslationKeyListPage {
+    TRANSLATION_KEY_PERMISSIONS = TRANSLATION_KEY_PERMISSIONS;
+    router = inject(Router);
+    languageService = inject(LanguageApiService);
+    translationKeyService = inject(TranslationKeyApiService);
+    translationService = inject(TranslationApiService);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    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 })),
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moduleOptions" }] : /* istanbul ignore next */ []));
+    filteredKeys = computed(() => {
+        let keys = this.translationKeys();
+        const module = this.selectedModule();
+        const search = this.searchTerm().toLowerCase().trim();
+        if (module) {
+            keys = keys.filter((k) => k.module === module);
+        }
+        if (search) {
+            keys = keys.filter((k) => k.key.toLowerCase().includes(search) ||
+                k.defaultMessage.toLowerCase().includes(search) ||
+                k.module.toLowerCase().includes(search));
+        }
+        return keys;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredKeys" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.isLoading.set(true);
+        forkJoin({
+            languages: from(this.languageService.getAll({
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: {},
+                sort: { serial: 'ASC', name: 'ASC' },
+            })),
+            modules: this.translationKeyService.getModules(),
+            keys: from(this.translationKeyService.getAll({
+                pagination: { currentPage: 0, pageSize: 1000 },
+                filter: {},
+                sort: { module: 'ASC', key: 'ASC' },
+            })),
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: ({ languages, modules, keys }) => {
+                if (languages.success && languages.data) {
+                    this.languages.set(languages.data.filter((l) => l.isActive));
+                }
+                if (modules.success && modules.data) {
+                    this.modules.set(modules.data);
+                }
+                if (keys.success && keys.data) {
+                    this.translationKeys.set(keys.data);
+                    this.loadTranslationCounts();
+                }
+                this.isLoading.set(false);
+            },
+            error: () => {
+                this.isLoading.set(false);
+            },
+        });
+    }
+    loadTranslationCounts() {
+        this.translationService
+            .getCounts()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.translationCounts.set(new Map(Object.entries(response.data)));
+                }
+            },
+        });
+    }
+    getTranslationCount(keyId) {
+        return this.translationCounts().get(keyId) ?? 0;
+    }
+    onModuleChange(value) {
+        this.selectedModule.set(value);
+    }
+    onCreate() {
+        this.router.navigate(['/localization/keys/new']);
+    }
+    onEdit(key) {
+        this.router.navigate(['/localization/keys', key.id]);
+    }
+    onDelete(key) {
+        this.confirmationService.confirm({
+            message: this.translateService.translate('shared.confirm.delete'),
+            header: this.translateService.translate('localization.key.delete.title'),
+            icon: 'exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                from(this.translationKeyService.delete({ id: key.id, type: 'delete' }))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.messageService.add({
+                                severity: 'success',
+                                summary: this.translateService.translate('shared.success'),
+                                detail: response.messageKey
+                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
+                                    : (response.message ?? ''),
+                            });
+                            this.loadData();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    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"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ 'localization.key.title' | translate }}
+          </h3>
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'localization.key.subtitle' | translate }}
+          </p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            fButton
+            *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
+            (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">
+          <f-select
+            [options]="moduleOptions()"
+            [ngModel]="selectedModule()"
+            (ngModelChange)="onModuleChange($event)"
+            [ngModelOptions]="{ standalone: true }"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'localization.key.filter.module' | translate"
+            [showClear]="true"
+            class="w-full"
+          />
+        </div>
+        <div class="flex-1">
+          <f-iconfield class="w-full">
+            <f-inputicon><ui-icon name="search" /></f-inputicon>
+            <input
+              fInputText
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              [ngModelOptions]="{ standalone: true }"
+              [placeholder]="'shared.search' | translate"
+              class="w-full"
+            />
+          </f-iconfield>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <f-table
+        [value]="filteredKeys()"
+        [loading]="isLoading()"
+        [paginator]="true"
+        [rows]="15"
+        [rowsPerPageOptions]="[10, 15, 25, 50]"
+      >
+        <ng-template #header>
+          <tr>
+            <th style="width: 15%">
+              {{ 'localization.key.module' | translate }}
+            </th>
+            <th style="width: 25%">
+              {{ 'localization.key.name' | translate }}
+            </th>
+            <th style="width: 35%">
+              {{ 'localization.key.default.message' | translate }}
+            </th>
+            <th style="width: 10%">
+              {{ 'localization.key.translations' | translate }}
+            </th>
+            <th style="width: 15%">{{ 'shared.actions' | translate }}</th>
+          </tr>
+        </ng-template>
+        <ng-template #body let-key>
+          @let translationCount = getTranslationCount(key.id);
+          @let languageCount = languages().length;
+          <tr>
+            <td>
+              <f-tag [value]="key.module" severity="secondary" />
+            </td>
+            <td>
+              <div class="font-medium">{{ key.key }}</div>
+              @if (key.description) {
+                <small class="text-muted-color">{{ key.description }}</small>
+              }
+            </td>
+            <td>{{ key.defaultMessage }}</td>
+            <td class="text-center">
+              <span
+                class="text-sm"
+                [class.text-green-500]="translationCount === languageCount"
+                [class.text-orange-500]="
+                  translationCount < languageCount && translationCount > 0
+                "
+                [class.text-muted-color]="translationCount === 0"
+              >
+                {{ translationCount }}/{{ languageCount }}
+              </span>
+            </td>
+            <td>
+              <div class="flex gap-1">
+                <button
+                  fButton
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
+                  [text]="true"
+                  severity="secondary"
+                  size="small"
+                  [fTooltip]="'shared.edit' | translate"
+                  (click)="onEdit(key)"
+                >
+                  <ui-icon pButtonIcon name="pencil"></ui-icon>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
+                  [text]="true"
+                  severity="danger"
+                  size="small"
+                  [fTooltip]="'shared.delete' | translate"
+                  (click)="onDelete(key)"
+                >
+                  <ui-icon pButtonIcon name="trash"></ui-icon>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+        <ng-template #emptymessage>
+          <tr>
+            <td colspan="5" class="text-center py-4 text-muted-color">
+              {{ 'localization.key.empty' | translate }}
+            </td>
+          </tr>
+        </ng-template>
+      </f-table>
+    </div>
+
+    <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", "icon", "acceptLabel", "rejectLabel", "acceptIcon", "rejectIcon", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "blockScroll", "defaultFocus", "styleClass", "style"] }, { kind: "component", type: i1.ToastComponent, selector: "f-toast", inputs: ["key", "position"], outputs: ["onClose"] }, { kind: "directive", type: i1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i1.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i1.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: i1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: i1.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "scrollHeight", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "filterDelay", "responsiveLayout", "selectionMode", "sortMode", "rowExpandMode", "resizableColumns", "rowStyleClass", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "expandedRowKeys", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "expandedRowKeysChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onRowSelect", "onRowUnselect", "onSelectAllChange", "onRowExpand", "onRowCollapse", "onColResize", "onRowContextMenu"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslationKeyListPage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-translation-key-list-page',
+                    imports: [
+                        AngularModule,
+                        UiModule,
+                        FormsModule,
+                        HasPermissionDirective,
+                        TranslatePipe,
+                    ],
+                    template: `
+    <div class="card">
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ 'localization.key.title' | translate }}
+          </h3>
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'localization.key.subtitle' | translate }}
+          </p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            fButton
+            *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
+            (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">
+          <f-select
+            [options]="moduleOptions()"
+            [ngModel]="selectedModule()"
+            (ngModelChange)="onModuleChange($event)"
+            [ngModelOptions]="{ standalone: true }"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'localization.key.filter.module' | translate"
+            [showClear]="true"
+            class="w-full"
+          />
+        </div>
+        <div class="flex-1">
+          <f-iconfield class="w-full">
+            <f-inputicon><ui-icon name="search" /></f-inputicon>
+            <input
+              fInputText
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              [ngModelOptions]="{ standalone: true }"
+              [placeholder]="'shared.search' | translate"
+              class="w-full"
+            />
+          </f-iconfield>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <f-table
+        [value]="filteredKeys()"
+        [loading]="isLoading()"
+        [paginator]="true"
+        [rows]="15"
+        [rowsPerPageOptions]="[10, 15, 25, 50]"
+      >
+        <ng-template #header>
+          <tr>
+            <th style="width: 15%">
+              {{ 'localization.key.module' | translate }}
+            </th>
+            <th style="width: 25%">
+              {{ 'localization.key.name' | translate }}
+            </th>
+            <th style="width: 35%">
+              {{ 'localization.key.default.message' | translate }}
+            </th>
+            <th style="width: 10%">
+              {{ 'localization.key.translations' | translate }}
+            </th>
+            <th style="width: 15%">{{ 'shared.actions' | translate }}</th>
+          </tr>
+        </ng-template>
+        <ng-template #body let-key>
+          @let translationCount = getTranslationCount(key.id);
+          @let languageCount = languages().length;
+          <tr>
+            <td>
+              <f-tag [value]="key.module" severity="secondary" />
+            </td>
+            <td>
+              <div class="font-medium">{{ key.key }}</div>
+              @if (key.description) {
+                <small class="text-muted-color">{{ key.description }}</small>
+              }
+            </td>
+            <td>{{ key.defaultMessage }}</td>
+            <td class="text-center">
+              <span
+                class="text-sm"
+                [class.text-green-500]="translationCount === languageCount"
+                [class.text-orange-500]="
+                  translationCount < languageCount && translationCount > 0
+                "
+                [class.text-muted-color]="translationCount === 0"
+              >
+                {{ translationCount }}/{{ languageCount }}
+              </span>
+            </td>
+            <td>
+              <div class="flex gap-1">
+                <button
+                  fButton
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
+                  [text]="true"
+                  severity="secondary"
+                  size="small"
+                  [fTooltip]="'shared.edit' | translate"
+                  (click)="onEdit(key)"
+                >
+                  <ui-icon pButtonIcon name="pencil"></ui-icon>
+                </button>
+                <button
+                  fButton
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
+                  [text]="true"
+                  severity="danger"
+                  size="small"
+                  [fTooltip]="'shared.delete' | translate"
+                  (click)="onDelete(key)"
+                >
+                  <ui-icon pButtonIcon name="trash"></ui-icon>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+        <ng-template #emptymessage>
+          <tr>
+            <td colspan="5" class="text-center py-4 text-muted-color">
+              {{ 'localization.key.empty' | translate }}
+            </td>
+          </tr>
+        </ng-template>
+      </f-table>
+    </div>
+
+    <f-confirmdialog />
+    <f-toast />
+  `,
+                }]
+        }] });
+
+var translationKeyList_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TranslationKeyListPage: TranslationKeyListPage
+});
+
+// Interfaces
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LOCALIZATION_CONFIG, LOCALIZATION_MESSAGES, LOCALIZATION_ROUTES, LanguageApiService, LanguageFormPage, LanguageListPage, LanguageSelectorComponent, LocalizationApiService, LocalizationContainerPage, LocalizationInitializerService, LocalizationStateService, STORAGE_KEYS, TranslationApiService, TranslationKeyApiService, TranslationKeyFormPage, TranslationKeyListPage, TranslationLoaderService, getLocalizationConfig, provideLocalization };
+//# sourceMappingURL=flusys-ng-localization.mjs.map