@flusys/ng-localization 4.0.0-lts

package/fesm2022/flusys-ng-localization.mjs

@@ -0,0 +1,3303 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, ApplicationRef, signal, computed, effect, Injectable, DestroyRef, ElementRef, Component, APP_INITIALIZER } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { PrimeNG } from 'primeng/config';
+import { HttpClient } from '@angular/common/http';
+import { APP_CONFIG, TRANSLATE_ADAPTER } from '@flusys/ng-core';
+import { firstValueFrom, from, fromEvent, finalize, forkJoin } from 'rxjs';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from 'primeng/styleclass';
+import { StyleClassModule } from 'primeng/styleclass';
+import { filter } from 'rxjs/operators';
+import { LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL } from '@flusys/ng-layout';
+import { resolveTranslationModule, SHARED_MESSAGES, PermissionValidatorService, LANGUAGE_PERMISSIONS, TRANSLATION_KEY_PERMISSIONS, TRANSLATION_PERMISSIONS, TranslatePipe, AngularModule, PrimeModule, HasPermissionDirective } from '@flusys/ng-shared';
+import { RouterOutlet, RouterLink, RouterLinkActive, Router, ActivatedRoute } from '@angular/router';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i2 from 'primeng/button';
+import * as i2$1 from 'primeng/confirmdialog';
+import * as i8 from 'primeng/table';
+import * as i4 from 'primeng/tag';
+import * as i10 from 'primeng/toast';
+import * as i6 from 'primeng/tooltip';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { form, required, maxLength, FormField } from '@angular/forms/signals';
+import * as i3 from 'primeng/card';
+import * as i4$1 from 'primeng/inputtext';
+import * as i5 from 'primeng/select';
+import * as i4$2 from 'primeng/iconfield';
+import * as i5$1 from 'primeng/inputicon';
+import * as i7 from 'primeng/textarea';
+import * as i9 from 'primeng/progressspinner';
+import * as i3$1 from 'primeng/checkbox';
+
+const LOCALIZATION_CONFIG = new InjectionToken('LOCALIZATION_CONFIG');
+/** Get localization config with sensible defaults applied */
+function getLocalizationConfig(overrides) {
+    const defaults = {
+        defaultLanguageCode: 'en',
+        loadStrategy: 'modules',
+        initialModules: [],
+        enableLayoutSelector: false,
+    };
+    return {
+        ...defaults,
+        ...overrides,
+        defaultLanguageCode: overrides?.defaultLanguageCode || defaults.defaultLanguageCode,
+    };
+}
+
+const STORAGE_KEYS = {
+    CURRENT_LANGUAGE: 'flusys.language',
+};
+
+const LOCALIZATION_MESSAGES = {
+    // Container
+    'localization.title': 'Localization',
+    'localization.subtitle': 'Manage languages and translations',
+    // Tabs
+    'localization.tabs.languages': 'Languages',
+    'localization.tabs.keys': 'Keys',
+    'localization.tabs.translations': 'Translations',
+    // Languages
+    'localization.language.title': 'Languages',
+    'localization.language.subtitle': 'Manage available languages for your application',
+    'localization.language.create': 'Add Language',
+    'localization.language.edit': 'Edit Language',
+    'localization.language.code': 'Language Code',
+    'localization.language.name': 'Language Name',
+    'localization.language.native.name': 'Native Name',
+    'localization.language.direction': 'Text Direction',
+    'localization.language.ltr': 'LTR',
+    'localization.language.rtl': 'RTL',
+    'localization.language.active': 'Active',
+    'localization.language.default': 'Default',
+    'localization.language.set.default': 'Set as Default',
+    'localization.language.confirm.set.default': 'Set "{{name}}" as the default language?',
+    'localization.language.set.default.success': '{{name}} is now the default language.',
+    'localization.language.delete.title': 'Delete Language',
+    'localization.language.empty': 'No languages configured. Add a language to get started.',
+    'localization.language.display.order': 'Display Order',
+    'localization.language.iso.code.hint': 'ISO 639-1 language code (e.g., en, ar, fr)',
+    'localization.language.native.name.hint': 'Name in the native language (e.g., العربية for Arabic)',
+    'localization.language.create.success': 'Language created successfully',
+    'localization.language.update.success': 'Language updated successfully',
+    // Translation keys
+    'localization.key.title': 'Translation Keys',
+    'localization.key.subtitle': 'Manage translation keys for your application',
+    'localization.key.create': 'Add Key',
+    'localization.key.edit': 'Edit Key',
+    'localization.key.key': 'Key',
+    'localization.key.name': 'Key Name',
+    'localization.key.module': 'Module',
+    'localization.key.default.message': 'Default Message',
+    'localization.key.description': 'Description',
+    'localization.key.variables': 'Variables',
+    'localization.key.variables.hint': 'Enter variable names used in this translation',
+    'localization.key.variables.placeholder': 'e.g., name, count, date',
+    'localization.key.translations': 'Translations',
+    'localization.key.translations.section': 'Translations',
+    'localization.key.about': 'Key Information',
+    'localization.key.filter.module': 'Filter by module',
+    'localization.key.select.module': 'Select or enter module',
+    'localization.key.enter.translation': 'Enter translation',
+    'localization.key.no.languages': 'No active languages configured',
+    'localization.key.empty': 'No translation keys found',
+    'localization.key.delete.title': 'Delete Translation Key',
+    'localization.key.readonly': 'System Key',
+    'localization.key.readonly.hint': 'System keys cannot be deleted',
+    // Translations
+    'localization.translation.title': 'Translations',
+    'localization.translation.manage': 'Manage Translations',
+    'localization.translation.value': 'Translation',
+    'localization.translation.verified': 'Verified',
+    'localization.translation.missing': 'Missing',
+    'localization.translation.save.changes': 'Save Changes',
+    'localization.translation.unsaved.changes': '{{count}} unsaved changes',
+    'localization.translation.no.keys': 'No translation keys found for this module',
+    'localization.translation.select.module': 'Select a module to view translations',
+    'localization.translation.select.language': 'Select a language to view translations',
+    'localization.translation.module': 'Module',
+    'localization.translation.language': 'Language',
+    'localization.translation.key': 'Key',
+    'localization.translation.default.message': 'Default Message',
+    // Language selector
+    'localization.selector.language': 'Language',
+    'localization.selector.select.language': 'Select Language',
+    // Translation list page
+    'localization.translation.save.success': 'Success',
+    'localization.translation.save.success.detail': 'Translations saved successfully',
+    'localization.translation.search.keys': 'Search translation keys...',
+    'localization.translation.select.module.hint': 'Please select a module to view its translations',
+    'localization.translation.select.language.hint': 'Please select a language to view translations',
+    'localization.translation.all.modules': 'All Modules',
+    'localization.translation.pagination': 'Showing {first} to {last} of {totalRecords} keys',
+    // Language direction labels
+    'localization.language.direction.ltr': 'Left to Right (LTR)',
+    'localization.language.direction.rtl': 'Right to Left (RTL)',
+    // Placeholders
+    'localization.placeholder.code': 'en',
+    'localization.placeholder.name': 'English',
+    'localization.placeholder.native.name': 'English',
+    'localization.placeholder.key.name': 'button.submit',
+    'localization.placeholder.default.message': 'Enter default value (English)',
+    'localization.placeholder.key.description': 'Optional description for translators',
+    // 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.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.not.found': 'Language not found',
+    '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.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.not.found': 'Translation key not found',
+    'translation.key.import.success': 'Translation keys imported successfully',
+    'translation.key.export.success': 'Translation keys exported 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.key.modules.success': 'Modules retrieved successfully',
+    // 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.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.not.found': 'Translation not found',
+    'translation.by.language.success': 'Translations retrieved successfully',
+    'translation.by.module.success': 'Translations by module retrieved successfully',
+    'translation.missing.success': 'Missing translations retrieved successfully',
+    'translation.sync.success': 'Translations synced successfully',
+    'translation.update.values.success': 'Translation values updated successfully',
+    // Validation messages
+    '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',
+    'localization.validation.key.required': 'Translation key is required',
+    'localization.validation.module.required': 'Module is required',
+    'localization.validation.default.message.required': 'Default message is required',
+    // Additional success messages
+    'localization.key.create.success': 'Translation key created successfully',
+    'localization.key.update.success': 'Translation key updated successfully',
+    'localization.key.delete.success': 'Translation key deleted successfully',
+    'localization.language.delete.success': 'Language deleted successfully',
+    'localization.language.load.failed': 'Failed to load languages',
+    'localization.key.load.failed': 'Failed to load translation keys',
+    // Translation key operation keys (used by form components)
+    'localization.translation.key.create.success': 'Translation key created successfully',
+    'localization.translation.key.update.success': 'Translation key updated successfully',
+    'localization.translation.key.delete.success': 'Translation key deleted successfully',
+    // Pagination templates
+    'localization.pagination.languages.template': 'Showing {first} to {last} of {totalRecords} languages',
+    'localization.pagination.keys.template': 'Showing {first} to {last} of {totalRecords} keys',
+};
+
+class LocalizationStateService {
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    appRef = inject(ApplicationRef);
+    primeNG = inject(PrimeNG);
+    _loadedModules = new Set();
+    _moduleFallbacks = new Map();
+    isBrowser = isPlatformBrowser(this.platformId);
+    _currentLanguage = signal(null, ...(ngDevMode ? [{ debugName: "_currentLanguage" }] : []));
+    _availableLanguages = signal([], ...(ngDevMode ? [{ debugName: "_availableLanguages" }] : []));
+    _translations = signal({}, ...(ngDevMode ? [{ debugName: "_translations" }] : []));
+    _fallbackMessages = signal({}, ...(ngDevMode ? [{ debugName: "_fallbackMessages" }] : []));
+    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    _isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "_isInitialized" }] : []));
+    currentLanguage = this._currentLanguage.asReadonly();
+    availableLanguages = this._availableLanguages.asReadonly();
+    translations = this._translations.asReadonly();
+    fallbackMessages = this._fallbackMessages.asReadonly();
+    isLoading = this._isLoading.asReadonly();
+    isInitialized = this._isInitialized.asReadonly();
+    currentLanguageCode = computed(() => this._currentLanguage()?.code ?? 'en', ...(ngDevMode ? [{ debugName: "currentLanguageCode" }] : []));
+    isRtl = computed(() => this._currentLanguage()?.direction === 'rtl', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
+    constructor() {
+        effect(() => {
+            const language = this._currentLanguage();
+            if (language && this.isBrowser) {
+                this.document.documentElement.dir = language.direction ?? 'ltr';
+                this.document.documentElement.lang = language.code;
+                localStorage.setItem(STORAGE_KEYS.CURRENT_LANGUAGE, language.code);
+            }
+        });
+        // Trigger zoneless change detection when translations update
+        effect(() => {
+            this._translations();
+            setTimeout(() => this.appRef.tick(), 0);
+        });
+        effect(() => {
+            const translations = this._translations();
+            const fallbacks = this._fallbackMessages();
+            this.syncPrimeNGTranslations(translations, fallbacks);
+        });
+    }
+    dotToCamel(str) {
+        return str.replace(/\.([a-z])/g, (_, c) => c.toUpperCase());
+    }
+    syncPrimeNGTranslations(translations, fallbacks) {
+        const primeNGTranslations = {};
+        const ariaTranslations = {};
+        const prefix = 'primeng.';
+        const ariaPrefix = 'primeng.aria.';
+        const allMessages = { ...fallbacks, ...translations };
+        for (const [key, value] of Object.entries(allMessages)) {
+            if (key.startsWith(ariaPrefix)) {
+                const ariaKey = this.dotToCamel(key.substring(ariaPrefix.length));
+                ariaTranslations[ariaKey] = value;
+            }
+            else if (key.startsWith(prefix)) {
+                const primeKey = this.dotToCamel(key.substring(prefix.length));
+                primeNGTranslations[primeKey] = value;
+            }
+        }
+        if (Object.keys(ariaTranslations).length > 0) {
+            primeNGTranslations['aria'] = ariaTranslations;
+        }
+        if (Object.keys(primeNGTranslations).length > 0) {
+            this.primeNG.setTranslation(primeNGTranslations);
+        }
+    }
+    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);
+    }
+    setInitialized(initialized) {
+        this._isInitialized.set(initialized);
+    }
+    getSavedLanguageCode() {
+        if (!this.isBrowser)
+            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();
+    }
+    registerModuleFallbacks(module, messages) {
+        this._moduleFallbacks.set(module, messages);
+        this._fallbackMessages.update((current) => ({ ...current, ...messages }));
+    }
+    hasModuleFallbacks(module) {
+        return this._moduleFallbacks.has(module);
+    }
+    static ɵfac = function LocalizationStateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationStateService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LocalizationStateService, factory: LocalizationStateService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationStateService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();
+
+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 = function LocalizationApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationApiService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LocalizationApiService, factory: LocalizationApiService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationApiService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+class LocalizationInitializerService {
+    config = inject(LOCALIZATION_CONFIG, { optional: true });
+    apiService = inject(LocalizationApiService);
+    stateService = inject(LocalizationStateService);
+    async initialize() {
+        if (!this.config) {
+            this.stateService.setInitialized(true);
+            return;
+        }
+        try {
+            this.stateService.setLoading(true);
+            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);
+            this.stateService.setInitialized(true);
+        }
+    }
+    static ɵfac = function LocalizationInitializerService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationInitializerService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LocalizationInitializerService, factory: LocalizationInitializerService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationInitializerService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+class TranslateService {
+    localizationState = inject(LocalizationStateService);
+    localizationConfig = inject(LOCALIZATION_CONFIG, { optional: true });
+    languageCode = this.localizationState.currentLanguageCode;
+    translate(key, params) {
+        if (!this.localizationConfig) {
+            return this.getFromFallback(key, params);
+        }
+        const translations = this.localizationState.translations();
+        const value = translations[key];
+        if (!value) {
+            return this.getFromFallback(key, params);
+        }
+        return this.interpolate(value, params);
+    }
+    translateSignal(key, params) {
+        return computed(() => {
+            this.localizationState.currentLanguage();
+            return this.translate(key, params);
+        });
+    }
+    instant(key, params) {
+        return this.translate(key, params);
+    }
+    interpolate(template, params) {
+        if (!params || !template)
+            return template;
+        return template.replace(/\{\{(\w+)\}\}/g, (match, paramKey) => {
+            const value = params[paramKey];
+            return value !== undefined ? String(value) : match;
+        });
+    }
+    getFromFallback(key, params) {
+        const fallbacks = this.localizationState.fallbackMessages();
+        const value = fallbacks[key] ?? key;
+        return this.interpolate(value, params);
+    }
+    static ɵfac = function TranslateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslateService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslateService, factory: TranslateService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslateService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+class TranslationLoaderService {
+    DEFAULT_INITIAL_MODULES = ['shared', 'layout'];
+    config = inject(LOCALIZATION_CONFIG, { optional: true });
+    apiService = inject(LocalizationApiService);
+    stateService = inject(LocalizationStateService);
+    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 loadModulesOnDemand(languageCode, modules) {
+        const modulesToLoad = modules.filter((m) => !this.stateService.isModuleLoaded(m));
+        if (modulesToLoad.length === 0)
+            return;
+        const response = await firstValueFrom(this.apiService.getTranslationsByLanguage(languageCode, modulesToLoad));
+        if (response.success && response.data) {
+            this.stateService.mergeTranslations(response.data);
+            modulesToLoad.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 = function TranslationLoaderService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationLoaderService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslationLoaderService, factory: TranslationLoaderService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationLoaderService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+class LanguageApiService {
+    http = inject(HttpClient);
+    appConfig = inject(APP_CONFIG);
+    get baseUrl() {
+        return `${this.appConfig.apiBaseUrl}/localization/language`;
+    }
+    getAll() {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 100 },
+            filter: {},
+            sort: { serial: 'ASC', name: 'ASC' },
+        });
+    }
+    getById(id) {
+        return this.http.post(`${this.baseUrl}/get/${id}`, {});
+    }
+    create(dto) {
+        return this.http.post(`${this.baseUrl}/insert`, dto);
+    }
+    update(dto) {
+        return this.http.post(`${this.baseUrl}/update`, dto);
+    }
+    delete(id) {
+        return this.http.post(`${this.baseUrl}/delete`, { id, type: 'delete' });
+    }
+    setDefault(id) {
+        return this.http.post(`${this.baseUrl}/set-default`, { id });
+    }
+    static ɵfac = function LanguageApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageApiService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LanguageApiService, factory: LanguageApiService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageApiService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+class TranslationKeyApiService {
+    http = inject(HttpClient);
+    appConfig = inject(APP_CONFIG);
+    get baseUrl() {
+        return `${this.appConfig.apiBaseUrl}/localization/translation-key`;
+    }
+    getAll(filter = {}) {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 1000 },
+            filter,
+            sort: { module: 'ASC', key: 'ASC' },
+        });
+    }
+    getByModule(module) {
+        return this.http.post(`${this.baseUrl}/get-by-module`, {
+            module,
+        });
+    }
+    getModules() {
+        return this.http.post(`${this.baseUrl}/get-modules`, {});
+    }
+    getById(id) {
+        return this.http.post(`${this.baseUrl}/get/${id}`, {});
+    }
+    create(dto) {
+        return this.http.post(`${this.baseUrl}/insert`, dto);
+    }
+    createMany(dtos) {
+        return this.http.post(`${this.baseUrl}/insert-many`, { items: dtos });
+    }
+    update(dto) {
+        return this.http.post(`${this.baseUrl}/update`, dto);
+    }
+    delete(id) {
+        return this.http.post(`${this.baseUrl}/delete`, { id, type: 'delete' });
+    }
+    static ɵfac = function TranslationKeyApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationKeyApiService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslationKeyApiService, factory: TranslationKeyApiService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationKeyApiService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+class TranslationApiService {
+    http = inject(HttpClient);
+    appConfig = inject(APP_CONFIG);
+    get baseUrl() {
+        return `${this.appConfig.apiBaseUrl}/localization/translation`;
+    }
+    getByLanguageId(languageId) {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 10000 },
+            filter: { languageId },
+            sort: {},
+        });
+    }
+    getByModuleAndLanguageId(module, languageId) {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 10000 },
+            filter: { languageId, module },
+            sort: {},
+        });
+    }
+    getById(id) {
+        return this.http.post(`${this.baseUrl}/get/${id}`, {});
+    }
+    create(dto) {
+        return this.http.post(`${this.baseUrl}/insert`, dto);
+    }
+    update(dto) {
+        return this.http.post(`${this.baseUrl}/update`, dto);
+    }
+    bulkUpdate(translations) {
+        return this.http.post(`${this.baseUrl}/update-many-values`, { translations });
+    }
+    delete(id) {
+        return this.http.post(`${this.baseUrl}/delete`, { id, type: 'delete' });
+    }
+    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`, {});
+    }
+    static ɵfac = function TranslationApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationApiService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslationApiService, factory: TranslationApiService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationApiService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+const _forTrack0$3 = ($index, $item) => $item.id;
+function LanguageSelectorComponent_For_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 9);
+} }
+function LanguageSelectorComponent_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function LanguageSelectorComponent_For_7_Template_button_click_0_listener() { const lang_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onLanguageSelect(lang_r2.code)); });
+    i0.ɵɵelementStart(1, "span", 7);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 8);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, LanguageSelectorComponent_For_7_Conditional_5_Template, 1, 0, "i", 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const lang_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("bg-primary-50", lang_r2.code === ctx_r2.selectedLanguageCode())("text-primary", lang_r2.code === ctx_r2.selectedLanguageCode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(lang_r2.nativeName || lang_r2.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("(", lang_r2.code, ")");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(lang_r2.code === ctx_r2.selectedLanguageCode() ? 5 : -1);
+} }
+class LanguageSelectorComponent {
+    localizationState = inject(LocalizationStateService);
+    translationLoader = inject(TranslationLoaderService);
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
+    elementRef = inject(ElementRef);
+    languages = this.localizationState.availableLanguages;
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    isActive = this._isActive.asReadonly();
+    selectedLanguageCode = this.localizationState.currentLanguageCode;
+    selectedLanguage = computed(() => this.languages().find((l) => l.code === this.selectedLanguageCode()) ?? null, ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : []));
+    constructor() {
+        fromEvent(this.document, 'click')
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this._isActive()))
+            .subscribe((event) => {
+            const target = event.target;
+            if (!this.elementRef.nativeElement.contains(target)) {
+                this._isActive.set(false);
+            }
+        });
+    }
+    togglePanel() {
+        this._isActive.update((v) => !v);
+    }
+    onLanguageSelect(code) {
+        const language = this.languages().find((l) => l.code === code);
+        if (language) {
+            this.localizationState.setCurrentLanguage(language);
+            this._isActive.set(false);
+            this.translationLoader
+                .loadTranslationsAsync(code, true)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe();
+        }
+    }
+    static ɵfac = function LanguageSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageSelectorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageSelectorComponent, selectors: [["lib-language-selector"]], hostAttrs: [1, "relative"], decls: 8, vars: 4, consts: [["type", "button", "pStyleClass", "@next", "enterFromClass", "hidden", "enterActiveClass", "animate-scalein", "leaveToClass", "hidden", "leaveActiveClass", "animate-fadeout", 1, "layout-topbar-action", 3, "click", "hideOnOutsideClick"], [1, "pi", "pi-globe"], [1, "font-semibold"], [1, "hidden", "absolute", "top-[3.25rem]", "z-50", "p-3", "border", "border-surface", "rounded-border", "origin-top", "shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]", "min-w-[180px]", 2, "background-color", "var(--surface-overlay)", "inset-inline-end", "0"], [1, "flex", "flex-col"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "bg-primary-50", "text-primary"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "click"], [1, "font-medium", "flex-1"], [1, "text-xs", "text-muted-color", "uppercase"], [1, "pi", "pi-check", "text-primary", "text-sm"]], template: function LanguageSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵlistener("click", function LanguageSelectorComponent_Template_button_click_0_listener() { return ctx.togglePanel(); });
+            i0.ɵɵelement(1, "i", 1);
+            i0.ɵɵelementStart(2, "span", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(4, "div", 3)(5, "div", 4);
+            i0.ɵɵrepeaterCreate(6, LanguageSelectorComponent_For_7_Template, 6, 7, "button", 5, _forTrack0$3);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            let tmp_2_0;
+            i0.ɵɵclassProp("layout-topbar-action-highlight", ctx.isActive());
+            i0.ɵɵproperty("hideOnOutsideClick", true);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(((tmp_2_0 = ctx.selectedLanguage()) == null ? null : tmp_2_0.nativeName) || ((tmp_2_0 = ctx.selectedLanguage()) == null ? null : tmp_2_0.name) || ctx.selectedLanguageCode());
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.languages());
+        } }, dependencies: [StyleClassModule, i1.StyleClass], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponent, [{
+        type: Component,
+        args: [{
+                selector: 'lib-language-selector',
+                imports: [StyleClassModule],
+                host: { class: 'relative' },
+                template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      [class.layout-topbar-action-highlight]="isActive()"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+      (click)="togglePanel()">
+      <i class="pi pi-globe"></i>
+      <span class="font-semibold">{{ selectedLanguage()?.nativeName || selectedLanguage()?.name || selectedLanguageCode() }}</span>
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;">
+      <div class="flex flex-col">
+        @for (lang of languages(); track lang.id) {
+          <button
+            type="button"
+            class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
+            [class.bg-primary-50]="lang.code === selectedLanguageCode()"
+            [class.text-primary]="lang.code === selectedLanguageCode()"
+            (click)="onLanguageSelect(lang.code)">
+            <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
+            <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
+            @if (lang.code === selectedLanguageCode()) {
+              <i class="pi pi-check text-primary text-sm"></i>
+            }
+          </button>
+        }
+      </div>
+    </div>
+  `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageSelectorComponent, { className: "LanguageSelectorComponent", filePath: "components/language-selector/language-selector.component.ts", lineNumber: 51 }); })();
+
+const _forTrack0$2 = ($index, $item) => $item.id;
+function LanguageSelectorPanelComponent_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "i", 5);
+} }
+function LanguageSelectorPanelComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 2);
+    i0.ɵɵdomListener("click", function LanguageSelectorPanelComponent_For_2_Template_button_click_0_listener() { const lang_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onLanguageSelect(lang_r2.code)); });
+    i0.ɵɵdomElementStart(1, "span", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 4);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(5, LanguageSelectorPanelComponent_For_2_Conditional_5_Template, 1, 0, "i", 5);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const lang_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("bg-primary-50", lang_r2.code === ctx_r2.selectedLanguageCode())("text-primary", lang_r2.code === ctx_r2.selectedLanguageCode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(lang_r2.nativeName || lang_r2.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("(", lang_r2.code, ")");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(lang_r2.code === ctx_r2.selectedLanguageCode() ? 5 : -1);
+} }
+class LanguageSelectorPanelComponent {
+    localizationState = inject(LocalizationStateService);
+    translationLoader = inject(TranslationLoaderService);
+    destroyRef = inject(DestroyRef);
+    languages = this.localizationState.availableLanguages;
+    _selectedLanguageCode = signal(this.localizationState.currentLanguageCode(), ...(ngDevMode ? [{ debugName: "_selectedLanguageCode" }] : []));
+    selectedLanguageCode = this._selectedLanguageCode.asReadonly();
+    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 = function LanguageSelectorPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageSelectorPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageSelectorPanelComponent, selectors: [["lib-language-selector-panel"]], hostAttrs: [1, "hidden", "absolute", "top-[3.25rem]", "z-50", "p-3", "border", "border-surface", "rounded-border", "origin-top", "shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]", "min-w-[180px]", 2, "background-color", "var(--surface-overlay)", "inset-inline-end", "0"], decls: 3, vars: 0, consts: [[1, "flex", "flex-col"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "bg-primary-50", "text-primary"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "click"], [1, "font-medium", "flex-1"], [1, "text-xs", "text-muted-color", "uppercase"], [1, "pi", "pi-check", "text-primary", "text-sm"]], template: function LanguageSelectorPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵrepeaterCreate(1, LanguageSelectorPanelComponent_For_2_Template, 6, 7, "button", 1, _forTrack0$2);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.languages());
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorPanelComponent, [{
+        type: Component,
+        args: [{
+                selector: 'lib-language-selector-panel',
+                imports: [],
+                host: {
+                    class: 'hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]',
+                    style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
+                },
+                template: `
+    <div class="flex flex-col">
+      @for (lang of languages(); track lang.id) {
+        <button
+          type="button"
+          class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
+          [class.bg-primary-50]="lang.code === selectedLanguageCode()"
+          [class.text-primary]="lang.code === selectedLanguageCode()"
+          (click)="onLanguageSelect(lang.code)">
+          <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
+          <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
+          @if (lang.code === selectedLanguageCode()) {
+            <i class="pi pi-check text-primary text-sm"></i>
+          }
+        </button>
+      }
+    </div>
+  `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageSelectorPanelComponent, { className: "LanguageSelectorPanelComponent", filePath: "components/language-selector-panel/language-selector-panel.component.ts", lineNumber: 33 }); })();
+
+function provideLocalization(config) {
+    const providers = [
+        { provide: LOCALIZATION_CONFIG, useValue: config },
+        LocalizationStateService,
+        LocalizationApiService,
+        LocalizationInitializerService,
+        TranslateService,
+        { provide: TRANSLATE_ADAPTER, useExisting: TranslateService },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (initializer) => () => initializer.initialize(),
+            deps: [LocalizationInitializerService],
+            multi: true,
+        },
+    ];
+    if (config.enableLayoutSelector) {
+        providers.push({ provide: LAYOUT_LANGUAGE_SELECTOR, useValue: LanguageSelectorComponent }, { provide: LAYOUT_LANGUAGE_SELECTOR_PANEL, useValue: LanguageSelectorPanelComponent });
+    }
+    return providers;
+}
+
+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: 'translations',
+                loadComponent: () => Promise.resolve().then(function () { return translationList_page; }).then((m) => m.TranslationListPage),
+            },
+            {
+                path: '',
+                redirectTo: 'languages',
+                pathMatch: 'full',
+            },
+        ],
+    },
+];
+
+const _forTrack0$1 = ($index, $item) => $item.id;
+function LocalizationContainerPage_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 5);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const tab_r1 = ctx.$implicit;
+    i0.ɵɵproperty("routerLink", tab_r1.route);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(tab_r1.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 4, tab_r1.labelKey));
+} }
+class LocalizationContainerPage {
+    permissionValidator = inject(PermissionValidatorService);
+    allTabs = [
+        {
+            id: 'languages',
+            labelKey: 'localization.tabs.languages',
+            icon: 'pi pi-globe',
+            route: 'languages',
+            permission: LANGUAGE_PERMISSIONS.READ,
+        },
+        {
+            id: 'keys',
+            labelKey: 'localization.tabs.keys',
+            icon: 'pi pi-key',
+            route: 'keys',
+            permission: TRANSLATION_KEY_PERMISSIONS.READ,
+        },
+        {
+            id: 'translations',
+            labelKey: 'localization.tabs.translations',
+            icon: 'pi pi-language',
+            route: 'translations',
+            permission: TRANSLATION_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));
+    }, ...(ngDevMode ? [{ debugName: "visibleTabs" }] : []));
+    static ɵfac = function LocalizationContainerPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationContainerPage)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LocalizationContainerPage, selectors: [["lib-localization-container"]], decls: 12, vars: 6, consts: [[1, "p-2", "sm:p-4"], [1, "mb-4"], [1, "text-xl", "sm:text-2xl", "font-bold", "m-0"], [1, "text-muted-color", "mt-1", "text-sm", "sm:text-base"], [1, "scrollbar-hide", "flex", "gap-1", "mb-4", "border-b", "border-surface", "overflow-x-auto", "flex-nowrap"], ["routerLinkActive", "tab-active", 1, "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", 3, "routerLink"]], template: function LocalizationContainerPage_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h1", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵpipe(4, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "p", 3);
+            i0.ɵɵtext(6);
+            i0.ɵɵpipe(7, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 4);
+            i0.ɵɵrepeaterCreate(9, LocalizationContainerPage_For_10_Template, 5, 6, "a", 5, _forTrack0$1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(11, "router-outlet");
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, "localization.title"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 4, "localization.subtitle"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.visibleTabs());
+        } }, dependencies: [RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], styles: [".scrollbar-hide[_ngcontent-%COMP%]{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationContainerPage, [{
+        type: Component,
+        args: [{ selector: 'lib-localization-container', imports: [RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], 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"
+          >
+            <i [class]="tab.icon"></i>
+            <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"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LocalizationContainerPage, { className: "LocalizationContainerPage", filePath: "pages/localization-container/localization-container.page.ts", lineNumber: 53 }); })();
+
+var localizationContainer_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LocalizationContainerPage: LocalizationContainerPage
+});
+
+const _c0$4 = () => ({ "min-width": "40rem" });
+function LanguageListPage_p_button_9_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 10);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("onClick", function LanguageListPage_p_button_9_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreate()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("label", i0.ɵɵpipeBind1(1, 1, "localization.language.create"));
+} }
+function LanguageListPage_ng_template_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "th");
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "th");
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th");
+    i0.ɵɵtext(8);
+    i0.ɵɵpipe(9, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "th");
+    i0.ɵɵtext(14);
+    i0.ɵɵpipe(15, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "th", 11);
+    i0.ɵɵtext(17);
+    i0.ɵɵpipe(18, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "localization.language.code"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 8, "localization.language.name"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 10, "localization.language.native.name"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 12, "localization.language.direction"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 14, "shared.status"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 16, "shared.actions"));
+} }
+function LanguageListPage_ng_template_14_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p-tag", 15);
+    i0.ɵɵpipe(1, "translate");
+} if (rf & 2) {
+    i0.ɵɵproperty("value", i0.ɵɵpipeBind1(1, 1, "localization.language.default"));
+} }
+function LanguageListPage_ng_template_14_Conditional_21_p_button_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 21);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("onClick", function LanguageListPage_ng_template_14_Conditional_21_p_button_0_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r3); const lang_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSetDefault(lang_r4)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "localization.language.set.default"));
+} }
+function LanguageListPage_ng_template_14_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, LanguageListPage_ng_template_14_Conditional_21_p_button_0_Template, 2, 4, "p-button", 20);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("hasPermission", ctx_r1.LANGUAGE_PERMISSIONS.UPDATE);
+} }
+function LanguageListPage_ng_template_14_p_button_22_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 22);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("onClick", function LanguageListPage_ng_template_14_p_button_22_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r5); const lang_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEdit(lang_r4.id)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "shared.edit"));
+} }
+function LanguageListPage_ng_template_14_p_button_23_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 23);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("onClick", function LanguageListPage_ng_template_14_p_button_23_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r6); const lang_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDelete(lang_r4)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const lang_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 3, "shared.delete"))("disabled", lang_r4.isDefault);
+} }
+function LanguageListPage_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "span", 12);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "td");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "td");
+    i0.ɵɵtext(7);
+    i0.ɵɵpipe(8, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "td");
+    i0.ɵɵelement(10, "p-tag", 13);
+    i0.ɵɵpipe(11, "translate");
+    i0.ɵɵpipe(12, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "td")(14, "div", 14);
+    i0.ɵɵelement(15, "p-tag", 13);
+    i0.ɵɵpipe(16, "translate");
+    i0.ɵɵpipe(17, "translate");
+    i0.ɵɵconditionalCreate(18, LanguageListPage_ng_template_14_Conditional_18_Template, 2, 3, "p-tag", 15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "td")(20, "div", 16);
+    i0.ɵɵconditionalCreate(21, LanguageListPage_ng_template_14_Conditional_21_Template, 1, 1, "p-button", 17);
+    i0.ɵɵtemplate(22, LanguageListPage_ng_template_14_p_button_22_Template, 2, 4, "p-button", 18)(23, LanguageListPage_ng_template_14_p_button_23_Template, 2, 5, "p-button", 19);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const lang_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(lang_r4.code);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(lang_r4.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(lang_r4.nativeName || i0.ɵɵpipeBind1(8, 11, "shared.na"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", lang_r4.direction === "rtl" ? i0.ɵɵpipeBind1(11, 13, "localization.language.rtl") : i0.ɵɵpipeBind1(12, 15, "localization.language.ltr"))("severity", lang_r4.direction === "rtl" ? "warn" : "info");
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", lang_r4.isActive ? i0.ɵɵpipeBind1(16, 17, "shared.active") : i0.ɵɵpipeBind1(17, 19, "shared.inactive"))("severity", lang_r4.isActive ? "success" : "secondary");
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(lang_r4.isDefault ? 18 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!lang_r4.isDefault ? 21 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("hasPermission", ctx_r1.LANGUAGE_PERMISSIONS.UPDATE);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("hasPermission", ctx_r1.LANGUAGE_PERMISSIONS.DELETE);
+} }
+function LanguageListPage_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 24);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "localization.language.empty"), " ");
+} }
+class LanguageListPage {
+    LANGUAGE_PERMISSIONS = LANGUAGE_PERMISSIONS;
+    router = inject(Router);
+    languageService = inject(LanguageApiService);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    ngOnInit() {
+        this.loadLanguages();
+    }
+    onCreate() {
+        this.router.navigate(['/localization/languages/new']);
+    }
+    onEdit(id) {
+        this.router.navigate(['/localization/languages', id]);
+    }
+    loadLanguages() {
+        this.isLoading.set(true);
+        this.languageService.getAll()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.languages.set(response.data ?? []);
+                }
+                this.isLoading.set(false);
+            },
+            error: () => {
+                this.isLoading.set(false);
+            },
+        });
+    }
+    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: 'pi pi-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: this.translateService.translate('localization.language.set.default.success', { name: lang.name }),
+                            });
+                            this.loadLanguages();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    onDelete(lang) {
+        this.confirmationService.confirm({
+            message: this.translateService.translate('shared.confirm.delete'),
+            header: this.translateService.translate('localization.language.delete.title'),
+            icon: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                this.languageService.delete(lang.id)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.messageService.add({
+                                severity: 'success',
+                                summary: this.translateService.translate('shared.success'),
+                                detail: this.translateService.translate('localization.language.delete.success'),
+                            });
+                            this.loadLanguages();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    static ɵfac = function LanguageListPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageListPage)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageListPage, selectors: [["lib-language-list-page"]], features: [i0.ɵɵProvidersFeature([ConfirmationService, MessageService])], decls: 20, vars: 11, consts: [["header", ""], ["body", ""], ["emptymessage", ""], [1, "card"], [1, "flex", "flex-col", "sm:flex-row", "justify-between", "items-start", "sm:items-center", "gap-3", "mb-4"], [1, "text-lg", "sm:text-xl", "font-semibold", "m-0"], [1, "text-sm", "text-muted-color", "mt-1"], ["icon", "pi pi-plus", "styleClass", "w-full sm:w-auto", 3, "label", "onClick", 4, "hasPermission"], [1, "overflow-x-auto", "-mx-4", "sm:mx-0"], ["styleClass", "p-datatable-sm", 3, "value", "loading", "tableStyle"], ["icon", "pi pi-plus", "styleClass", "w-full sm:w-auto", 3, "onClick", "label"], [1, "w-[150px]"], [1, "uppercase", "font-semibold"], [3, "value", "severity"], [1, "flex", "gap-1", "items-center"], ["severity", "contrast", 3, "value"], [1, "flex", "gap-1"], ["icon", "pi pi-star", "size", "small", 3, "text", "pTooltip"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "text", "pTooltip", "disabled", "onClick", 4, "hasPermission"], ["icon", "pi pi-star", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-star", "size", "small", 3, "onClick", "text", "pTooltip"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "onClick", "text", "pTooltip"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "onClick", "text", "pTooltip", "disabled"], ["colspan", "6", 1, "text-center", "py-4", "text-muted-color"]], template: function LanguageListPage_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div")(3, "h3", 5);
+            i0.ɵɵtext(4);
+            i0.ɵɵpipe(5, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "p", 6);
+            i0.ɵɵtext(7);
+            i0.ɵɵpipe(8, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(9, LanguageListPage_p_button_9_Template, 2, 3, "p-button", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "div", 8)(11, "p-table", 9);
+            i0.ɵɵtemplate(12, LanguageListPage_ng_template_12_Template, 19, 18, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(14, LanguageListPage_ng_template_14_Template, 24, 21, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(16, LanguageListPage_ng_template_16_Template, 4, 3, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelement(18, "p-confirmDialog")(19, "p-toast");
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 6, "localization.language.title"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 8, "localization.language.subtitle"), " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("hasPermission", ctx.LANGUAGE_PERMISSIONS.CREATE);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", ctx.languages())("loading", ctx.isLoading())("tableStyle", i0.ɵɵpureFunction0(10, _c0$4));
+        } }, dependencies: [AngularModule, PrimeModule, i2.Button, i2$1.ConfirmDialog, i8.Table, i4.Tag, i10.Toast, i6.Tooltip, HasPermissionDirective, TranslatePipe], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageListPage, [{
+        type: Component,
+        args: [{
+                selector: 'lib-language-list-page',
+                imports: [AngularModule, PrimeModule, 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>
+        <p-button
+          *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
+          [label]="'localization.language.create' | translate"
+          icon="pi pi-plus"
+          (onClick)="onCreate()"
+          styleClass="w-full sm:w-auto"
+        />
+      </div>
+
+      <div class="overflow-x-auto -mx-4 sm:mx-0">
+        <p-table
+          [value]="languages()"
+          [loading]="isLoading()"
+          styleClass="p-datatable-sm"
+          [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>
+                <p-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">
+                  <p-tag
+                    [value]="lang.isActive ? ('shared.active' | translate) : ('shared.inactive' | translate)"
+                    [severity]="lang.isActive ? 'success' : 'secondary'"
+                  />
+                  @if (lang.isDefault) {
+                    <p-tag [value]="'localization.language.default' | translate" severity="contrast" />
+                  }
+                </div>
+              </td>
+              <td>
+                <div class="flex gap-1">
+                  @if (!lang.isDefault) {
+                    <p-button
+                      *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                      icon="pi pi-star"
+                      [text]="true"
+                      size="small"
+                      [pTooltip]="'localization.language.set.default' | translate"
+                      (onClick)="onSetDefault(lang)"
+                    />
+                  }
+                  <p-button
+                    *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    [pTooltip]="'shared.edit' | translate"
+                    (onClick)="onEdit(lang.id)"
+                  />
+                  <p-button
+                    *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
+                    icon="pi pi-trash"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    [pTooltip]="'shared.delete' | translate"
+                    [disabled]="lang.isDefault"
+                    (onClick)="onDelete(lang)"
+                  />
+                </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>
+        </p-table>
+      </div>
+    </div>
+
+    <p-confirmDialog />
+    <p-toast />
+  `,
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageListPage, { className: "LanguageListPage", filePath: "pages/language-list/language-list.page.ts", lineNumber: 131 }); })();
+
+var languageList_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LanguageListPage: LanguageListPage
+});
+
+const _c0$3 = () => ({ standalone: true });
+function LanguageFormPage_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "h2", 22);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode() ? i0.ɵɵpipeBind1(3, 1, "localization.language.edit") : i0.ɵɵpipeBind1(4, 3, "localization.language.create"), " ");
+} }
+class LanguageFormPage {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    languageService = inject(LanguageApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    destroyRef = inject(DestroyRef);
+    routeParams = toSignal(this.route.paramMap);
+    loadTriggered = false;
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    existingLanguage = signal(null, ...(ngDevMode ? [{ debugName: "existingLanguage" }] : []));
+    isEditMode = computed(() => !!this.existingLanguage(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
+    directionOptions = computed(() => [
+        { label: this.translate('localization.language.direction.ltr'), value: 'ltr' },
+        { label: this.translate('localization.language.direction.rtl'), value: 'rtl' },
+    ], ...(ngDevMode ? [{ debugName: "directionOptions" }] : []));
+    formModel = signal({
+        code: '',
+        name: '',
+        nativeName: '',
+        direction: 'ltr',
+        serial: '',
+        isActive: true,
+        isDefault: false,
+    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    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;
+    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    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);
+        this.languageService.getById(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()
+            ? this.languageService.update({ id: this.existingLanguage().id, ...dto })
+            : this.languageService.create(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: this.translate(this.isEditMode() ? 'localization.language.update.success' : 'localization.language.create.success'),
+                    });
+                    this.router.navigate(['/localization/languages']);
+                }
+            },
+        });
+    }
+    onCancel() {
+        this.router.navigate(['/localization/languages']);
+    }
+    static ɵfac = function LanguageFormPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageFormPage)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageFormPage, selectors: [["lib-language-form-page"]], features: [i0.ɵɵProvidersFeature([MessageService])], decls: 58, vars: 66, consts: [["header", ""], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", 3, "ngSubmit"], [1, "flex", "flex-col", "gap-2"], ["for", "code", 1, "font-medium"], ["pInputText", "", "id", "code", 3, "formField", "placeholder"], [1, "text-muted-color"], ["for", "name", 1, "font-medium"], ["pInputText", "", "id", "name", 3, "formField", "placeholder"], ["for", "nativeName", 1, "font-medium"], ["pInputText", "", "id", "nativeName", 3, "formField", "placeholder"], ["for", "direction", 1, "font-medium"], ["id", "direction", "optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "options"], ["for", "serial", 1, "font-medium"], ["pInputText", "", "id", "serial", "type", "number", 3, "formField", "placeholder"], [1, "hidden", "md:block"], [1, "flex", "items-center", "gap-6", "md:col-span-2", "pt-4"], [1, "p-checkbox-native"], ["type", "checkbox", 3, "formField"], [1, "flex", "justify-end", "gap-4", "md:col-span-2", "pt-4"], ["severity", "secondary", 3, "onClick", "label", "outlined"], ["type", "submit", 3, "label", "loading", "disabled"], [1, "flex", "justify-between", "items-center", "p-4"], [1, "text-xl", "font-semibold", "m-0"]], template: function LanguageFormPage_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "p-card");
+            i0.ɵɵtemplate(1, LanguageFormPage_ng_template_1_Template, 5, 5, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(3, "form", 1);
+            i0.ɵɵlistener("ngSubmit", function LanguageFormPage_Template_form_ngSubmit_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSubmit()); });
+            i0.ɵɵelementStart(4, "div", 2)(5, "label", 3);
+            i0.ɵɵtext(6);
+            i0.ɵɵpipe(7, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(8, "input", 4);
+            i0.ɵɵpipe(9, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementStart(10, "small", 5);
+            i0.ɵɵtext(11);
+            i0.ɵɵpipe(12, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "div", 2)(14, "label", 6);
+            i0.ɵɵtext(15);
+            i0.ɵɵpipe(16, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(17, "input", 7);
+            i0.ɵɵpipe(18, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "div", 2)(20, "label", 8);
+            i0.ɵɵtext(21);
+            i0.ɵɵpipe(22, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(23, "input", 9);
+            i0.ɵɵpipe(24, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementStart(25, "small", 5);
+            i0.ɵɵtext(26);
+            i0.ɵɵpipe(27, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(28, "div", 2)(29, "label", 10);
+            i0.ɵɵtext(30);
+            i0.ɵɵpipe(31, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "p-select", 11);
+            i0.ɵɵlistener("ngModelChange", function LanguageFormPage_Template_p_select_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateDirection($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(33, "div", 2)(34, "label", 12);
+            i0.ɵɵtext(35);
+            i0.ɵɵpipe(36, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(37, "input", 13);
+            i0.ɵɵpipe(38, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(39, "div", 14);
+            i0.ɵɵelementStart(40, "div", 15)(41, "label", 16);
+            i0.ɵɵelement(42, "input", 17);
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementStart(43, "span");
+            i0.ɵɵtext(44);
+            i0.ɵɵpipe(45, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(46, "label", 16);
+            i0.ɵɵelement(47, "input", 17);
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementStart(48, "span");
+            i0.ɵɵtext(49);
+            i0.ɵɵpipe(50, "translate");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(51, "div", 18)(52, "p-button", 19);
+            i0.ɵɵpipe(53, "translate");
+            i0.ɵɵlistener("onClick", function LanguageFormPage_Template_p_button_onClick_52_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCancel()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(54, "p-button", 20);
+            i0.ɵɵpipe(55, "translate");
+            i0.ɵɵpipe(56, "translate");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelement(57, "p-toast");
+        } if (rf & 2) {
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(7, 33, "localization.language.code"), " *");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(9, 35, "localization.placeholder.code"));
+            i0.ɵɵcontrol(ctx.formTree.code, "formField");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 37, "localization.language.iso.code.hint"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(16, 39, "localization.language.name"), " *");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(18, 41, "localization.placeholder.name"));
+            i0.ɵɵcontrol(ctx.formTree.name, "formField");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 43, "localization.language.native.name"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(24, 45, "localization.placeholder.native.name"));
+            i0.ɵɵcontrol(ctx.formTree.nativeName, "formField");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 47, "localization.language.native.name.hint"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(31, 49, "localization.language.direction"), " *");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngModel", ctx.formModel().direction)("ngModelOptions", i0.ɵɵpureFunction0(65, _c0$3))("options", ctx.directionOptions());
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 51, "localization.language.display.order"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(38, 53, "shared.display.order.placeholder"));
+            i0.ɵɵcontrol(ctx.formTree.serial, "formField");
+            i0.ɵɵadvance(5);
+            i0.ɵɵcontrol(ctx.formTree.isActive, "formField");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 55, "shared.active"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵcontrol(ctx.formTree.isDefault, "formField");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(50, 57, "localization.language.default"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(53, 59, "shared.cancel"))("outlined", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("label", ctx.isEditMode() ? i0.ɵɵpipeBind1(55, 61, "shared.update") : i0.ɵɵpipeBind1(56, 63, "shared.create"))("loading", ctx.isSaving())("disabled", !ctx.isFormValid() || ctx.isSaving());
+        } }, dependencies: [AngularModule, i1$1.ɵNgNoValidate, i1$1.NgControlStatus, i1$1.NgControlStatusGroup, i1$1.NgModel, i1$1.NgForm, PrimeModule, i2.Button, i3.Card, i4$1.InputText, i5.Select, i10.Toast, FormsModule, FormField, TranslatePipe], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageFormPage, [{
+        type: Component,
+        args: [{
+                selector: 'lib-language-form-page',
+                imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
+                providers: [MessageService],
+                template: `
+    <p-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.create' | 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
+            pInputText
+            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
+            pInputText
+            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
+            pInputText
+            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>
+          <p-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
+            pInputText
+            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">
+          <label class="p-checkbox-native">
+            <input type="checkbox" [formField]="formTree.isActive" />
+            <span>{{ 'shared.active' | translate }}</span>
+          </label>
+          <label class="p-checkbox-native">
+            <input type="checkbox" [formField]="formTree.isDefault" />
+            <span>{{ 'localization.language.default' | translate }}</span>
+          </label>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            [outlined]="true"
+            (onClick)="onCancel()" />
+          <p-button
+            [label]="isEditMode() ? ('shared.update' | translate) : ('shared.create' | translate)"
+            type="submit"
+            [loading]="isSaving()"
+            [disabled]="!isFormValid() || isSaving()" />
+        </div>
+      </form>
+    </p-card>
+
+    <p-toast />
+  `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageFormPage, { className: "LanguageFormPage", filePath: "pages/language-form/language-form.page.ts", lineNumber: 136 }); })();
+
+var languageForm_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LanguageFormPage: LanguageFormPage
+});
+
+const _c0$2 = () => ({ standalone: true });
+const _c1$1 = () => [10, 15, 25, 50];
+function TranslationKeyListPage_p_button_10_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 16);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("onClick", function TranslationKeyListPage_p_button_10_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCreate()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("label", i0.ɵɵpipeBind1(1, 1, "localization.key.create"));
+} }
+function TranslationKeyListPage_ng_template_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "th", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "th", 18);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th", 19);
+    i0.ɵɵtext(8);
+    i0.ɵɵpipe(9, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th", 20);
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "th", 17);
+    i0.ɵɵtext(14);
+    i0.ɵɵpipe(15, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 5, "localization.key.module"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 7, "localization.key.name"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 9, "localization.key.default.message"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 11, "localization.key.translations"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 13, "shared.actions"));
+} }
+function TranslationKeyListPage_ng_template_23_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "small", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const key_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(key_r4.description);
+} }
+function TranslationKeyListPage_ng_template_23_p_button_14_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 29);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("onClick", function TranslationKeyListPage_ng_template_23_p_button_14_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r5); const key_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onEdit(key_r4)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "shared.edit"));
+} }
+function TranslationKeyListPage_ng_template_23_p_button_15_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 30);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵlistener("onClick", function TranslationKeyListPage_ng_template_23_p_button_15_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r6); const key_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDelete(key_r4)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "shared.delete"));
+} }
+function TranslationKeyListPage_ng_template_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td");
+    i0.ɵɵelement(2, "p-tag", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td")(4, "div", 22);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, TranslationKeyListPage_ng_template_23_Conditional_6_Template, 2, 1, "small", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "td");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "td", 24)(10, "span", 25);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "td")(13, "div", 26);
+    i0.ɵɵtemplate(14, TranslationKeyListPage_ng_template_23_p_button_14_Template, 2, 4, "p-button", 27)(15, TranslationKeyListPage_ng_template_23_p_button_15_Template, 2, 4, "p-button", 28);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const key_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", key_r4.module);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(key_r4.key);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(key_r4.description ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(key_r4.defaultMessage);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("text-green-500", ctx_r2.getTranslationCount(key_r4.id) === ctx_r2.languages().length)("text-orange-500", ctx_r2.getTranslationCount(key_r4.id) < ctx_r2.languages().length && ctx_r2.getTranslationCount(key_r4.id) > 0)("text-muted-color", ctx_r2.getTranslationCount(key_r4.id) === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", ctx_r2.getTranslationCount(key_r4.id), "/", ctx_r2.languages().length, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("hasPermission", ctx_r2.TRANSLATION_KEY_PERMISSIONS.UPDATE);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("hasPermission", ctx_r2.TRANSLATION_KEY_PERMISSIONS.DELETE);
+} }
+function TranslationKeyListPage_ng_template_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 31);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "localization.key.empty"), " ");
+} }
+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, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    modules = signal([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
+    translationKeys = signal([], ...(ngDevMode ? [{ debugName: "translationKeys" }] : []));
+    translationCounts = signal(new Map(), ...(ngDevMode ? [{ debugName: "translationCounts" }] : []));
+    selectedModule = signal(null, ...(ngDevMode ? [{ debugName: "selectedModule" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    moduleOptions = computed(() => [
+        { label: this.translateService.instant('shared.all'), value: null },
+        ...this.modules().map((m) => ({ label: m, value: m })),
+    ], ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
+    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;
+    }, ...(ngDevMode ? [{ debugName: "filteredKeys" }] : []));
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.isLoading.set(true);
+        forkJoin({
+            languages: this.languageService.getAll(),
+            modules: this.translationKeyService.getModules(),
+            keys: this.translationKeyService.getAll(),
+        })
+            .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: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                this.translationKeyService.delete(key.id)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.messageService.add({
+                                severity: 'success',
+                                summary: this.translateService.instant('shared.success'),
+                                detail: this.translateService.instant('localization.translation.key.delete.success'),
+                            });
+                            this.loadData();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    static ɵfac = function TranslationKeyListPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationKeyListPage)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TranslationKeyListPage, selectors: [["lib-translation-key-list-page"]], features: [i0.ɵɵProvidersFeature([ConfirmationService, MessageService])], decls: 29, vars: 27, consts: [["header", ""], ["body", ""], ["emptymessage", ""], [1, "card"], [1, "flex", "flex-col", "sm:flex-row", "justify-between", "items-start", "sm:items-center", "gap-3", "mb-4"], [1, "text-lg", "sm:text-xl", "font-semibold", "m-0"], [1, "text-sm", "text-muted-color", "mt-1"], [1, "flex", "gap-2"], ["icon", "pi pi-plus", 3, "label", "onClick", 4, "hasPermission"], [1, "flex", "flex-col", "md:flex-row", "gap-4", "mb-4"], [1, "flex-1"], ["optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "options", "ngModel", "ngModelOptions", "placeholder", "showClear"], [1, "w-full"], [1, "pi", "pi-search"], ["pInputText", "", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "placeholder"], ["styleClass", "p-datatable-sm", 3, "value", "loading", "paginator", "rows", "rowsPerPageOptions"], ["icon", "pi pi-plus", 3, "onClick", "label"], [2, "width", "15%"], [2, "width", "25%"], [2, "width", "35%"], [2, "width", "10%"], ["severity", "secondary", 3, "value"], [1, "font-medium"], [1, "text-muted-color"], [1, "text-center"], [1, "text-sm"], [1, "flex", "gap-1"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "onClick", "text", "pTooltip"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "onClick", "text", "pTooltip"], ["colspan", "5", 1, "text-center", "py-4", "text-muted-color"]], template: function TranslationKeyListPage_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div")(3, "h3", 5);
+            i0.ɵɵtext(4);
+            i0.ɵɵpipe(5, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "p", 6);
+            i0.ɵɵtext(7);
+            i0.ɵɵpipe(8, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 7);
+            i0.ɵɵtemplate(10, TranslationKeyListPage_p_button_10_Template, 2, 3, "p-button", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(11, "div", 9)(12, "div", 10)(13, "p-select", 11);
+            i0.ɵɵpipe(14, "translate");
+            i0.ɵɵlistener("ngModelChange", function TranslationKeyListPage_Template_p_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModuleChange($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 10)(16, "p-iconfield", 12);
+            i0.ɵɵelement(17, "p-inputicon", 13);
+            i0.ɵɵelementStart(18, "input", 14);
+            i0.ɵɵpipe(19, "translate");
+            i0.ɵɵlistener("ngModelChange", function TranslationKeyListPage_Template_input_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchTerm.set($event)); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(20, "p-table", 15);
+            i0.ɵɵtemplate(21, TranslationKeyListPage_ng_template_21_Template, 16, 15, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(23, TranslationKeyListPage_ng_template_23_Template, 16, 14, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(25, TranslationKeyListPage_ng_template_25_Template, 4, 3, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(27, "p-confirmDialog")(28, "p-toast");
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 16, "localization.key.title"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(8, 18, "localization.key.subtitle"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("hasPermission", ctx.TRANSLATION_KEY_PERMISSIONS.CREATE);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("options", ctx.moduleOptions())("ngModel", ctx.selectedModule())("ngModelOptions", i0.ɵɵpureFunction0(24, _c0$2))("placeholder", i0.ɵɵpipeBind1(14, 20, "localization.key.filter.module"))("showClear", true);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("ngModel", ctx.searchTerm())("ngModelOptions", i0.ɵɵpureFunction0(25, _c0$2))("placeholder", i0.ɵɵpipeBind1(19, 22, "shared.search"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", ctx.filteredKeys())("loading", ctx.isLoading())("paginator", true)("rows", 15)("rowsPerPageOptions", i0.ɵɵpureFunction0(26, _c1$1));
+        } }, dependencies: [AngularModule, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgModel, PrimeModule, i2.Button, i2$1.ConfirmDialog, i4$2.IconField, i5$1.InputIcon, i4$1.InputText, i5.Select, i8.Table, i4.Tag, i10.Toast, i6.Tooltip, FormsModule, HasPermissionDirective, TranslatePipe], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationKeyListPage, [{
+        type: Component,
+        args: [{
+                selector: 'lib-translation-key-list-page',
+                imports: [AngularModule, PrimeModule, FormsModule, 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.key.title' | translate }}</h3>
+          <p class="text-sm text-muted-color mt-1">{{ 'localization.key.subtitle' | translate }}</p>
+        </div>
+        <div class="flex gap-2">
+          <p-button
+            *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
+            [label]="'localization.key.create' | translate"
+            icon="pi pi-plus"
+            (onClick)="onCreate()"
+          />
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="flex flex-col md:flex-row gap-4 mb-4">
+        <div class="flex-1">
+          <p-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">
+          <p-iconfield class="w-full">
+            <p-inputicon class="pi pi-search" />
+            <input
+              pInputText
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              [ngModelOptions]="{standalone: true}"
+              [placeholder]="'shared.search' | translate"
+              class="w-full"
+            />
+          </p-iconfield>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <p-table
+        [value]="filteredKeys()"
+        [loading]="isLoading()"
+        [paginator]="true"
+        [rows]="15"
+        [rowsPerPageOptions]="[10, 15, 25, 50]"
+        styleClass="p-datatable-sm"
+      >
+        <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>
+          <tr>
+            <td>
+              <p-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]="getTranslationCount(key.id) === languages().length" [class.text-orange-500]="getTranslationCount(key.id) < languages().length && getTranslationCount(key.id) > 0" [class.text-muted-color]="getTranslationCount(key.id) === 0">
+                {{ getTranslationCount(key.id) }}/{{ languages().length }}
+              </span>
+            </td>
+            <td>
+              <div class="flex gap-1">
+                <p-button
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
+                  icon="pi pi-pencil"
+                  [text]="true"
+                  severity="secondary"
+                  size="small"
+                  [pTooltip]="'shared.edit' | translate"
+                  (onClick)="onEdit(key)"
+                />
+                <p-button
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
+                  icon="pi pi-trash"
+                  [text]="true"
+                  severity="danger"
+                  size="small"
+                  [pTooltip]="'shared.delete' | translate"
+                  (onClick)="onDelete(key)"
+                />
+              </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>
+      </p-table>
+    </div>
+
+    <p-confirmDialog />
+    <p-toast />
+  `,
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TranslationKeyListPage, { className: "TranslationKeyListPage", filePath: "pages/translation-key-list/translation-key-list.page.ts", lineNumber: 146 }); })();
+
+var translationKeyList_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TranslationKeyListPage: TranslationKeyListPage
+});
+
+const _c0$1 = () => ({ standalone: true });
+const _forTrack0 = ($index, $item) => $item.id;
+function TranslationKeyFormPage_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "h2", 24);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode() ? i0.ɵɵpipeBind1(3, 1, "localization.key.edit") : i0.ɵɵpipeBind1(4, 3, "localization.key.create"), " ");
+} }
+function TranslationKeyFormPage_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelement(1, "p-progressSpinner", 25);
+    i0.ɵɵelementEnd();
+} }
+function TranslationKeyFormPage_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 19);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "localization.key.no.languages"), " ");
+} }
+function TranslationKeyFormPage_Conditional_48_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const lang_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("(", lang_r4.nativeName, ")");
+} }
+function TranslationKeyFormPage_Conditional_48_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 26)(2, "label", 27);
+    i0.ɵɵtext(3);
+    i0.ɵɵconditionalCreate(4, TranslationKeyFormPage_Conditional_48_For_2_Conditional_4_Template, 2, 1, "span", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "p-tag", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "textarea", 29);
+    i0.ɵɵpipe(7, "translate");
+    i0.ɵɵlistener("ngModelChange", function TranslationKeyFormPage_Conditional_48_For_2_Template_textarea_ngModelChange_6_listener($event) { const lang_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setTranslationValue(lang_r4.id, $event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const lang_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", lang_r4.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(lang_r4.nativeName && lang_r4.nativeName !== lang_r4.name ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", lang_r4.code);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngModel", ctx_r1.getTranslationValue(lang_r4.id))("ngModelOptions", i0.ɵɵpureFunction0(9, _c0$1))("rows", 2)("placeholder", ctx_r1.formModel().defaultMessage || i0.ɵɵpipeBind1(7, 7, "localization.key.enter.translation"));
+} }
+function TranslationKeyFormPage_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵrepeaterCreate(1, TranslationKeyFormPage_Conditional_48_For_2_Template, 8, 10, "div", 5, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.languages());
+} }
+class TranslationKeyFormPage {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    languageService = inject(LanguageApiService);
+    translationKeyService = inject(TranslationKeyApiService);
+    translationService = inject(TranslationApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
+    destroyRef = inject(DestroyRef);
+    routeParams = toSignal(this.route.paramMap);
+    loadTriggered = false;
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    isLoadingLanguages = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLanguages" }] : []));
+    existingKey = signal(null, ...(ngDevMode ? [{ debugName: "existingKey" }] : []));
+    isEditMode = computed(() => !!this.existingKey(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    modules = signal([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
+    translations = signal([], ...(ngDevMode ? [{ debugName: "translations" }] : []));
+    translate(key) {
+        return this.translateAdapter?.translate(key) ?? key;
+    }
+    moduleOptions = computed(() => this.modules().map((m) => ({ label: m, value: m })), ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
+    formModel = signal({
+        key: '',
+        module: '',
+        defaultMessage: '',
+        description: '',
+        variables: '',
+    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    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;
+    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    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: this.languageService.getAll(),
+            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);
+        this.translationKeyService.getById(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,
+        };
+        this.translationKeyService.create(createDto)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.saveTranslations(response.data.id);
+                }
+                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,
+        };
+        this.translationKeyService.update(updateDto)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.saveTranslations(this.existingKey().id);
+                }
+                else {
+                    this.isSaving.set(false);
+                }
+            },
+            error: () => this.isSaving.set(false),
+        });
+    }
+    saveTranslations(keyId) {
+        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();
+            return;
+        }
+        this.translationService.bulkUpdate(translationsToSave)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => this.onSaveSuccess(),
+            error: () => this.onSaveSuccess(),
+        });
+    }
+    onSaveSuccess() {
+        this.messageService.add({
+            severity: 'success',
+            summary: this.translate('shared.success'),
+            detail: this.translate(this.isEditMode() ? 'localization.translation.key.update.success' : 'localization.translation.key.create.success'),
+        });
+        this.isSaving.set(false);
+        this.router.navigate(['/localization/keys']);
+    }
+    onCancel() {
+        this.router.navigate(['/localization/keys']);
+    }
+    static ɵfac = function TranslationKeyFormPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationKeyFormPage)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TranslationKeyFormPage, selectors: [["lib-translation-key-form-page"]], features: [i0.ɵɵProvidersFeature([MessageService])], decls: 56, vars: 65, consts: [["header", ""], [1, "flex", "flex-col", "gap-6", 3, "ngSubmit"], [1, "p-4", "surface-ground", "rounded-lg"], [1, "font-semibold", "mt-0", "mb-4"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4"], [1, "flex", "flex-col", "gap-2"], ["for", "key", 1, "font-medium"], ["pInputText", "", "id", "key", 3, "formField", "placeholder"], ["for", "module", 1, "font-medium"], ["id", "module", "optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "options", "editable", "placeholder"], [1, "flex", "flex-col", "gap-2", "md:col-span-2"], ["for", "defaultMessage", 1, "font-medium"], ["pInputTextarea", "", "id", "defaultMessage", 3, "formField", "rows", "placeholder"], ["for", "description", 1, "font-medium"], ["pInputText", "", "id", "description", 3, "formField", "placeholder"], ["for", "variables", 1, "font-medium"], ["pInputText", "", "id", "variables", 3, "formField", "placeholder"], [1, "text-muted-color"], [1, "flex", "justify-center", "py-4"], [1, "text-muted-color", "text-center", "py-4"], [1, "flex", "justify-end", "gap-4", "pt-4"], ["severity", "secondary", 3, "onClick", "label", "outlined"], ["type", "submit", 3, "label", "loading", "disabled"], [1, "flex", "justify-between", "items-center", "p-4"], [1, "text-xl", "font-semibold", "m-0"], ["strokeWidth", "4"], [1, "flex", "justify-between", "items-center"], [1, "font-medium"], ["severity", "secondary", 1, "uppercase", 3, "value"], ["pInputTextarea", "", 3, "ngModelChange", "ngModel", "ngModelOptions", "rows", "placeholder"]], template: function TranslationKeyFormPage_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "p-card");
+            i0.ɵɵtemplate(1, TranslationKeyFormPage_ng_template_1_Template, 5, 5, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(3, "form", 1);
+            i0.ɵɵlistener("ngSubmit", function TranslationKeyFormPage_Template_form_ngSubmit_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSubmit()); });
+            i0.ɵɵelementStart(4, "div", 2)(5, "h4", 3);
+            i0.ɵɵtext(6);
+            i0.ɵɵpipe(7, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 4)(9, "div", 5)(10, "label", 6);
+            i0.ɵɵtext(11);
+            i0.ɵɵpipe(12, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(13, "input", 7);
+            i0.ɵɵpipe(14, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "div", 5)(16, "label", 8);
+            i0.ɵɵtext(17);
+            i0.ɵɵpipe(18, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "p-select", 9);
+            i0.ɵɵpipe(20, "translate");
+            i0.ɵɵlistener("ngModelChange", function TranslationKeyFormPage_Template_p_select_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateModule($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(21, "div", 10)(22, "label", 11);
+            i0.ɵɵtext(23);
+            i0.ɵɵpipe(24, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(25, "textarea", 12);
+            i0.ɵɵpipe(26, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "div", 10)(28, "label", 13);
+            i0.ɵɵtext(29);
+            i0.ɵɵpipe(30, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(31, "input", 14);
+            i0.ɵɵpipe(32, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(33, "div", 10)(34, "label", 15);
+            i0.ɵɵtext(35);
+            i0.ɵɵpipe(36, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(37, "input", 16);
+            i0.ɵɵpipe(38, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementStart(39, "small", 17);
+            i0.ɵɵtext(40);
+            i0.ɵɵpipe(41, "translate");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(42, "div", 2)(43, "h4", 3);
+            i0.ɵɵtext(44);
+            i0.ɵɵpipe(45, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(46, TranslationKeyFormPage_Conditional_46_Template, 2, 0, "div", 18)(47, TranslationKeyFormPage_Conditional_47_Template, 3, 3, "p", 19)(48, TranslationKeyFormPage_Conditional_48_Template, 3, 0, "div", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(49, "div", 20)(50, "p-button", 21);
+            i0.ɵɵpipe(51, "translate");
+            i0.ɵɵlistener("onClick", function TranslationKeyFormPage_Template_p_button_onClick_50_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCancel()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(52, "p-button", 22);
+            i0.ɵɵpipe(53, "translate");
+            i0.ɵɵpipe(54, "translate");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelement(55, "p-toast");
+        } if (rf & 2) {
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 32, "localization.key.about"));
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(12, 34, "localization.key.name"), " *");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(14, 36, "localization.placeholder.key.name"));
+            i0.ɵɵcontrol(ctx.formTree.key, "formField");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(18, 38, "localization.key.module"), " *");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngModel", ctx.formModel().module)("ngModelOptions", i0.ɵɵpureFunction0(64, _c0$1))("options", ctx.moduleOptions())("editable", true)("placeholder", i0.ɵɵpipeBind1(20, 40, "localization.key.select.module"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(24, 42, "localization.key.default.message"), " *");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("rows", 2)("placeholder", i0.ɵɵpipeBind1(26, 44, "localization.placeholder.default.message"));
+            i0.ɵɵcontrol(ctx.formTree.defaultMessage, "formField");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 46, "localization.key.description"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(32, 48, "localization.placeholder.key.description"));
+            i0.ɵɵcontrol(ctx.formTree.description, "formField");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 50, "localization.key.variables"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(38, 52, "localization.key.variables.placeholder"));
+            i0.ɵɵcontrol(ctx.formTree.variables, "formField");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(41, 54, "localization.key.variables.hint"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 56, "localization.key.translations.section"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoadingLanguages() ? 46 : ctx.languages().length === 0 ? 47 : 48);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(51, 58, "shared.cancel"))("outlined", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("label", ctx.isEditMode() ? i0.ɵɵpipeBind1(53, 60, "shared.update") : i0.ɵɵpipeBind1(54, 62, "shared.create"))("loading", ctx.isSaving())("disabled", !ctx.isFormValid() || ctx.isSaving());
+        } }, dependencies: [AngularModule, i1$1.ɵNgNoValidate, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgControlStatusGroup, i1$1.NgModel, i1$1.NgForm, PrimeModule, i2.Button, i3.Card, i4$1.InputText, i5.Select, i4.Tag, i7.Textarea, i10.Toast, i9.ProgressSpinner, FormsModule, FormField, TranslatePipe], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationKeyFormPage, [{
+        type: Component,
+        args: [{
+                selector: 'lib-translation-key-form-page',
+                imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
+                providers: [MessageService],
+                template: `
+    <p-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.create' | 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
+                pInputText
+                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>
+              <p-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
+                pInputTextarea
+                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
+                pInputText
+                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
+                pInputText
+                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">
+              <p-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>
+                    <p-tag [value]="lang.code" severity="secondary" class="uppercase" />
+                  </div>
+                  <textarea
+                    pInputTextarea
+                    [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">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            [outlined]="true"
+            (onClick)="onCancel()" />
+          <p-button
+            [label]="isEditMode() ? ('shared.update' | translate) : ('shared.create' | translate)"
+            type="submit"
+            [loading]="isSaving()"
+            [disabled]="!isFormValid() || isSaving()" />
+        </div>
+      </form>
+    </p-card>
+
+    <p-toast />
+  `,
+            }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TranslationKeyFormPage, { className: "TranslationKeyFormPage", filePath: "pages/translation-key-form/translation-key-form.page.ts", lineNumber: 173 }); })();
+
+var translationKeyForm_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TranslationKeyFormPage: TranslationKeyFormPage
+});
+
+const _c0 = () => ({ standalone: true });
+const _c1 = () => [10, 20, 50, 100];
+const _c2 = a0 => ({ count: a0 });
+function TranslationListPage_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "p-progressSpinner", 21);
+    i0.ɵɵelementEnd();
+} }
+function TranslationListPage_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "p");
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "localization.translation.select.language.hint"));
+} }
+function TranslationListPage_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "p");
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "localization.translation.no.keys"));
+} }
+function TranslationListPage_Conditional_32_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "th", 22);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "th", 23);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th", 24);
+    i0.ɵɵtext(8);
+    i0.ɵɵpipe(9, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th", 25);
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "localization.translation.key"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 6, "localization.translation.default.message"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 8, "localization.translation.value"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 10, "localization.translation.verified"));
+} }
+function TranslationListPage_Conditional_32_ng_template_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "small", 19);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r2.translationKey.description);
+} }
+function TranslationListPage_Conditional_32_ng_template_3_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const v_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r3.formatVariable(v_r3));
+} }
+function TranslationListPage_Conditional_32_ng_template_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵrepeaterCreate(1, TranslationListPage_Conditional_32_ng_template_3_Conditional_5_For_2_Template, 2, 1, "span", 32, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(row_r2.translationKey.variables);
+} }
+function TranslationListPage_Conditional_32_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 26);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, TranslationListPage_Conditional_32_ng_template_3_Conditional_4_Template, 2, 1, "small", 19);
+    i0.ɵɵconditionalCreate(5, TranslationListPage_Conditional_32_ng_template_3_Conditional_5_Template, 3, 0, "div", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "td")(7, "span", 28);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "td")(10, "textarea", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function TranslationListPage_Conditional_32_ng_template_3_Template_textarea_ngModelChange_10_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; i0.ɵɵtwoWayBindingSet(row_r2.editValue, $event) || (row_r2.editValue = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function TranslationListPage_Conditional_32_ng_template_3_Template_textarea_input_10_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onValueChange(row_r2)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "td", 30)(12, "p-checkbox", 31);
+    i0.ɵɵtwoWayListener("ngModelChange", function TranslationListPage_Conditional_32_ng_template_3_Template_p_checkbox_ngModelChange_12_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; i0.ɵɵtwoWayBindingSet(row_r2.isVerified, $event) || (row_r2.isVerified = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("onChange", function TranslationListPage_Conditional_32_ng_template_3_Template_p_checkbox_onChange_12_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onVerifiedChange(row_r2)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const row_r2 = ctx.$implicit;
+    i0.ɵɵclassProp("bg-yellow-50", row_r2.isDirty);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(row_r2.translationKey.key);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(row_r2.translationKey.description ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((row_r2.translationKey.variables == null ? null : row_r2.translationKey.variables.length) ? 5 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(row_r2.translationKey.defaultMessage);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", row_r2.editValue);
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(13, _c0))("rows", 2)("placeholder", row_r2.translationKey.defaultMessage);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", row_r2.isVerified);
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(14, _c0))("binary", true);
+} }
+function TranslationListPage_Conditional_32_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 33);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "shared.no.results"), " ");
+} }
+function TranslationListPage_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p-table", 17);
+    i0.ɵɵtemplate(1, TranslationListPage_Conditional_32_ng_template_1_Template, 13, 12, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, TranslationListPage_Conditional_32_ng_template_3_Template, 13, 15, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(5, TranslationListPage_Conditional_32_ng_template_5_Template, 4, 3, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("value", ctx_r3.filteredRows())("paginator", true)("rows", 20)("rowsPerPageOptions", i0.ɵɵpureFunction0(6, _c1))("showCurrentPageReport", true)("currentPageReportTemplate", ctx_r3.paginationTemplate());
+} }
+function TranslationListPage_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
+    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, "localization.translation.unsaved.changes", i0.ɵɵpureFunction1(4, _c2, ctx_r3.changedCount())), " ");
+} }
+class TranslationListPage {
+    languageService = inject(LanguageApiService);
+    translationKeyService = inject(TranslationKeyApiService);
+    translationService = inject(TranslationApiService);
+    messageService = inject(MessageService);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    modules = signal([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
+    translationRows = signal([], ...(ngDevMode ? [{ debugName: "translationRows" }] : []));
+    selectedModule = signal(null, ...(ngDevMode ? [{ debugName: "selectedModule" }] : []));
+    selectedLanguageId = signal(null, ...(ngDevMode ? [{ debugName: "selectedLanguageId" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    moduleOptions = computed(() => [
+        { label: this.translateService.instant('localization.translation.all.modules'), value: null },
+        ...this.modules().map((m) => ({ label: m, value: m })),
+    ], ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
+    paginationTemplate = computed(() => this.translateService.instant('localization.translation.pagination'), ...(ngDevMode ? [{ debugName: "paginationTemplate" }] : []));
+    languageOptions = computed(() => this.languages().map((l) => ({
+        label: `${l.name} (${l.code})`,
+        value: l.id,
+    })), ...(ngDevMode ? [{ debugName: "languageOptions" }] : []));
+    filteredRows = computed(() => {
+        const rows = this.translationRows();
+        const search = this.searchTerm().toLowerCase().trim();
+        if (!search)
+            return rows;
+        return rows.filter((r) => r.translationKey.key.toLowerCase().includes(search) ||
+            r.translationKey.defaultMessage.toLowerCase().includes(search) ||
+            r.editValue.toLowerCase().includes(search));
+    }, ...(ngDevMode ? [{ debugName: "filteredRows" }] : []));
+    hasChanges = computed(() => this.translationRows().some((r) => r.isDirty), ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
+    changedCount = computed(() => this.translationRows().filter((r) => r.isDirty).length, ...(ngDevMode ? [{ debugName: "changedCount" }] : []));
+    formatVariable(v) {
+        return `{{${v}}}`;
+    }
+    ngOnInit() {
+        this.loadInitialData();
+    }
+    loadInitialData() {
+        this.isLoading.set(true);
+        forkJoin({
+            languages: this.languageService.getAll(),
+            modules: this.translationKeyService.getModules(),
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: ({ languages, modules }) => {
+                if (languages.success && languages.data) {
+                    this.languages.set(languages.data.filter((l) => l.isActive));
+                    const defaultLang = languages.data.find((l) => l.isDefault);
+                    if (defaultLang) {
+                        this.selectedLanguageId.set(defaultLang.id);
+                    }
+                    else if (languages.data.length > 0) {
+                        this.selectedLanguageId.set(languages.data[0].id);
+                    }
+                }
+                if (modules.success && modules.data) {
+                    this.modules.set(modules.data);
+                }
+                this.isLoading.set(false);
+            },
+            error: () => {
+                this.isLoading.set(false);
+            },
+        });
+    }
+    onModuleChange(value) {
+        this.selectedModule.set(value);
+        this.loadTranslations();
+    }
+    onLanguageChange(value) {
+        this.selectedLanguageId.set(value);
+        this.loadTranslations();
+    }
+    loadTranslations() {
+        const languageId = this.selectedLanguageId();
+        if (!languageId) {
+            this.translationRows.set([]);
+            return;
+        }
+        this.isLoading.set(true);
+        const module = this.selectedModule();
+        const keysRequest = module
+            ? this.translationKeyService.getByModule(module)
+            : this.translationKeyService.getAll();
+        const translationsRequest = module
+            ? this.translationService.getByModuleAndLanguageId(module, languageId)
+            : this.translationService.getByLanguageId(languageId);
+        forkJoin({
+            keys: keysRequest,
+            translations: translationsRequest,
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: ({ keys, translations }) => {
+                const translationMap = new Map();
+                if (translations.success && translations.data) {
+                    translations.data.forEach((t) => {
+                        translationMap.set(t.translationKeyId, t);
+                    });
+                }
+                const rows = [];
+                if (keys.success && keys.data) {
+                    keys.data.forEach((key) => {
+                        const translation = translationMap.get(key.id) ?? null;
+                        rows.push({
+                            translationKey: key,
+                            translation,
+                            editValue: translation?.value ?? '',
+                            isVerified: translation?.isVerified ?? false,
+                            isDirty: false,
+                        });
+                    });
+                }
+                this.translationRows.set(rows);
+                this.isLoading.set(false);
+            },
+            error: () => {
+                this.isLoading.set(false);
+            },
+        });
+    }
+    onValueChange(row) {
+        const originalValue = row.translation?.value ?? '';
+        const originalVerified = row.translation?.isVerified ?? false;
+        row.isDirty = row.editValue !== originalValue || row.isVerified !== originalVerified;
+        this.translationRows.update((rows) => [...rows]);
+    }
+    onVerifiedChange(row) {
+        this.onValueChange(row);
+    }
+    saveChanges() {
+        const changedRows = this.translationRows().filter((r) => r.isDirty);
+        const languageId = this.selectedLanguageId();
+        if (changedRows.length === 0 || !languageId)
+            return;
+        this.isSaving.set(true);
+        const items = changedRows.map((row) => ({
+            id: row.translation?.id,
+            languageId,
+            translationKeyId: row.translationKey.id,
+            value: row.editValue,
+            isVerified: row.isVerified,
+        }));
+        this.translationService
+            .bulkUpdate(items)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: this.translateService.instant('localization.translation.save.success'),
+                        detail: this.translateService.instant('localization.translation.save.success.detail'),
+                    });
+                    this.loadTranslations();
+                }
+                this.isSaving.set(false);
+            },
+            error: () => {
+                this.isSaving.set(false);
+            },
+        });
+    }
+    static ɵfac = function TranslationListPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationListPage)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TranslationListPage, selectors: [["lib-translation-list-page"]], features: [i0.ɵɵProvidersFeature([MessageService])], decls: 39, vars: 44, consts: [["header", ""], ["body", ""], ["emptymessage", ""], [1, "card"], [1, "flex", "flex-col", "sm:flex-row", "justify-between", "items-start", "sm:items-center", "gap-4", "mb-4"], [1, "text-xl", "font-semibold", "m-0"], [1, "flex", "gap-2"], ["icon", "pi pi-save", 3, "onClick", "label", "disabled", "loading"], [1, "flex", "flex-col", "md:flex-row", "gap-4", "mb-4"], [1, "flex-1"], [1, "block", "font-medium", "mb-2"], ["optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "options", "ngModel", "ngModelOptions", "placeholder"], [1, "w-full"], [1, "pi", "pi-search"], ["pInputText", "", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "placeholder"], [1, "flex", "justify-center", "py-8"], [1, "text-center", "py-8", "text-muted-color"], ["styleClass", "p-datatable-sm", 3, "value", "paginator", "rows", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate"], [1, "flex", "justify-between", "items-center", "mt-4"], [1, "text-muted-color"], [1, "text-orange-500"], ["strokeWidth", "4"], [2, "width", "30%"], [2, "width", "25%"], [2, "width", "35%"], [2, "width", "10%"], [1, "font-medium", "text-sm"], [1, "mt-1"], [1, "text-sm"], ["pInputTextarea", "", 1, "w-full", 3, "ngModelChange", "input", "ngModel", "ngModelOptions", "rows", "placeholder"], [1, "text-center"], [3, "ngModelChange", "onChange", "ngModel", "ngModelOptions", "binary"], [1, "text-xs", "bg-surface-100", "px-2", "py-1", "rounded", "mr-1"], ["colspan", "4", 1, "text-center", "py-4", "text-muted-color"], [1, "pi", "pi-exclamation-circle", "mr-1"]], template: function TranslationListPage_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "h2", 5);
+            i0.ɵɵtext(3);
+            i0.ɵɵpipe(4, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 6)(6, "p-button", 7);
+            i0.ɵɵpipe(7, "translate");
+            i0.ɵɵlistener("onClick", function TranslationListPage_Template_p_button_onClick_6_listener() { return ctx.saveChanges(); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(8, "div", 8)(9, "div", 9)(10, "label", 10);
+            i0.ɵɵtext(11);
+            i0.ɵɵpipe(12, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "p-select", 11);
+            i0.ɵɵpipe(14, "translate");
+            i0.ɵɵlistener("ngModelChange", function TranslationListPage_Template_p_select_ngModelChange_13_listener($event) { return ctx.onModuleChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 9)(16, "label", 10);
+            i0.ɵɵtext(17);
+            i0.ɵɵpipe(18, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "p-select", 11);
+            i0.ɵɵpipe(20, "translate");
+            i0.ɵɵlistener("ngModelChange", function TranslationListPage_Template_p_select_ngModelChange_19_listener($event) { return ctx.onLanguageChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(21, "div", 9)(22, "label", 10);
+            i0.ɵɵtext(23);
+            i0.ɵɵpipe(24, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(25, "p-iconfield", 12);
+            i0.ɵɵelement(26, "p-inputicon", 13);
+            i0.ɵɵelementStart(27, "input", 14);
+            i0.ɵɵpipe(28, "translate");
+            i0.ɵɵlistener("ngModelChange", function TranslationListPage_Template_input_ngModelChange_27_listener($event) { return ctx.searchTerm.set($event); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵconditionalCreate(29, TranslationListPage_Conditional_29_Template, 2, 0, "div", 15)(30, TranslationListPage_Conditional_30_Template, 4, 3, "div", 16)(31, TranslationListPage_Conditional_31_Template, 4, 3, "div", 16)(32, TranslationListPage_Conditional_32_Template, 7, 7, "p-table", 17);
+            i0.ɵɵelementStart(33, "div", 18)(34, "div", 19);
+            i0.ɵɵconditionalCreate(35, TranslationListPage_Conditional_35_Template, 4, 6, "span", 20);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "p-button", 7);
+            i0.ɵɵpipe(37, "translate");
+            i0.ɵɵlistener("onClick", function TranslationListPage_Template_p_button_onClick_36_listener() { return ctx.saveChanges(); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelement(38, "p-toast");
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 23, "localization.translation.title"));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(7, 25, "shared.save"))("disabled", !ctx.hasChanges())("loading", ctx.isSaving());
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 27, "localization.translation.module"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("options", ctx.moduleOptions())("ngModel", ctx.selectedModule())("ngModelOptions", i0.ɵɵpureFunction0(41, _c0))("placeholder", i0.ɵɵpipeBind1(14, 29, "localization.translation.select.module"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 31, "localization.translation.language"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("options", ctx.languageOptions())("ngModel", ctx.selectedLanguageId())("ngModelOptions", i0.ɵɵpureFunction0(42, _c0))("placeholder", i0.ɵɵpipeBind1(20, 33, "localization.translation.select.language"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(24, 35, "shared.search"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngModel", ctx.searchTerm())("ngModelOptions", i0.ɵɵpureFunction0(43, _c0))("placeholder", i0.ɵɵpipeBind1(28, 37, "localization.translation.search.keys"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading() ? 29 : !ctx.selectedLanguageId() ? 30 : ctx.filteredRows().length === 0 ? 31 : 32);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.hasChanges() ? 35 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(37, 39, "shared.save"))("disabled", !ctx.hasChanges())("loading", ctx.isSaving());
+        } }, dependencies: [AngularModule, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgModel, PrimeModule, i2.Button, i3$1.Checkbox, i4$2.IconField, i5$1.InputIcon, i4$1.InputText, i5.Select, i8.Table, i7.Textarea, i10.Toast, i9.ProgressSpinner, FormsModule, TranslatePipe], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationListPage, [{
+        type: Component,
+        args: [{
+                selector: 'lib-translation-list-page',
+                imports: [AngularModule, PrimeModule, FormsModule, TranslatePipe],
+                providers: [MessageService],
+                template: `
+    <div class="card">
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
+        <h2 class="text-xl font-semibold m-0">{{ 'localization.translation.title' | translate }}</h2>
+        <div class="flex gap-2">
+          <p-button
+            [label]="'shared.save' | translate"
+            icon="pi pi-save"
+            [disabled]="!hasChanges()"
+            [loading]="isSaving()"
+            (onClick)="saveChanges()"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col md:flex-row gap-4 mb-4">
+        <div class="flex-1">
+          <label class="block font-medium mb-2">{{ 'localization.translation.module' | translate }}</label>
+          <p-select
+            [options]="moduleOptions()"
+            [ngModel]="selectedModule()"
+            (ngModelChange)="onModuleChange($event)"
+            [ngModelOptions]="{standalone: true}"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'localization.translation.select.module' | translate"
+            class="w-full"
+          />
+        </div>
+        <div class="flex-1">
+          <label class="block font-medium mb-2">{{ 'localization.translation.language' | translate }}</label>
+          <p-select
+            [options]="languageOptions()"
+            [ngModel]="selectedLanguageId()"
+            (ngModelChange)="onLanguageChange($event)"
+            [ngModelOptions]="{standalone: true}"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'localization.translation.select.language' | translate"
+            class="w-full"
+          />
+        </div>
+        <div class="flex-1">
+          <label class="block font-medium mb-2">{{ 'shared.search' | translate }}</label>
+          <p-iconfield class="w-full">
+            <p-inputicon class="pi pi-search" />
+            <input
+              pInputText
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              [ngModelOptions]="{standalone: true}"
+              [placeholder]="'localization.translation.search.keys' | translate"
+              class="w-full"
+            />
+          </p-iconfield>
+        </div>
+      </div>
+
+      @if (isLoading()) {
+        <div class="flex justify-center py-8">
+          <p-progressSpinner strokeWidth="4" />
+        </div>
+      } @else if (!selectedLanguageId()) {
+        <div class="text-center py-8 text-muted-color">
+          <p>{{ 'localization.translation.select.language.hint' | translate }}</p>
+        </div>
+      } @else if (filteredRows().length === 0) {
+        <div class="text-center py-8 text-muted-color">
+          <p>{{ 'localization.translation.no.keys' | translate }}</p>
+        </div>
+      } @else {
+        <p-table
+          [value]="filteredRows()"
+          [paginator]="true"
+          [rows]="20"
+          [rowsPerPageOptions]="[10, 20, 50, 100]"
+          [showCurrentPageReport]="true"
+          [currentPageReportTemplate]="paginationTemplate()"
+          styleClass="p-datatable-sm"
+        >
+          <ng-template #header>
+            <tr>
+              <th style="width: 30%">{{ 'localization.translation.key' | translate }}</th>
+              <th style="width: 25%">{{ 'localization.translation.default.message' | translate }}</th>
+              <th style="width: 35%">{{ 'localization.translation.value' | translate }}</th>
+              <th style="width: 10%">{{ 'localization.translation.verified' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-row>
+            <tr [class.bg-yellow-50]="row.isDirty">
+              <td>
+                <div class="font-medium text-sm">{{ row.translationKey.key }}</div>
+                @if (row.translationKey.description) {
+                  <small class="text-muted-color">{{ row.translationKey.description }}</small>
+                }
+                @if (row.translationKey.variables?.length) {
+                  <div class="mt-1">
+                    @for (v of row.translationKey.variables; track v) {
+                      <span class="text-xs bg-surface-100 px-2 py-1 rounded mr-1">{{ formatVariable(v) }}</span>
+                    }
+                  </div>
+                }
+              </td>
+              <td>
+                <span class="text-sm">{{ row.translationKey.defaultMessage }}</span>
+              </td>
+              <td>
+                <textarea
+                  pInputTextarea
+                  [(ngModel)]="row.editValue"
+                  [ngModelOptions]="{standalone: true}"
+                  [rows]="2"
+                  class="w-full"
+                  [placeholder]="row.translationKey.defaultMessage"
+                  (input)="onValueChange(row)"
+                ></textarea>
+              </td>
+              <td class="text-center">
+                <p-checkbox
+                  [(ngModel)]="row.isVerified"
+                  [ngModelOptions]="{standalone: true}"
+                  [binary]="true"
+                  (onChange)="onVerifiedChange(row)"
+                />
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="4" class="text-center py-4 text-muted-color">
+                {{ 'shared.no.results' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      }
+
+      <div class="flex justify-between items-center mt-4">
+        <div class="text-muted-color">
+          @if (hasChanges()) {
+            <span class="text-orange-500">
+              <i class="pi pi-exclamation-circle mr-1"></i>
+              {{ 'localization.translation.unsaved.changes' | translate: { count: changedCount() } }}
+            </span>
+          }
+        </div>
+        <p-button
+          [label]="'shared.save' | translate"
+          icon="pi pi-save"
+          [disabled]="!hasChanges()"
+          [loading]="isSaving()"
+          (onClick)="saveChanges()"
+        />
+      </div>
+    </div>
+
+    <p-toast />
+  `,
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TranslationListPage, { className: "TranslationListPage", filePath: "pages/translation-list/translation-list.page.ts", lineNumber: 193 }); })();
+
+var translationList_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TranslationListPage: TranslationListPage
+});
+
+// Interfaces
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LOCALIZATION_CONFIG, LOCALIZATION_MESSAGES, LOCALIZATION_ROUTES, LanguageApiService, LanguageFormPage, LanguageListPage, LanguageSelectorComponent, LocalizationApiService, LocalizationContainerPage, LocalizationInitializerService, LocalizationStateService, STORAGE_KEYS, TranslateService, TranslationApiService, TranslationKeyApiService, TranslationKeyFormPage, TranslationKeyListPage, TranslationListPage, TranslationLoaderService, getLocalizationConfig, provideLocalization };
+//# sourceMappingURL=flusys-ng-localization.mjs.map