@flusys/ng-localization 5.0.1 → 5.0.4

package/fesm2022/flusys-ng-localization.mjs

@@ -1,34 +1,34 @@
 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 { InjectionToken, Injectable, inject, PLATFORM_ID, ApplicationRef, signal, computed, effect, DestroyRef, ElementRef, Component, APP_INITIALIZER } from '@angular/core';
+import { ApiResourceService, TranslateService, AngularModule, PrimeModule, TranslatePipe, LANGUAGE_PERMISSIONS, HasPermissionDirective, PermissionValidatorService, TRANSLATION_KEY_PERMISSIONS, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
 import { HttpClient } from '@angular/common/http';
-import { APP_CONFIG, TRANSLATE_ADAPTER } from '@flusys/ng-core';
+import { APP_CONFIG, LOCALIZATION_STATE_SERVICE, LOCALIZATION_API_SERVICE } from '@flusys/ng-core';
 import { firstValueFrom, from, fromEvent, finalize, forkJoin } from 'rxjs';
-import { ApiResourceService, resolveTranslationModule, SHARED_MESSAGES, PermissionValidatorService, LANGUAGE_PERMISSIONS, TRANSLATION_KEY_PERMISSIONS, TranslatePipe, AngularModule, PrimeModule, HasPermissionDirective } from '@flusys/ng-shared';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { PrimeNG } from 'primeng/config';
 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 { 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 i3 from 'primeng/table';
-import * as i4 from 'primeng/tag';
-import * as i5 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$1 from 'primeng/card';
-import * as i4$1 from 'primeng/inputtext';
-import * as i5$1 from 'primeng/select';
-import * as i4$2 from 'primeng/iconfield';
-import * as i5$2 from 'primeng/inputicon';
+import { Router, ActivatedRoute, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { MessageService, ConfirmationService } from 'primeng/api';
+import * as i2 from 'primeng/button';
+import * as i3 from 'primeng/card';
+import * as i4 from 'primeng/inputtext';
+import * as i5 from 'primeng/select';
+import * as i6 from 'primeng/toast';
+import * as i2$1 from 'primeng/confirmdialog';
+import * as i3$1 from 'primeng/table';
+import * as i4$1 from 'primeng/tag';
+import * as i6$1 from 'primeng/tooltip';
 import * as i7 from 'primeng/textarea';
 import * as i9 from 'primeng/progressspinner';
+import * as i4$2 from 'primeng/iconfield';
+import * as i5$1 from 'primeng/inputicon';
 
 const LOCALIZATION_CONFIG = new InjectionToken('LOCALIZATION_CONFIG');
 /** Get localization config with sensible defaults applied */
@@ -155,6 +155,41 @@ const LOCALIZATION_MESSAGES = {
     'localization.validation.default.message.required': 'Default message is required',
 };
 
+class LanguageApiService extends ApiResourceService {
+    constructor() {
+        super('language', 'localization');
+    }
+    setDefault(id) {
+        return this.http.post(`${this.baseUrl}/set-default`, { id });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class LocalizationApiService {
+    http = inject(HttpClient);
+    appConfig = inject(APP_CONFIG);
+    get baseUrl() {
+        return `${this.appConfig.apiBaseUrl}/localization`;
+    }
+    getActiveLanguages() {
+        return this.http.post(`${this.baseUrl}/language/get-active`, {});
+    }
+    getTranslationsByLanguage(languageCode, modules) {
+        return this.http.post(`${this.baseUrl}/translation/get-by-language`, { languageCode, ...(modules?.length ? { modules } : {}) });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class LocalizationStateService {
     platformId = inject(PLATFORM_ID);
     document = inject(DOCUMENT);
@@ -202,14 +237,50 @@ class LocalizationStateService {
     }
     PRIMENG_NUMERIC_KEYS = new Set(['firstDayOfWeek']);
     PRIMENG_ARRAY_DEFAULTS = {
-        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNames: [
+            'Sunday',
+            'Monday',
+            'Tuesday',
+            'Wednesday',
+            'Thursday',
+            'Friday',
+            'Saturday',
+        ],
         dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
         dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        monthNames: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ],
+        monthNamesShort: [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec',
+        ],
     };
     syncPrimeNGTranslations(translations, fallbacks) {
-        const primeNGTranslations = { ...this.PRIMENG_ARRAY_DEFAULTS };
+        const primeNGTranslations = {
+            ...this.PRIMENG_ARRAY_DEFAULTS,
+        };
         const ariaTranslations = {};
         const prefix = 'primeng.';
         const ariaPrefix = 'primeng.aria.';
@@ -221,7 +292,9 @@ class LocalizationStateService {
             }
             else if (key.startsWith(prefix)) {
                 const primeKey = this.dotToCamel(key.substring(prefix.length));
-                primeNGTranslations[primeKey] = this.PRIMENG_NUMERIC_KEYS.has(primeKey) ? parseInt(value, 10) : value;
+                primeNGTranslations[primeKey] = this.PRIMENG_NUMERIC_KEYS.has(primeKey)
+                    ? parseInt(value, 10)
+                    : value;
             }
         }
         if (Object.keys(ariaTranslations).length > 0) {
@@ -279,26 +352,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class LocalizationApiService {
-    http = inject(HttpClient);
-    appConfig = inject(APP_CONFIG);
-    get baseUrl() {
-        return `${this.appConfig.apiBaseUrl}/localization`;
-    }
-    getActiveLanguages() {
-        return this.http.post(`${this.baseUrl}/language/get-active`, {});
-    }
-    getTranslationsByLanguage(languageCode, modules) {
-        return this.http.post(`${this.baseUrl}/translation/get-by-language`, { languageCode, ...(modules?.length ? { modules } : {}) });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationApiService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 class LocalizationInitializerService {
     config = inject(LOCALIZATION_CONFIG, { optional: true });
     apiService = inject(LocalizationApiService);
@@ -342,49 +395,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-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);
+class TranslationApiService extends ApiResourceService {
+    constructor() {
+        super('translation', 'localization');
+    }
+    getByLanguageId(languageId) {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 10000 },
+            filter: { languageId },
+            sort: {},
+        });
     }
-    translateSignal(key, params) {
-        return computed(() => {
-            this.localizationState.currentLanguage();
-            return this.translate(key, params);
+    getByModuleAndLanguageId(module, languageId) {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 10000 },
+            filter: { languageId, module },
+            sort: {},
         });
     }
-    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;
+    getByKeyId(translationKeyId) {
+        return this.http.post(`${this.baseUrl}/get-all`, {
+            pagination: { currentPage: 0, pageSize: 1000 },
+            filter: { translationKeyId },
+            sort: {},
         });
     }
-    getFromFallback(key, params) {
-        const fallbacks = this.localizationState.fallbackMessages();
-        const value = fallbacks[key] ?? key;
-        return this.interpolate(value, params);
+    getCounts() {
+        return this.http.post(`${this.baseUrl}/get-counts`, {});
+    }
+    bulkUpdate(translations) {
+        return this.http.post(`${this.baseUrl}/update-many-values`, { translations });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TranslationKeyApiService extends ApiResourceService {
+    constructor() {
+        super('translation-key', 'localization');
+    }
+    getModules() {
+        return this.http.post(`${this.baseUrl}/get-modules`, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class TranslationLoaderService {
     DEFAULT_INITIAL_MODULES = ['shared', 'layout'];
@@ -457,75 +520,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-class LanguageApiService extends ApiResourceService {
-    constructor() {
-        super('language', inject(HttpClient), 'localization');
-    }
-    setDefault(id) {
-        return this.http.post(`${this.baseUrl}/set-default`, { id });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageApiService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-class TranslationKeyApiService extends ApiResourceService {
-    constructor() {
-        super('translation-key', inject(HttpClient), 'localization');
-    }
-    getModules() {
-        return this.http.post(`${this.baseUrl}/get-modules`, {});
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyApiService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-class TranslationApiService extends ApiResourceService {
-    constructor() {
-        super('translation', inject(HttpClient), 'localization');
-    }
-    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: {},
-        });
-    }
-    getByKeyId(translationKeyId) {
-        return this.http.post(`${this.baseUrl}/get-all`, {
-            pagination: { currentPage: 0, pageSize: 1000 },
-            filter: { translationKeyId },
-            sort: {},
-        });
-    }
-    getCounts() {
-        return this.http.post(`${this.baseUrl}/get-counts`, {});
-    }
-    bulkUpdate(translations) {
-        return this.http.post(`${this.baseUrl}/update-many-values`, { translations });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationApiService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationApiService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
 class LanguageSelectorComponent {
     localizationState = inject(LocalizationStateService);
     translationLoader = inject(TranslationLoaderService);
@@ -726,8 +720,11 @@ function provideLocalization(config) {
         LocalizationStateService,
         LocalizationApiService,
         LocalizationInitializerService,
-        TranslateService,
-        { provide: TRANSLATE_ADAPTER, useExisting: TranslateService },
+        {
+            provide: LOCALIZATION_STATE_SERVICE,
+            useExisting: LocalizationStateService,
+        },
+        { provide: LOCALIZATION_API_SERVICE, useExisting: LocalizationApiService },
         {
             provide: APP_INITIALIZER,
             useFactory: (initializer) => () => initializer.initialize(),
@@ -736,358 +733,525 @@ function provideLocalization(config) {
         },
     ];
     if (config.enableLayoutSelector) {
-        providers.push({ provide: LAYOUT_LANGUAGE_SELECTOR, useValue: LanguageSelectorComponent }, { provide: LAYOUT_LANGUAGE_SELECTOR_PANEL, useValue: LanguageSelectorPanelComponent });
+        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: '',
-                redirectTo: 'languages',
-                pathMatch: 'full',
-            },
-        ],
-    },
-];
-
-class LocalizationContainerPage {
-    permissionValidator = inject(PermissionValidatorService);
-    allTabs = [
+class LanguageFormPage {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    languageService = inject(LanguageApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    destroyRef = inject(DestroyRef);
+    routeParams = toSignal(this.route.paramMap);
+    loadTriggered = false;
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    existingLanguage = signal(null, ...(ngDevMode ? [{ debugName: "existingLanguage" }] : []));
+    isEditMode = computed(() => !!this.existingLanguage(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    directionOptions = computed(() => [
         {
-            id: 'languages',
-            labelKey: 'localization.tabs.languages',
-            icon: 'pi pi-globe',
-            route: 'languages',
-            permission: LANGUAGE_PERMISSIONS.READ,
+            label: this.translate('localization.language.direction.ltr'),
+            value: 'ltr',
         },
         {
-            id: 'keys',
-            labelKey: 'localization.tabs.keys',
-            icon: 'pi pi-key',
-            route: 'keys',
-            permission: TRANSLATION_KEY_PERMISSIONS.READ,
+            label: this.translate('localization.language.direction.rtl'),
+            value: 'rtl',
         },
-    ];
-    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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationContainerPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LocalizationContainerPage, isStandalone: true, selector: "lib-localization-container", ngImport: i0, template: `
-    <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>
-  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationContainerPage, decorators: [{
-            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"] }]
-        }] });
-
-var localizationContainer_page = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    LocalizationContainerPage: LocalizationContainerPage
-});
-
-class LanguageListPage {
-    LANGUAGE_PERMISSIONS = LANGUAGE_PERMISSIONS;
-    router = inject(Router);
-    languageService = inject(LanguageApiService);
-    confirmationService = inject(ConfirmationService);
-    messageService = inject(MessageService);
-    translateService = inject(TranslateService);
-    destroyRef = inject(DestroyRef);
-    ngOnInit() {
-        this.languageService.fetchList('', {
-            pagination: { currentPage: 0, pageSize: 100 },
-            filter: {},
-            sort: { serial: 'ASC', name: 'ASC' },
+    ], ...(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);
+            }
         });
     }
-    onCreate() {
-        this.router.navigate(['/localization/languages/new']);
-    }
-    onEdit(id) {
-        this.router.navigate(['/localization/languages', id]);
+    updateDirection(value) {
+        this.formModel.update((m) => ({ ...m, direction: value }));
     }
-    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: response.messageKey
-                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
-                                    : (response.message ?? ''),
-                            });
-                            this.languageService.reload();
-                        }
-                    },
-                });
+    loadLanguage(id) {
+        this.isSaving.set(true);
+        from(this.languageService.findById(id))
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false)))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.existingLanguage.set(response.data);
+                    this.formModel.set(this.toFormModel(response.data));
+                }
             },
+            error: () => this.router.navigate(['/localization/languages']),
         });
     }
-    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: () => {
-                from(this.languageService.delete({ id: lang.id, type: 'delete' }))
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe({
-                    next: (response) => {
-                        if (response.success) {
-                            this.messageService.add({
-                                severity: 'success',
-                                summary: this.translateService.translate('shared.success'),
-                                detail: response.messageKey
-                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
-                                    : (response.message ?? ''),
-                            });
-                            this.languageService.reload();
-                        }
-                    },
-                });
+    toFormModel(language) {
+        return {
+            code: language.code,
+            name: language.name,
+            nativeName: language.nativeName ?? '',
+            direction: language.direction ?? 'ltr',
+            serial: language.serial?.toString() ?? '',
+            isActive: language.isActive,
+            isDefault: language.isDefault,
+        };
+    }
+    onSubmit() {
+        if (!this.isFormValid())
+            return;
+        this.isSaving.set(true);
+        const model = this.formModel();
+        const dto = {
+            code: model.code,
+            name: model.name,
+            nativeName: model.nativeName || undefined,
+            direction: model.direction,
+            serial: model.serial ? parseInt(model.serial, 10) : undefined,
+            isActive: model.isActive,
+            isDefault: model.isDefault,
+        };
+        const operation$ = this.isEditMode()
+            ? from(this.languageService.update({
+                id: this.existingLanguage().id,
+                ...dto,
+            }))
+            : from(this.languageService.insert(dto));
+        operation$
+            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false)))
+            .subscribe({
+            next: (response) => {
+                if (response.success) {
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: this.translate('shared.success'),
+                        detail: response.messageKey
+                            ? this.translate(response.messageKey, response.messageVariables)
+                            : (response.message ?? ''),
+                    });
+                    this.router.navigate(['/localization/languages']);
+                }
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LanguageListPage, isStandalone: true, selector: "lib-language-list-page", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
-    <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>
+    onCancel() {
+        this.router.navigate(['/localization/languages']);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: LanguageFormPage, isStandalone: true, selector: "lib-language-form-page", providers: [MessageService], ngImport: i0, template: `
+    <p-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('localization.language.edit' | translate)
+                : ('localization.language.new' | translate)
+            }}
+          </h2>
         </div>
-        <p-button
-          *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
-          [label]="'localization.language.new' | translate"
-          icon="pi pi-plus"
-          (onClick)="onCreate()"
-          styleClass="w-full sm:w-auto"
-        />
-      </div>
+      </ng-template>
 
-      <div class="overflow-x-auto -mx-4 sm:mx-0">
-        <p-table
-          [value]="languageService.data()"
-          [loading]="languageService.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>
+      <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>
 
-          <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>
+        <!-- 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>
 
-          <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>
+        <!-- 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-confirmDialog />
     <p-toast />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i5.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageListPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageFormPage, decorators: [{
             type: Component,
             args: [{
-                    selector: 'lib-language-list-page',
-                    imports: [AngularModule, PrimeModule, HasPermissionDirective, TranslatePipe],
-                    providers: [ConfirmationService, MessageService],
+                    selector: 'lib-language-form-page',
+                    imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
+                    providers: [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>
+    <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.new' | translate)
+            }}
+          </h2>
         </div>
-        <p-button
-          *hasPermission="LANGUAGE_PERMISSIONS.CREATE"
-          [label]="'localization.language.new' | translate"
-          icon="pi pi-plus"
-          (onClick)="onCreate()"
+      </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 />
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+var languageForm_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LanguageFormPage: LanguageFormPage
+});
+
+class LanguageListPage {
+    LANGUAGE_PERMISSIONS = LANGUAGE_PERMISSIONS;
+    router = inject(Router);
+    languageService = inject(LanguageApiService);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        this.languageService.fetchList('', {
+            pagination: { currentPage: 0, pageSize: 100 },
+            filter: {},
+            sort: { serial: 'ASC', name: 'ASC' },
+        });
+    }
+    onCreate() {
+        this.router.navigate(['/localization/languages/new']);
+    }
+    onEdit(id) {
+        this.router.navigate(['/localization/languages', id]);
+    }
+    onSetDefault(lang) {
+        this.confirmationService.confirm({
+            message: this.translateService.translate('localization.language.confirm.set.default', { name: lang.name }),
+            header: this.translateService.translate('localization.language.set.default'),
+            icon: '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: response.messageKey
+                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
+                                    : (response.message ?? ''),
+                            });
+                            this.languageService.reload();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    onDelete(lang) {
+        this.confirmationService.confirm({
+            message: this.translateService.translate('shared.confirm.delete'),
+            header: this.translateService.translate('localization.language.delete.title'),
+            icon: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                from(this.languageService.delete({ id: lang.id, type: 'delete' }))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.messageService.add({
+                                severity: 'success',
+                                summary: this.translateService.translate('shared.success'),
+                                detail: response.messageKey
+                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
+                                    : (response.message ?? ''),
+                            });
+                            this.languageService.reload();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LanguageListPage, isStandalone: true, selector: "lib-language-list-page", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
+    <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.new' | translate"
+          icon="pi pi-plus"
+          (onClick)="onCreate()"
           styleClass="w-full sm:w-auto"
         />
       </div>
@@ -1196,854 +1360,270 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
     <p-confirmDialog />
     <p-toast />
-  `,
-                }]
-        }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageListPage, decorators: [{
+            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.new' | translate"
+          icon="pi pi-plus"
+          (onClick)="onCreate()"
+          styleClass="w-full sm:w-auto"
+        />
+      </div>
 
-var languageList_page = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    LanguageListPage: LanguageListPage
-});
-
-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, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    directionOptions = computed(() => [
-        {
-            label: this.translate('localization.language.direction.ltr'),
-            value: 'ltr',
-        },
-        {
-            label: this.translate('localization.language.direction.rtl'),
-            value: 'rtl',
-        },
-    ], ...(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);
-        from(this.languageService.findById(id))
-            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false)))
-            .subscribe({
-            next: (response) => {
-                if (response.success && response.data) {
-                    this.existingLanguage.set(response.data);
-                    this.formModel.set(this.toFormModel(response.data));
-                }
-            },
-            error: () => this.router.navigate(['/localization/languages']),
-        });
-    }
-    toFormModel(language) {
-        return {
-            code: language.code,
-            name: language.name,
-            nativeName: language.nativeName ?? '',
-            direction: language.direction ?? 'ltr',
-            serial: language.serial?.toString() ?? '',
-            isActive: language.isActive,
-            isDefault: language.isDefault,
-        };
-    }
-    onSubmit() {
-        if (!this.isFormValid())
-            return;
-        this.isSaving.set(true);
-        const model = this.formModel();
-        const dto = {
-            code: model.code,
-            name: model.name,
-            nativeName: model.nativeName || undefined,
-            direction: model.direction,
-            serial: model.serial ? parseInt(model.serial, 10) : undefined,
-            isActive: model.isActive,
-            isDefault: model.isDefault,
-        };
-        const operation$ = this.isEditMode()
-            ? from(this.languageService.update({
-                id: this.existingLanguage().id,
-                ...dto,
-            }))
-            : from(this.languageService.insert(dto));
-        operation$
-            .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false)))
-            .subscribe({
-            next: (response) => {
-                if (response.success) {
-                    this.messageService.add({
-                        severity: 'success',
-                        summary: this.translate('shared.success'),
-                        detail: response.messageKey
-                            ? this.translate(response.messageKey, response.messageVariables)
-                            : (response.message ?? ''),
-                    });
-                    this.router.navigate(['/localization/languages']);
-                }
-            },
-        });
-    }
-    onCancel() {
-        this.router.navigate(['/localization/languages']);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: LanguageFormPage, isStandalone: true, selector: "lib-language-form-page", providers: [MessageService], ngImport: i0, template: `
-    <p-card>
-      <ng-template #header>
-        <div class="flex justify-between items-center p-4">
-          <h2 class="text-xl font-semibold m-0">
-            {{
-              isEditMode()
-                ? ('localization.language.edit' | translate)
-                : ('localization.language.new' | translate)
-            }}
-          </h2>
-        </div>
-      </ng-template>
-
-      <form
-        (ngSubmit)="onSubmit()"
-        class="grid grid-cols-1 md:grid-cols-2 gap-4"
-      >
-        <!-- Language Code -->
-        <div class="flex flex-col gap-2">
-          <label for="code" class="font-medium"
-            >{{ 'localization.language.code' | translate }} *</label
-          >
-          <input
-            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 />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageFormPage, decorators: [{
-            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.new' | translate)
-            }}
-          </h2>
-        </div>
-      </ng-template>
-
-      <form
-        (ngSubmit)="onSubmit()"
-        class="grid grid-cols-1 md:grid-cols-2 gap-4"
-      >
-        <!-- Language Code -->
-        <div class="flex flex-col gap-2">
-          <label for="code" class="font-medium"
-            >{{ 'localization.language.code' | translate }} *</label
-          >
-          <input
-            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 />
-  `,
-                }]
-        }], ctorParameters: () => [] });
-
-var languageForm_page = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    LanguageFormPage: LanguageFormPage
-});
-
-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.translate('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: from(this.languageService.getAll({
-                pagination: { currentPage: 0, pageSize: 100 },
-                filter: {},
-                sort: { serial: 'ASC', name: 'ASC' },
-            })),
-            modules: this.translationKeyService.getModules(),
-            keys: from(this.translationKeyService.getAll({
-                pagination: { currentPage: 0, pageSize: 1000 },
-                filter: {},
-                sort: { module: 'ASC', key: 'ASC' },
-            })),
-        })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: ({ languages, modules, keys }) => {
-                if (languages.success && languages.data) {
-                    this.languages.set(languages.data.filter((l) => l.isActive));
-                }
-                if (modules.success && modules.data) {
-                    this.modules.set(modules.data);
-                }
-                if (keys.success && keys.data) {
-                    this.translationKeys.set(keys.data);
-                    this.loadTranslationCounts();
-                }
-                this.isLoading.set(false);
-            },
-            error: () => {
-                this.isLoading.set(false);
-            },
-        });
-    }
-    loadTranslationCounts() {
-        this.translationService
-            .getCounts()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (response) => {
-                if (response.success && response.data) {
-                    this.translationCounts.set(new Map(Object.entries(response.data)));
-                }
-            },
-        });
-    }
-    getTranslationCount(keyId) {
-        return this.translationCounts().get(keyId) ?? 0;
-    }
-    onModuleChange(value) {
-        this.selectedModule.set(value);
-    }
-    onCreate() {
-        this.router.navigate(['/localization/keys/new']);
-    }
-    onEdit(key) {
-        this.router.navigate(['/localization/keys', key.id]);
-    }
-    onDelete(key) {
-        this.confirmationService.confirm({
-            message: this.translateService.translate('shared.confirm.delete'),
-            header: this.translateService.translate('localization.key.delete.title'),
-            icon: 'pi pi-exclamation-triangle',
-            acceptButtonStyleClass: 'p-button-danger',
-            accept: () => {
-                from(this.translationKeyService.delete({ id: key.id, type: 'delete' }))
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe({
-                    next: (response) => {
-                        if (response.success) {
-                            this.messageService.add({
-                                severity: 'success',
-                                summary: this.translateService.translate('shared.success'),
-                                detail: response.messageKey
-                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
-                                    : (response.message ?? ''),
-                            });
-                            this.loadData();
-                        }
-                    },
-                });
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TranslationKeyListPage, isStandalone: true, selector: "lib-translation-key-list-page", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
-    <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.new' | translate"
-            icon="pi pi-plus"
-            (onClick)="onCreate()"
-          />
-        </div>
-      </div>
-
-      <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>
+      <div class="overflow-x-auto -mx-4 sm:mx-0">
+        <p-table
+          [value]="languageService.data()"
+          [loading]="languageService.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>
 
-      <!-- Table -->
-      <p-table
-        [value]="filteredKeys()"
-        [loading]="isLoading()"
-        [paginator]="true"
-        [rows]="15"
-        [rowsPerPageOptions]="[10, 15, 25, 50]"
-        class="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>
-          @let translationCount = getTranslationCount(key.id);
-          @let languageCount = languages().length;
-          <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]="translationCount === languageCount"
-                [class.text-orange-500]="translationCount < languageCount && translationCount > 0"
-                [class.text-muted-color]="translationCount === 0"
-              >
-                {{ translationCount }}/{{ languageCount }}
-              </span>
-            </td>
-            <td>
-              <div class="flex gap-1">
-                <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)"
+          <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'"
                 />
-              </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>
+              </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 />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$2.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i5.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyListPage, decorators: [{
-            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.new' | translate"
-            icon="pi pi-plus"
-            (onClick)="onCreate()"
-          />
-        </div>
+  `,
+                }]
+        }] });
+
+var languageList_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LanguageListPage: LanguageListPage
+});
+
+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,
+        },
+    ];
+    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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationContainerPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LocalizationContainerPage, isStandalone: true, selector: "lib-localization-container", ngImport: i0, template: `
+    <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="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 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>
 
-      <!-- Table -->
-      <p-table
-        [value]="filteredKeys()"
-        [loading]="isLoading()"
-        [paginator]="true"
-        [rows]="15"
-        [rowsPerPageOptions]="[10, 15, 25, 50]"
-        class="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>
-          @let translationCount = getTranslationCount(key.id);
-          @let languageCount = languages().length;
-          <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]="translationCount === languageCount"
-                [class.text-orange-500]="translationCount < languageCount && translationCount > 0"
-                [class.text-muted-color]="translationCount === 0"
-              >
-                {{ translationCount }}/{{ languageCount }}
-              </span>
-            </td>
-            <td>
-              <div class="flex gap-1">
-                <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>
+      <router-outlet />
     </div>
+  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationContainerPage, decorators: [{
+            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>
 
-    <p-confirmDialog />
-    <p-toast />
-  `,
-                }]
+      <router-outlet />
+    </div>
+  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
         }] });
 
-var translationKeyList_page = /*#__PURE__*/Object.freeze({
+var localizationContainer_page = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    TranslationKeyListPage: TranslationKeyListPage
+    LocalizationContainerPage: LocalizationContainerPage
 });
 
+const LOCALIZATION_ROUTES = [
+    {
+        path: '',
+        resolve: { translations: resolveTranslationModule({ modules: ['localization'], fallbackMessages: { ...LOCALIZATION_MESSAGES, ...SHARED_MESSAGES } }) },
+        loadComponent: () => Promise.resolve().then(function () { return localizationContainer_page; }).then((m) => m.LocalizationContainerPage),
+        children: [
+            {
+                path: 'languages',
+                loadComponent: () => Promise.resolve().then(function () { return languageList_page; }).then((m) => m.LanguageListPage),
+            },
+            {
+                path: 'languages/new',
+                loadComponent: () => Promise.resolve().then(function () { return languageForm_page; }).then((m) => m.LanguageFormPage),
+            },
+            {
+                path: 'languages/:id',
+                loadComponent: () => Promise.resolve().then(function () { return languageForm_page; }).then((m) => m.LanguageFormPage),
+            },
+            {
+                path: 'keys',
+                loadComponent: () => Promise.resolve().then(function () { return translationKeyList_page; }).then((m) => m.TranslationKeyListPage),
+            },
+            {
+                path: 'keys/new',
+                loadComponent: () => Promise.resolve().then(function () { return translationKeyForm_page; }).then((m) => m.TranslationKeyFormPage),
+            },
+            {
+                path: 'keys/:id',
+                loadComponent: () => Promise.resolve().then(function () { return translationKeyForm_page; }).then((m) => m.TranslationKeyFormPage),
+            },
+            {
+                path: '',
+                redirectTo: 'languages',
+                pathMatch: 'full',
+            },
+        ],
+    },
+];
+
 class TranslationKeyFormPage {
     router = inject(Router);
     route = inject(ActivatedRoute);
@@ -2051,7 +1631,7 @@ class TranslationKeyFormPage {
     translationKeyService = inject(TranslationKeyApiService);
     translationService = inject(TranslationApiService);
     messageService = inject(MessageService);
-    translateAdapter = inject(TRANSLATE_ADAPTER, {
+    translateAdapter = inject(TranslateService, {
         optional: true,
     });
     destroyRef = inject(DestroyRef);
@@ -2474,7 +2054,7 @@ class TranslationKeyFormPage {
     </p-card>
 
     <p-toast />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: i5.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyFormPage, decorators: [{
             type: Component,
@@ -2635,36 +2215,463 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           }
         </div>
 
-        <!-- Actions -->
-        <div class="flex justify-end gap-4 pt-4">
+        <!-- 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 />
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+var translationKeyForm_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TranslationKeyFormPage: TranslationKeyFormPage
+});
+
+class TranslationKeyListPage {
+    TRANSLATION_KEY_PERMISSIONS = TRANSLATION_KEY_PERMISSIONS;
+    router = inject(Router);
+    languageService = inject(LanguageApiService);
+    translationKeyService = inject(TranslationKeyApiService);
+    translationService = inject(TranslationApiService);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateService = inject(TranslateService);
+    destroyRef = inject(DestroyRef);
+    isLoading = signal(false, ...(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.translate('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: from(this.languageService.getAll({
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: {},
+                sort: { serial: 'ASC', name: 'ASC' },
+            })),
+            modules: this.translationKeyService.getModules(),
+            keys: from(this.translationKeyService.getAll({
+                pagination: { currentPage: 0, pageSize: 1000 },
+                filter: {},
+                sort: { module: 'ASC', key: 'ASC' },
+            })),
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: ({ languages, modules, keys }) => {
+                if (languages.success && languages.data) {
+                    this.languages.set(languages.data.filter((l) => l.isActive));
+                }
+                if (modules.success && modules.data) {
+                    this.modules.set(modules.data);
+                }
+                if (keys.success && keys.data) {
+                    this.translationKeys.set(keys.data);
+                    this.loadTranslationCounts();
+                }
+                this.isLoading.set(false);
+            },
+            error: () => {
+                this.isLoading.set(false);
+            },
+        });
+    }
+    loadTranslationCounts() {
+        this.translationService
+            .getCounts()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    this.translationCounts.set(new Map(Object.entries(response.data)));
+                }
+            },
+        });
+    }
+    getTranslationCount(keyId) {
+        return this.translationCounts().get(keyId) ?? 0;
+    }
+    onModuleChange(value) {
+        this.selectedModule.set(value);
+    }
+    onCreate() {
+        this.router.navigate(['/localization/keys/new']);
+    }
+    onEdit(key) {
+        this.router.navigate(['/localization/keys', key.id]);
+    }
+    onDelete(key) {
+        this.confirmationService.confirm({
+            message: this.translateService.translate('shared.confirm.delete'),
+            header: this.translateService.translate('localization.key.delete.title'),
+            icon: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                from(this.translationKeyService.delete({ id: key.id, type: 'delete' }))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.messageService.add({
+                                severity: 'success',
+                                summary: this.translateService.translate('shared.success'),
+                                detail: response.messageKey
+                                    ? this.translateService.translate(response.messageKey, response.messageVariables)
+                                    : (response.message ?? ''),
+                            });
+                            this.loadData();
+                        }
+                    },
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TranslationKeyListPage, isStandalone: true, selector: "lib-translation-key-list-page", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
+    <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.new' | translate"
+            icon="pi pi-plus"
+            (onClick)="onCreate()"
+          />
+        </div>
+      </div>
+
+      <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]"
+        class="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>
+          @let translationCount = getTranslationCount(key.id);
+          @let languageCount = languages().length;
+          <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]="translationCount === languageCount"
+                [class.text-orange-500]="
+                  translationCount < languageCount && translationCount > 0
+                "
+                [class.text-muted-color]="translationCount === 0"
+              >
+                {{ translationCount }}/{{ languageCount }}
+              </span>
+            </td>
+            <td>
+              <div class="flex gap-1">
+                <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 />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyListPage, decorators: [{
+            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
-            [label]="'shared.cancel' | translate"
-            severity="secondary"
-            [outlined]="true"
-            (onClick)="onCancel()"
+            *hasPermission="TRANSLATION_KEY_PERMISSIONS.CREATE"
+            [label]="'localization.key.new' | translate"
+            icon="pi pi-plus"
+            (onClick)="onCreate()"
           />
-          <p-button
-            [label]="
-              isEditMode()
-                ? ('shared.update' | translate)
-                : ('shared.create' | translate)
-            "
-            type="submit"
-            [loading]="isSaving()"
-            [disabled]="!isFormValid() || isSaving()"
+        </div>
+      </div>
+
+      <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>
-      </form>
-    </p-card>
+        <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]"
+        class="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>
+          @let translationCount = getTranslationCount(key.id);
+          @let languageCount = languages().length;
+          <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]="translationCount === languageCount"
+                [class.text-orange-500]="
+                  translationCount < languageCount && translationCount > 0
+                "
+                [class.text-muted-color]="translationCount === 0"
+              >
+                {{ translationCount }}/{{ languageCount }}
+              </span>
+            </td>
+            <td>
+              <div class="flex gap-1">
+                <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 />
   `,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-var translationKeyForm_page = /*#__PURE__*/Object.freeze({
+var translationKeyList_page = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    TranslationKeyFormPage: TranslationKeyFormPage
+    TranslationKeyListPage: TranslationKeyListPage
 });
 
 // Interfaces
@@ -2673,5 +2680,5 @@ var translationKeyForm_page = /*#__PURE__*/Object.freeze({
  * 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, TranslationLoaderService, getLocalizationConfig, provideLocalization };
+export { LOCALIZATION_CONFIG, LOCALIZATION_MESSAGES, LOCALIZATION_ROUTES, LanguageApiService, LanguageFormPage, LanguageListPage, LanguageSelectorComponent, LocalizationApiService, LocalizationContainerPage, LocalizationInitializerService, LocalizationStateService, STORAGE_KEYS, TranslationApiService, TranslationKeyApiService, TranslationKeyFormPage, TranslationKeyListPage, TranslationLoaderService, getLocalizationConfig, provideLocalization };
 //# sourceMappingURL=flusys-ng-localization.mjs.map