@flusys/ng-localization 4.1.0 → 4.1.1

package/fesm2022/flusys-ng-localization.mjs

@@ -320,13 +320,13 @@ class LocalizationStateService {
     hasModuleFallbacks(module) {
         return this._moduleFallbacks.has(module);
     }
-    static ɵfac = function LocalizationStateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationStateService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LocalizationStateService, factory: LocalizationStateService.ɵfac, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationStateService, providedIn: 'root' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationStateService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], () => [], null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 class LocalizationApiService {
     http = inject(HttpClient);
@@ -340,13 +340,13 @@ class LocalizationApiService {
     getTranslationsByLanguage(languageCode, modules) {
         return this.http.post(`${this.baseUrl}/translation/get-by-language`, { languageCode, ...(modules?.length ? { modules } : {}) });
     }
-    static ɵfac = function LocalizationApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationApiService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LocalizationApiService, factory: LocalizationApiService.ɵfac, providedIn: 'root' });
+    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' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationApiService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+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 });
@@ -383,13 +383,13 @@ class LocalizationInitializerService {
             this.stateService.setInitialized(true);
         }
     }
-    static ɵfac = function LocalizationInitializerService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationInitializerService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LocalizationInitializerService, factory: LocalizationInitializerService.ɵfac, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationInitializerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationInitializerService, providedIn: 'root' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationInitializerService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalizationInitializerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class TranslateService {
     localizationState = inject(LocalizationStateService);
@@ -428,13 +428,13 @@ class TranslateService {
         const value = fallbacks[key] ?? key;
         return this.interpolate(value, params);
     }
-    static ɵfac = function TranslateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslateService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslateService, factory: TranslateService.ɵfac, providedIn: 'root' });
+    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' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslateService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class TranslationLoaderService {
     DEFAULT_INITIAL_MODULES = ['shared', 'layout'];
@@ -499,13 +499,13 @@ class TranslationLoaderService {
     loadTranslationsAsync(languageCode, clearModules = false) {
         return from(this.loadTranslations(languageCode, clearModules));
     }
-    static ɵfac = function TranslationLoaderService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationLoaderService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslationLoaderService, factory: TranslationLoaderService.ɵfac, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationLoaderService, providedIn: 'root' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationLoaderService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class LanguageApiService {
     http = inject(HttpClient);
@@ -535,13 +535,13 @@ class LanguageApiService {
     setDefault(id) {
         return this.http.post(`${this.baseUrl}/set-default`, { id });
     }
-    static ɵfac = function LanguageApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageApiService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LanguageApiService, factory: LanguageApiService.ɵfac, providedIn: 'root' });
+    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' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageApiService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class TranslationKeyApiService {
     http = inject(HttpClient);
@@ -579,13 +579,13 @@ class TranslationKeyApiService {
     delete(id) {
         return this.http.post(`${this.baseUrl}/delete`, { id, type: 'delete' });
     }
-    static ɵfac = function TranslationKeyApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationKeyApiService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslationKeyApiService, factory: TranslationKeyApiService.ɵfac, providedIn: 'root' });
+    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' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationKeyApiService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class TranslationApiService {
     http = inject(HttpClient);
@@ -632,41 +632,14 @@ class TranslationApiService {
     getCounts() {
         return this.http.post(`${this.baseUrl}/get-counts`, {});
     }
-    static ɵfac = function TranslationApiService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationApiService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslationApiService, factory: TranslationApiService.ɵfac, providedIn: 'root' });
+    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' });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationApiService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
-
-const _forTrack0$3 = ($index, $item) => $item.id;
-function LanguageSelectorComponent_For_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 9);
-} }
-function LanguageSelectorComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 6);
-    i0.ɵɵlistener("click", function LanguageSelectorComponent_For_7_Template_button_click_0_listener() { const lang_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onLanguageSelect(lang_r2.code)); });
-    i0.ɵɵelementStart(1, "span", 7);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 8);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, LanguageSelectorComponent_For_7_Conditional_5_Template, 1, 0, "i", 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const lang_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("bg-primary-50", lang_r2.code === ctx_r2.selectedLanguageCode())("text-primary", lang_r2.code === ctx_r2.selectedLanguageCode());
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(lang_r2.nativeName || lang_r2.name);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("(", lang_r2.code, ")");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(lang_r2.code === ctx_r2.selectedLanguageCode() ? 5 : -1);
-} }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class LanguageSelectorComponent {
     localizationState = inject(LocalizationStateService);
     translationLoader = inject(TranslationLoaderService);
@@ -702,34 +675,51 @@ class LanguageSelectorComponent {
                 .subscribe();
         }
     }
-    static ɵfac = function LanguageSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageSelectorComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageSelectorComponent, selectors: [["lib-language-selector"]], hostAttrs: [1, "relative"], decls: 8, vars: 4, consts: [["type", "button", "pStyleClass", "@next", "enterFromClass", "hidden", "enterActiveClass", "animate-scalein", "leaveToClass", "hidden", "leaveActiveClass", "animate-fadeout", 1, "layout-topbar-action", 3, "click", "hideOnOutsideClick"], [1, "pi", "pi-globe"], [1, "font-semibold"], [1, "hidden", "absolute", "top-[3.25rem]", "z-50", "p-3", "border", "border-surface", "rounded-border", "origin-top", "shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]", "min-w-[180px]", 2, "background-color", "var(--surface-overlay)", "inset-inline-end", "0"], [1, "flex", "flex-col"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "bg-primary-50", "text-primary"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "click"], [1, "font-medium", "flex-1"], [1, "text-xs", "text-muted-color", "uppercase"], [1, "pi", "pi-check", "text-primary", "text-sm"]], template: function LanguageSelectorComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "button", 0);
-            i0.ɵɵlistener("click", function LanguageSelectorComponent_Template_button_click_0_listener() { return ctx.togglePanel(); });
-            i0.ɵɵelement(1, "i", 1);
-            i0.ɵɵelementStart(2, "span", 2);
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(4, "div", 3)(5, "div", 4);
-            i0.ɵɵrepeaterCreate(6, LanguageSelectorComponent_For_7_Template, 6, 7, "button", 5, _forTrack0$3);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            let tmp_2_0;
-            i0.ɵɵclassProp("layout-topbar-action-highlight", ctx.isActive());
-            i0.ɵɵproperty("hideOnOutsideClick", true);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(((tmp_2_0 = ctx.selectedLanguage()) == null ? null : tmp_2_0.nativeName) || ((tmp_2_0 = ctx.selectedLanguage()) == null ? null : tmp_2_0.name) || ctx.selectedLanguageCode());
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.languages());
-        } }, dependencies: [StyleClassModule, i1.StyleClass], encapsulation: 2 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LanguageSelectorComponent, isStandalone: true, selector: "lib-language-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      [class.layout-topbar-action-highlight]="isActive()"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+      (click)="togglePanel()">
+      <i class="pi pi-globe"></i>
+      <span class="font-semibold">{{ selectedLanguage()?.nativeName || selectedLanguage()?.name || selectedLanguageCode() }}</span>
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]"
+      style="background-color: var(--surface-overlay); inset-inline-end: 0;">
+      <div class="flex flex-col">
+        @for (lang of languages(); track lang.id) {
+          <button
+            type="button"
+            class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
+            [class.bg-primary-50]="lang.code === selectedLanguageCode()"
+            [class.text-primary]="lang.code === selectedLanguageCode()"
+            (click)="onLanguageSelect(lang.code)">
+            <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
+            <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
+            @if (lang.code === selectedLanguageCode()) {
+              <i class="pi pi-check text-primary text-sm"></i>
+            }
+          </button>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }] });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponent, [{
-        type: Component,
-        args: [{
-                selector: 'lib-language-selector',
-                imports: [StyleClassModule],
-                host: { class: 'relative' },
-                template: `
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-language-selector',
+                    imports: [StyleClassModule],
+                    host: { class: 'relative' },
+                    template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -765,37 +755,9 @@ class LanguageSelectorComponent {
       </div>
     </div>
   `,
-            }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageSelectorComponent, { className: "LanguageSelectorComponent", filePath: "components/language-selector/language-selector.component.ts", lineNumber: 51 }); })();
-
-const _forTrack0$2 = ($index, $item) => $item.id;
-function LanguageSelectorPanelComponent_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElement(0, "i", 5);
-} }
-function LanguageSelectorPanelComponent_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "button", 2);
-    i0.ɵɵdomListener("click", function LanguageSelectorPanelComponent_For_2_Template_button_click_0_listener() { const lang_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onLanguageSelect(lang_r2.code)); });
-    i0.ɵɵdomElementStart(1, "span", 3);
-    i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(3, "span", 4);
-    i0.ɵɵtext(4);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵconditionalCreate(5, LanguageSelectorPanelComponent_For_2_Conditional_5_Template, 1, 0, "i", 5);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const lang_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("bg-primary-50", lang_r2.code === ctx_r2.selectedLanguageCode())("text-primary", lang_r2.code === ctx_r2.selectedLanguageCode());
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(lang_r2.nativeName || lang_r2.name);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("(", lang_r2.code, ")");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(lang_r2.code === ctx_r2.selectedLanguageCode() ? 5 : -1);
-} }
+                }]
+        }], ctorParameters: () => [] });
+
 class LanguageSelectorPanelComponent {
     localizationState = inject(LocalizationStateService);
     translationLoader = inject(TranslationLoaderService);
@@ -822,26 +784,36 @@ class LanguageSelectorPanelComponent {
                 .subscribe();
         }
     }
-    static ɵfac = function LanguageSelectorPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageSelectorPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageSelectorPanelComponent, selectors: [["lib-language-selector-panel"]], hostAttrs: [1, "hidden", "absolute", "top-[3.25rem]", "z-50", "p-3", "border", "border-surface", "rounded-border", "origin-top", "shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]", "min-w-[180px]", 2, "background-color", "var(--surface-overlay)", "inset-inline-end", "0"], decls: 3, vars: 0, consts: [[1, "flex", "flex-col"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "bg-primary-50", "text-primary"], ["type", "button", 1, "flex", "items-center", "gap-3", "px-3", "py-2.5", "rounded-border", "cursor-pointer", "transition-all", "duration-200", "text-left", "w-full", "border-none", "bg-transparent", "hover:bg-emphasis", 3, "click"], [1, "font-medium", "flex-1"], [1, "text-xs", "text-muted-color", "uppercase"], [1, "pi", "pi-check", "text-primary", "text-sm"]], template: function LanguageSelectorPanelComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0);
-            i0.ɵɵrepeaterCreate(1, LanguageSelectorPanelComponent_For_2_Template, 6, 7, "button", 1, _forTrack0$2);
-            i0.ɵɵdomElementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.languages());
-        } }, encapsulation: 2 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageSelectorPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LanguageSelectorPanelComponent, isStandalone: true, selector: "lib-language-selector-panel", host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]" }, ngImport: i0, template: `
+    <div class="flex flex-col">
+      @for (lang of languages(); track lang.id) {
+        <button
+          type="button"
+          class="flex items-center gap-3 px-3 py-2.5 rounded-border cursor-pointer transition-all duration-200 text-left w-full border-none bg-transparent hover:bg-emphasis"
+          [class.bg-primary-50]="lang.code === selectedLanguageCode()"
+          [class.text-primary]="lang.code === selectedLanguageCode()"
+          (click)="onLanguageSelect(lang.code)">
+          <span class="font-medium flex-1">{{ lang.nativeName || lang.name }}</span>
+          <span class="text-xs text-muted-color uppercase">({{ lang.code }})</span>
+          @if (lang.code === selectedLanguageCode()) {
+            <i class="pi pi-check text-primary text-sm"></i>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorPanelComponent, [{
-        type: Component,
-        args: [{
-                selector: 'lib-language-selector-panel',
-                imports: [],
-                host: {
-                    class: 'hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]',
-                    style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
-                },
-                template: `
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LanguageSelectorPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-language-selector-panel',
+                    imports: [],
+                    host: {
+                        class: 'hidden absolute top-[3.25rem] z-50 p-3 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] min-w-[180px]',
+                        style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
+                    },
+                    template: `
     <div class="flex flex-col">
       @for (lang of languages(); track lang.id) {
         <button
@@ -859,9 +831,8 @@ class LanguageSelectorPanelComponent {
       }
     </div>
   `,
-            }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageSelectorPanelComponent, { className: "LanguageSelectorPanelComponent", filePath: "components/language-selector-panel/language-selector-panel.component.ts", lineNumber: 33 }); })();
+                }]
+        }], ctorParameters: () => [] });
 
 function provideLocalization(config) {
     const providers = [
@@ -927,22 +898,6 @@ const LOCALIZATION_ROUTES = [
     },
 ];
 
-const _forTrack0$1 = ($index, $item) => $item.id;
-function LocalizationContainerPage_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 5);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const tab_r1 = ctx.$implicit;
-    i0.ɵɵproperty("routerLink", tab_r1.route);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(tab_r1.icon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 4, tab_r1.labelKey));
-} }
 class LocalizationContainerPage {
     permissionValidator = inject(PermissionValidatorService);
     allTabs = [
@@ -975,33 +930,34 @@ class LocalizationContainerPage {
             return [];
         return this.allTabs.filter((tab) => this.permissionValidator.hasPermission(tab.permission));
     }, ...(ngDevMode ? [{ debugName: "visibleTabs" }] : []));
-    static ɵfac = function LocalizationContainerPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LocalizationContainerPage)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LocalizationContainerPage, selectors: [["lib-localization-container"]], decls: 12, vars: 6, consts: [[1, "p-2", "sm:p-4"], [1, "mb-4"], [1, "text-xl", "sm:text-2xl", "font-bold", "m-0"], [1, "text-muted-color", "mt-1", "text-sm", "sm:text-base"], [1, "scrollbar-hide", "flex", "gap-1", "mb-4", "border-b", "border-surface", "overflow-x-auto", "flex-nowrap"], ["routerLinkActive", "tab-active", 1, "flex", "items-center", "gap-2", "px-4", "py-2", "rounded-t-lg", "cursor-pointer", "transition-colors", "text-muted-color", "no-underline", "border-b-2", "border-transparent", "-mb-px", "hover:bg-surface-hover", "[&.tab-active]:text-primary", "[&.tab-active]:border-primary", "[&.tab-active]:bg-surface-ground", "whitespace-nowrap", "shrink-0", 3, "routerLink"]], template: function LocalizationContainerPage_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h1", 2);
-            i0.ɵɵtext(3);
-            i0.ɵɵpipe(4, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "p", 3);
-            i0.ɵɵtext(6);
-            i0.ɵɵpipe(7, "translate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(8, "div", 4);
-            i0.ɵɵrepeaterCreate(9, LocalizationContainerPage_For_10_Template, 5, 6, "a", 5, _forTrack0$1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(11, "router-outlet");
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, "localization.title"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 4, "localization.subtitle"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.visibleTabs());
-        } }, dependencies: [RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], styles: [".scrollbar-hide[_ngcontent-%COMP%]{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}"] });
+    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" }] });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LocalizationContainerPage, [{
-        type: Component,
-        args: [{ selector: 'lib-localization-container', imports: [RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], template: `
+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>
@@ -1024,160 +980,13 @@ class LocalizationContainerPage {
       <router-outlet />
     </div>
   `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LocalizationContainerPage, { className: "LocalizationContainerPage", filePath: "pages/localization-container/localization-container.page.ts", lineNumber: 53 }); })();
+        }] });
 
 var localizationContainer_page = /*#__PURE__*/Object.freeze({
     __proto__: null,
     LocalizationContainerPage: LocalizationContainerPage
 });
 
-const _c0$4 = () => ({ "min-width": "40rem" });
-function LanguageListPage_p_button_9_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 10);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("onClick", function LanguageListPage_p_button_9_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreate()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("label", i0.ɵɵpipeBind1(1, 1, "localization.language.create"));
-} }
-function LanguageListPage_ng_template_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "th");
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "th");
-    i0.ɵɵtext(5);
-    i0.ɵɵpipe(6, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "th");
-    i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th");
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "th");
-    i0.ɵɵtext(14);
-    i0.ɵɵpipe(15, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "th", 11);
-    i0.ɵɵtext(17);
-    i0.ɵɵpipe(18, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "localization.language.code"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 8, "localization.language.name"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 10, "localization.language.native.name"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 12, "localization.language.direction"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 14, "shared.status"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 16, "shared.actions"));
-} }
-function LanguageListPage_ng_template_14_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "p-tag", 15);
-    i0.ɵɵpipe(1, "translate");
-} if (rf & 2) {
-    i0.ɵɵproperty("value", i0.ɵɵpipeBind1(1, 1, "localization.language.default"));
-} }
-function LanguageListPage_ng_template_14_Conditional_21_p_button_0_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 21);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("onClick", function LanguageListPage_ng_template_14_Conditional_21_p_button_0_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r3); const lang_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSetDefault(lang_r4)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "localization.language.set.default"));
-} }
-function LanguageListPage_ng_template_14_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, LanguageListPage_ng_template_14_Conditional_21_p_button_0_Template, 2, 4, "p-button", 20);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("hasPermission", ctx_r1.LANGUAGE_PERMISSIONS.UPDATE);
-} }
-function LanguageListPage_ng_template_14_p_button_22_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 22);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("onClick", function LanguageListPage_ng_template_14_p_button_22_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r5); const lang_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEdit(lang_r4.id)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "shared.edit"));
-} }
-function LanguageListPage_ng_template_14_p_button_23_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 23);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("onClick", function LanguageListPage_ng_template_14_p_button_23_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r6); const lang_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDelete(lang_r4)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const lang_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 3, "shared.delete"))("disabled", lang_r4.isDefault);
-} }
-function LanguageListPage_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "span", 12);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "td");
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "td");
-    i0.ɵɵtext(7);
-    i0.ɵɵpipe(8, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td");
-    i0.ɵɵelement(10, "p-tag", 13);
-    i0.ɵɵpipe(11, "translate");
-    i0.ɵɵpipe(12, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "td")(14, "div", 14);
-    i0.ɵɵelement(15, "p-tag", 13);
-    i0.ɵɵpipe(16, "translate");
-    i0.ɵɵpipe(17, "translate");
-    i0.ɵɵconditionalCreate(18, LanguageListPage_ng_template_14_Conditional_18_Template, 2, 3, "p-tag", 15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "td")(20, "div", 16);
-    i0.ɵɵconditionalCreate(21, LanguageListPage_ng_template_14_Conditional_21_Template, 1, 1, "p-button", 17);
-    i0.ɵɵtemplate(22, LanguageListPage_ng_template_14_p_button_22_Template, 2, 4, "p-button", 18)(23, LanguageListPage_ng_template_14_p_button_23_Template, 2, 5, "p-button", 19);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const lang_r4 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(lang_r4.code);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(lang_r4.name);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(lang_r4.nativeName || i0.ɵɵpipeBind1(8, 11, "shared.na"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", lang_r4.direction === "rtl" ? i0.ɵɵpipeBind1(11, 13, "localization.language.rtl") : i0.ɵɵpipeBind1(12, 15, "localization.language.ltr"))("severity", lang_r4.direction === "rtl" ? "warn" : "info");
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", lang_r4.isActive ? i0.ɵɵpipeBind1(16, 17, "shared.active") : i0.ɵɵpipeBind1(17, 19, "shared.inactive"))("severity", lang_r4.isActive ? "success" : "secondary");
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(lang_r4.isDefault ? 18 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(!lang_r4.isDefault ? 21 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("hasPermission", ctx_r1.LANGUAGE_PERMISSIONS.UPDATE);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("hasPermission", ctx_r1.LANGUAGE_PERMISSIONS.DELETE);
-} }
-function LanguageListPage_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 24);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "localization.language.empty"), " ");
-} }
 class LanguageListPage {
     LANGUAGE_PERMISSIONS = LANGUAGE_PERMISSIONS;
     router = inject(Router);
@@ -1260,40 +1069,125 @@ class LanguageListPage {
             },
         });
     }
-    static ɵfac = function LanguageListPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageListPage)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageListPage, selectors: [["lib-language-list-page"]], features: [i0.ɵɵProvidersFeature([ConfirmationService, MessageService])], decls: 20, vars: 11, consts: [["header", ""], ["body", ""], ["emptymessage", ""], [1, "card"], [1, "flex", "flex-col", "sm:flex-row", "justify-between", "items-start", "sm:items-center", "gap-3", "mb-4"], [1, "text-lg", "sm:text-xl", "font-semibold", "m-0"], [1, "text-sm", "text-muted-color", "mt-1"], ["icon", "pi pi-plus", "styleClass", "w-full sm:w-auto", 3, "label", "onClick", 4, "hasPermission"], [1, "overflow-x-auto", "-mx-4", "sm:mx-0"], ["styleClass", "p-datatable-sm", 3, "value", "loading", "tableStyle"], ["icon", "pi pi-plus", "styleClass", "w-full sm:w-auto", 3, "onClick", "label"], [1, "w-[150px]"], [1, "uppercase", "font-semibold"], [3, "value", "severity"], [1, "flex", "gap-1", "items-center"], ["severity", "contrast", 3, "value"], [1, "flex", "gap-1"], ["icon", "pi pi-star", "size", "small", 3, "text", "pTooltip"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "text", "pTooltip", "disabled", "onClick", 4, "hasPermission"], ["icon", "pi pi-star", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-star", "size", "small", 3, "onClick", "text", "pTooltip"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "onClick", "text", "pTooltip"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "onClick", "text", "pTooltip", "disabled"], ["colspan", "6", 1, "text-center", "py-4", "text-muted-color"]], template: function LanguageListPage_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div")(3, "h3", 5);
-            i0.ɵɵtext(4);
-            i0.ɵɵpipe(5, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "p", 6);
-            i0.ɵɵtext(7);
-            i0.ɵɵpipe(8, "translate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(9, LanguageListPage_p_button_9_Template, 2, 3, "p-button", 7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "div", 8)(11, "p-table", 9);
-            i0.ɵɵtemplate(12, LanguageListPage_ng_template_12_Template, 19, 18, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(14, LanguageListPage_ng_template_14_Template, 24, 21, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(16, LanguageListPage_ng_template_16_Template, 4, 3, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(18, "p-confirmDialog")(19, "p-toast");
-        } if (rf & 2) {
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 6, "localization.language.title"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 8, "localization.language.subtitle"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("hasPermission", ctx.LANGUAGE_PERMISSIONS.CREATE);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", ctx.languages())("loading", ctx.isLoading())("tableStyle", i0.ɵɵpureFunction0(10, _c0$4));
-        } }, dependencies: [AngularModule, PrimeModule, i2.Button, i2$1.ConfirmDialog, i8.Table, i4.Tag, i10.Toast, i6.Tooltip, HasPermissionDirective, TranslatePipe], encapsulation: 2 });
+    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.create' | translate"
+          icon="pi pi-plus"
+          (onClick)="onCreate()"
+          styleClass="w-full sm:w-auto"
+        />
+      </div>
+
+      <div class="overflow-x-auto -mx-4 sm:mx-0">
+        <p-table
+          [value]="languages()"
+          [loading]="isLoading()"
+          styleClass="p-datatable-sm"
+          [tableStyle]="{ 'min-width': '40rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'localization.language.code' | translate }}</th>
+              <th>{{ 'localization.language.name' | translate }}</th>
+              <th>{{ 'localization.language.native.name' | translate }}</th>
+              <th>{{ 'localization.language.direction' | translate }}</th>
+              <th>{{ 'shared.status' | translate }}</th>
+              <th class="w-[150px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+
+          <ng-template #body let-lang>
+            <tr>
+              <td>
+                <span class="uppercase font-semibold">{{ lang.code }}</span>
+              </td>
+              <td>{{ lang.name }}</td>
+              <td>{{ lang.nativeName || ('shared.na' | translate) }}</td>
+              <td>
+                <p-tag
+                  [value]="lang.direction === 'rtl' ? ('localization.language.rtl' | translate) : ('localization.language.ltr' | translate)"
+                  [severity]="lang.direction === 'rtl' ? 'warn' : 'info'"
+                />
+              </td>
+              <td>
+                <div class="flex gap-1 items-center">
+                  <p-tag
+                    [value]="lang.isActive ? ('shared.active' | translate) : ('shared.inactive' | translate)"
+                    [severity]="lang.isActive ? 'success' : 'secondary'"
+                  />
+                  @if (lang.isDefault) {
+                    <p-tag [value]="'localization.language.default' | translate" severity="contrast" />
+                  }
+                </div>
+              </td>
+              <td>
+                <div class="flex gap-1">
+                  @if (!lang.isDefault) {
+                    <p-button
+                      *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                      icon="pi pi-star"
+                      [text]="true"
+                      size="small"
+                      [pTooltip]="'localization.language.set.default' | translate"
+                      (onClick)="onSetDefault(lang)"
+                    />
+                  }
+                  <p-button
+                    *hasPermission="LANGUAGE_PERMISSIONS.UPDATE"
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    [pTooltip]="'shared.edit' | translate"
+                    (onClick)="onEdit(lang.id)"
+                  />
+                  <p-button
+                    *hasPermission="LANGUAGE_PERMISSIONS.DELETE"
+                    icon="pi pi-trash"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    [pTooltip]="'shared.delete' | translate"
+                    [disabled]="lang.isDefault"
+                    (onClick)="onDelete(lang)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="6" class="text-center py-4 text-muted-color">
+                {{ 'localization.language.empty' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+    </div>
+
+    <p-confirmDialog />
+    <p-toast />
+  `, 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: i8.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: i10.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" }] });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageListPage, [{
-        type: Component,
-        args: [{
-                selector: 'lib-language-list-page',
-                imports: [AngularModule, PrimeModule, HasPermissionDirective, TranslatePipe],
-                providers: [ConfirmationService, MessageService],
-                template: `
+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>
@@ -1403,27 +1297,14 @@ class LanguageListPage {
     <p-confirmDialog />
     <p-toast />
   `,
-            }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageListPage, { className: "LanguageListPage", filePath: "pages/language-list/language-list.page.ts", lineNumber: 131 }); })();
+                }]
+        }] });
 
 var languageList_page = /*#__PURE__*/Object.freeze({
     __proto__: null,
     LanguageListPage: LanguageListPage
 });
 
-const _c0$3 = () => ({ standalone: true });
-function LanguageFormPage_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "h2", 22);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵpipe(4, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode() ? i0.ɵɵpipeBind1(3, 1, "localization.language.edit") : i0.ɵɵpipeBind1(4, 3, "localization.language.create"), " ");
-} }
 class LanguageFormPage {
     router = inject(Router);
     route = inject(ActivatedRoute);
@@ -1537,132 +1418,8 @@ class LanguageFormPage {
     onCancel() {
         this.router.navigate(['/localization/languages']);
     }
-    static ɵfac = function LanguageFormPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LanguageFormPage)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageFormPage, selectors: [["lib-language-form-page"]], features: [i0.ɵɵProvidersFeature([MessageService])], decls: 58, vars: 66, consts: [["header", ""], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", 3, "ngSubmit"], [1, "flex", "flex-col", "gap-2"], ["for", "code", 1, "font-medium"], ["pInputText", "", "id", "code", 3, "formField", "placeholder"], [1, "text-muted-color"], ["for", "name", 1, "font-medium"], ["pInputText", "", "id", "name", 3, "formField", "placeholder"], ["for", "nativeName", 1, "font-medium"], ["pInputText", "", "id", "nativeName", 3, "formField", "placeholder"], ["for", "direction", 1, "font-medium"], ["id", "direction", "optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "options"], ["for", "serial", 1, "font-medium"], ["pInputText", "", "id", "serial", "type", "number", 3, "formField", "placeholder"], [1, "hidden", "md:block"], [1, "flex", "items-center", "gap-6", "md:col-span-2", "pt-4"], [1, "p-checkbox-native"], ["type", "checkbox", 3, "formField"], [1, "flex", "justify-end", "gap-4", "md:col-span-2", "pt-4"], ["severity", "secondary", 3, "onClick", "label", "outlined"], ["type", "submit", 3, "label", "loading", "disabled"], [1, "flex", "justify-between", "items-center", "p-4"], [1, "text-xl", "font-semibold", "m-0"]], template: function LanguageFormPage_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "p-card");
-            i0.ɵɵtemplate(1, LanguageFormPage_ng_template_1_Template, 5, 5, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementStart(3, "form", 1);
-            i0.ɵɵlistener("ngSubmit", function LanguageFormPage_Template_form_ngSubmit_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSubmit()); });
-            i0.ɵɵelementStart(4, "div", 2)(5, "label", 3);
-            i0.ɵɵtext(6);
-            i0.ɵɵpipe(7, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(8, "input", 4);
-            i0.ɵɵpipe(9, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementStart(10, "small", 5);
-            i0.ɵɵtext(11);
-            i0.ɵɵpipe(12, "translate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(13, "div", 2)(14, "label", 6);
-            i0.ɵɵtext(15);
-            i0.ɵɵpipe(16, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(17, "input", 7);
-            i0.ɵɵpipe(18, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "div", 2)(20, "label", 8);
-            i0.ɵɵtext(21);
-            i0.ɵɵpipe(22, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(23, "input", 9);
-            i0.ɵɵpipe(24, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementStart(25, "small", 5);
-            i0.ɵɵtext(26);
-            i0.ɵɵpipe(27, "translate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(28, "div", 2)(29, "label", 10);
-            i0.ɵɵtext(30);
-            i0.ɵɵpipe(31, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "p-select", 11);
-            i0.ɵɵlistener("ngModelChange", function LanguageFormPage_Template_p_select_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateDirection($event)); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(33, "div", 2)(34, "label", 12);
-            i0.ɵɵtext(35);
-            i0.ɵɵpipe(36, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(37, "input", 13);
-            i0.ɵɵpipe(38, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(39, "div", 14);
-            i0.ɵɵelementStart(40, "div", 15)(41, "label", 16);
-            i0.ɵɵelement(42, "input", 17);
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementStart(43, "span");
-            i0.ɵɵtext(44);
-            i0.ɵɵpipe(45, "translate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(46, "label", 16);
-            i0.ɵɵelement(47, "input", 17);
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementStart(48, "span");
-            i0.ɵɵtext(49);
-            i0.ɵɵpipe(50, "translate");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(51, "div", 18)(52, "p-button", 19);
-            i0.ɵɵpipe(53, "translate");
-            i0.ɵɵlistener("onClick", function LanguageFormPage_Template_p_button_onClick_52_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCancel()); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(54, "p-button", 20);
-            i0.ɵɵpipe(55, "translate");
-            i0.ɵɵpipe(56, "translate");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(57, "p-toast");
-        } if (rf & 2) {
-            i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(7, 33, "localization.language.code"), " *");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(9, 35, "localization.placeholder.code"));
-            i0.ɵɵcontrol(ctx.formTree.code, "formField");
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 37, "localization.language.iso.code.hint"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(16, 39, "localization.language.name"), " *");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(18, 41, "localization.placeholder.name"));
-            i0.ɵɵcontrol(ctx.formTree.name, "formField");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 43, "localization.language.native.name"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(24, 45, "localization.placeholder.native.name"));
-            i0.ɵɵcontrol(ctx.formTree.nativeName, "formField");
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 47, "localization.language.native.name.hint"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(31, 49, "localization.language.direction"), " *");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngModel", ctx.formModel().direction)("ngModelOptions", i0.ɵɵpureFunction0(65, _c0$3))("options", ctx.directionOptions());
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 51, "localization.language.display.order"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(38, 53, "shared.display.order.placeholder"));
-            i0.ɵɵcontrol(ctx.formTree.serial, "formField");
-            i0.ɵɵadvance(5);
-            i0.ɵɵcontrol(ctx.formTree.isActive, "formField");
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 55, "shared.active"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵcontrol(ctx.formTree.isDefault, "formField");
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(50, 57, "localization.language.default"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(53, 59, "shared.cancel"))("outlined", true);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("label", ctx.isEditMode() ? i0.ɵɵpipeBind1(55, 61, "shared.update") : i0.ɵɵpipeBind1(56, 63, "shared.create"))("loading", ctx.isSaving())("disabled", !ctx.isFormValid() || ctx.isSaving());
-        } }, dependencies: [AngularModule, i1$1.ɵNgNoValidate, i1$1.NgControlStatus, i1$1.NgControlStatusGroup, i1$1.NgModel, i1$1.NgForm, PrimeModule, i2.Button, i3.Card, i4$1.InputText, i5.Select, i10.Toast, FormsModule, FormField, TranslatePipe], encapsulation: 2 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageFormPage, [{
-        type: Component,
-        args: [{
-                selector: 'lib-language-form-page',
-                imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
-                providers: [MessageService],
-                template: `
+    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">
@@ -1762,182 +1519,171 @@ class LanguageFormPage {
     </p-card>
 
     <p-toast />
-  `,
-            }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LanguageFormPage, { className: "LanguageFormPage", filePath: "pages/language-form/language-form.page.ts", lineNumber: 136 }); })();
+  `, 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$1.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: i10.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.create' | translate) }}
+          </h2>
+        </div>
+      </ng-template>
 
-var languageForm_page = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    LanguageFormPage: LanguageFormPage
-});
+      <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>
 
-const _c0$2 = () => ({ standalone: true });
-const _c1$1 = () => [10, 15, 25, 50];
-function TranslationKeyListPage_p_button_10_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 16);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("onClick", function TranslationKeyListPage_p_button_10_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCreate()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("label", i0.ɵɵpipeBind1(1, 1, "localization.key.create"));
-} }
-function TranslationKeyListPage_ng_template_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "th", 17);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "th", 18);
-    i0.ɵɵtext(5);
-    i0.ɵɵpipe(6, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "th", 19);
-    i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 20);
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "th", 17);
-    i0.ɵɵtext(14);
-    i0.ɵɵpipe(15, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 5, "localization.key.module"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 7, "localization.key.name"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 9, "localization.key.default.message"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 11, "localization.key.translations"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 13, "shared.actions"));
-} }
-function TranslationKeyListPage_ng_template_23_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "small", 23);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const key_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(key_r4.description);
-} }
-function TranslationKeyListPage_ng_template_23_p_button_14_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 29);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("onClick", function TranslationKeyListPage_ng_template_23_p_button_14_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r5); const key_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onEdit(key_r4)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "shared.edit"));
-} }
-function TranslationKeyListPage_ng_template_23_p_button_15_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 30);
-    i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("onClick", function TranslationKeyListPage_ng_template_23_p_button_15_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r6); const key_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDelete(key_r4)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("text", true)("pTooltip", i0.ɵɵpipeBind1(1, 2, "shared.delete"));
-} }
-function TranslationKeyListPage_ng_template_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td");
-    i0.ɵɵelement(2, "p-tag", 21);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td")(4, "div", 22);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, TranslationKeyListPage_ng_template_23_Conditional_6_Template, 2, 1, "small", 23);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "td");
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td", 24)(10, "span", 25);
-    i0.ɵɵtext(11);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "td")(13, "div", 26);
-    i0.ɵɵtemplate(14, TranslationKeyListPage_ng_template_23_p_button_14_Template, 2, 4, "p-button", 27)(15, TranslationKeyListPage_ng_template_23_p_button_15_Template, 2, 4, "p-button", 28);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const key_r4 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", key_r4.module);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(key_r4.key);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(key_r4.description ? 6 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(key_r4.defaultMessage);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("text-green-500", ctx_r2.getTranslationCount(key_r4.id) === ctx_r2.languages().length)("text-orange-500", ctx_r2.getTranslationCount(key_r4.id) < ctx_r2.languages().length && ctx_r2.getTranslationCount(key_r4.id) > 0)("text-muted-color", ctx_r2.getTranslationCount(key_r4.id) === 0);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", ctx_r2.getTranslationCount(key_r4.id), "/", ctx_r2.languages().length, " ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("hasPermission", ctx_r2.TRANSLATION_KEY_PERMISSIONS.UPDATE);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("hasPermission", ctx_r2.TRANSLATION_KEY_PERMISSIONS.DELETE);
-} }
-function TranslationKeyListPage_ng_template_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 31);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "localization.key.empty"), " ");
-} }
-class TranslationKeyListPage {
-    TRANSLATION_KEY_PERMISSIONS = TRANSLATION_KEY_PERMISSIONS;
-    router = inject(Router);
-    languageService = inject(LanguageApiService);
-    translationKeyService = inject(TranslationKeyApiService);
-    translationService = inject(TranslationApiService);
-    confirmationService = inject(ConfirmationService);
-    messageService = inject(MessageService);
-    translateService = inject(TranslateService);
-    destroyRef = inject(DestroyRef);
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    languages = signal([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
-    modules = signal([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
-    translationKeys = signal([], ...(ngDevMode ? [{ debugName: "translationKeys" }] : []));
-    translationCounts = signal(new Map(), ...(ngDevMode ? [{ debugName: "translationCounts" }] : []));
-    selectedModule = signal(null, ...(ngDevMode ? [{ debugName: "selectedModule" }] : []));
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    moduleOptions = computed(() => [
-        { label: this.translateService.instant('shared.all'), value: null },
-        ...this.modules().map((m) => ({ label: m, value: m })),
-    ], ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
-    filteredKeys = computed(() => {
-        let keys = this.translationKeys();
-        const module = this.selectedModule();
-        const search = this.searchTerm().toLowerCase().trim();
-        if (module) {
-            keys = keys.filter((k) => k.module === module);
-        }
-        if (search) {
-            keys = keys.filter((k) => k.key.toLowerCase().includes(search) ||
-                k.defaultMessage.toLowerCase().includes(search) ||
-                k.module.toLowerCase().includes(search));
-        }
-        return keys;
-    }, ...(ngDevMode ? [{ debugName: "filteredKeys" }] : []));
-    ngOnInit() {
-        this.loadData();
-    }
-    loadData() {
-        this.isLoading.set(true);
-        forkJoin({
-            languages: this.languageService.getAll(),
-            modules: this.translationKeyService.getModules(),
-            keys: this.translationKeyService.getAll(),
-        })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: ({ languages, modules, keys }) => {
+        <!-- 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.instant('shared.all'), value: null },
+        ...this.modules().map((m) => ({ label: m, value: m })),
+    ], ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
+    filteredKeys = computed(() => {
+        let keys = this.translationKeys();
+        const module = this.selectedModule();
+        const search = this.searchTerm().toLowerCase().trim();
+        if (module) {
+            keys = keys.filter((k) => k.module === module);
+        }
+        if (search) {
+            keys = keys.filter((k) => k.key.toLowerCase().includes(search) ||
+                k.defaultMessage.toLowerCase().includes(search) ||
+                k.module.toLowerCase().includes(search));
+        }
+        return keys;
+    }, ...(ngDevMode ? [{ debugName: "filteredKeys" }] : []));
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.isLoading.set(true);
+        forkJoin({
+            languages: this.languageService.getAll(),
+            modules: this.translationKeyService.getModules(),
+            keys: this.translationKeyService.getAll(),
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: ({ languages, modules, keys }) => {
                 if (languages.success && languages.data) {
                     this.languages.set(languages.data.filter((l) => l.isActive));
                 }
@@ -2002,56 +1748,134 @@ class TranslationKeyListPage {
             },
         });
     }
-    static ɵfac = function TranslationKeyListPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationKeyListPage)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TranslationKeyListPage, selectors: [["lib-translation-key-list-page"]], features: [i0.ɵɵProvidersFeature([ConfirmationService, MessageService])], decls: 29, vars: 27, consts: [["header", ""], ["body", ""], ["emptymessage", ""], [1, "card"], [1, "flex", "flex-col", "sm:flex-row", "justify-between", "items-start", "sm:items-center", "gap-3", "mb-4"], [1, "text-lg", "sm:text-xl", "font-semibold", "m-0"], [1, "text-sm", "text-muted-color", "mt-1"], [1, "flex", "gap-2"], ["icon", "pi pi-plus", 3, "label", "onClick", 4, "hasPermission"], [1, "flex", "flex-col", "md:flex-row", "gap-4", "mb-4"], [1, "flex-1"], ["optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "options", "ngModel", "ngModelOptions", "placeholder", "showClear"], [1, "w-full"], [1, "pi", "pi-search"], ["pInputText", "", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "placeholder"], ["styleClass", "p-datatable-sm", 3, "value", "loading", "paginator", "rows", "rowsPerPageOptions"], ["icon", "pi pi-plus", 3, "onClick", "label"], [2, "width", "15%"], [2, "width", "25%"], [2, "width", "35%"], [2, "width", "10%"], ["severity", "secondary", 3, "value"], [1, "font-medium"], [1, "text-muted-color"], [1, "text-center"], [1, "text-sm"], [1, "flex", "gap-1"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "text", "pTooltip", "onClick", 4, "hasPermission"], ["icon", "pi pi-pencil", "severity", "secondary", "size", "small", 3, "onClick", "text", "pTooltip"], ["icon", "pi pi-trash", "severity", "danger", "size", "small", 3, "onClick", "text", "pTooltip"], ["colspan", "5", 1, "text-center", "py-4", "text-muted-color"]], template: function TranslationKeyListPage_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div")(3, "h3", 5);
-            i0.ɵɵtext(4);
-            i0.ɵɵpipe(5, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "p", 6);
-            i0.ɵɵtext(7);
-            i0.ɵɵpipe(8, "translate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", 7);
-            i0.ɵɵtemplate(10, TranslationKeyListPage_p_button_10_Template, 2, 3, "p-button", 8);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 9)(12, "div", 10)(13, "p-select", 11);
-            i0.ɵɵpipe(14, "translate");
-            i0.ɵɵlistener("ngModelChange", function TranslationKeyListPage_Template_p_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModuleChange($event)); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(15, "div", 10)(16, "p-iconfield", 12);
-            i0.ɵɵelement(17, "p-inputicon", 13);
-            i0.ɵɵelementStart(18, "input", 14);
-            i0.ɵɵpipe(19, "translate");
-            i0.ɵɵlistener("ngModelChange", function TranslationKeyListPage_Template_input_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchTerm.set($event)); });
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(20, "p-table", 15);
-            i0.ɵɵtemplate(21, TranslationKeyListPage_ng_template_21_Template, 16, 15, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(23, TranslationKeyListPage_ng_template_23_Template, 16, 14, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(25, TranslationKeyListPage_ng_template_25_Template, 4, 3, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(27, "p-confirmDialog")(28, "p-toast");
-        } if (rf & 2) {
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 16, "localization.key.title"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(8, 18, "localization.key.subtitle"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("hasPermission", ctx.TRANSLATION_KEY_PERMISSIONS.CREATE);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("options", ctx.moduleOptions())("ngModel", ctx.selectedModule())("ngModelOptions", i0.ɵɵpureFunction0(24, _c0$2))("placeholder", i0.ɵɵpipeBind1(14, 20, "localization.key.filter.module"))("showClear", true);
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngModel", ctx.searchTerm())("ngModelOptions", i0.ɵɵpureFunction0(25, _c0$2))("placeholder", i0.ɵɵpipeBind1(19, 22, "shared.search"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", ctx.filteredKeys())("loading", ctx.isLoading())("paginator", true)("rows", 15)("rowsPerPageOptions", i0.ɵɵpureFunction0(26, _c1$1));
-        } }, dependencies: [AngularModule, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgModel, PrimeModule, i2.Button, i2$1.ConfirmDialog, i4$2.IconField, i5$1.InputIcon, i4$1.InputText, i5.Select, i8.Table, i4.Tag, i10.Toast, i6.Tooltip, FormsModule, HasPermissionDirective, TranslatePipe], encapsulation: 2 });
+    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.create' | translate"
+            icon="pi pi-plus"
+            (onClick)="onCreate()"
+          />
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="flex flex-col md:flex-row gap-4 mb-4">
+        <div class="flex-1">
+          <p-select
+            [options]="moduleOptions()"
+            [ngModel]="selectedModule()"
+            (ngModelChange)="onModuleChange($event)"
+            [ngModelOptions]="{standalone: true}"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'localization.key.filter.module' | translate"
+            [showClear]="true"
+            class="w-full"
+          />
+        </div>
+        <div class="flex-1">
+          <p-iconfield class="w-full">
+            <p-inputicon class="pi pi-search" />
+            <input
+              pInputText
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              [ngModelOptions]="{standalone: true}"
+              [placeholder]="'shared.search' | translate"
+              class="w-full"
+            />
+          </p-iconfield>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <p-table
+        [value]="filteredKeys()"
+        [loading]="isLoading()"
+        [paginator]="true"
+        [rows]="15"
+        [rowsPerPageOptions]="[10, 15, 25, 50]"
+        styleClass="p-datatable-sm"
+      >
+        <ng-template #header>
+          <tr>
+            <th style="width: 15%">{{ 'localization.key.module' | translate }}</th>
+            <th style="width: 25%">{{ 'localization.key.name' | translate }}</th>
+            <th style="width: 35%">{{ 'localization.key.default.message' | translate }}</th>
+            <th style="width: 10%">{{ 'localization.key.translations' | translate }}</th>
+            <th style="width: 15%">{{ 'shared.actions' | translate }}</th>
+          </tr>
+        </ng-template>
+        <ng-template #body let-key>
+          <tr>
+            <td>
+              <p-tag [value]="key.module" severity="secondary" />
+            </td>
+            <td>
+              <div class="font-medium">{{ key.key }}</div>
+              @if (key.description) {
+                <small class="text-muted-color">{{ key.description }}</small>
+              }
+            </td>
+            <td>{{ key.defaultMessage }}</td>
+            <td class="text-center">
+              <span class="text-sm" [class.text-green-500]="getTranslationCount(key.id) === languages().length" [class.text-orange-500]="getTranslationCount(key.id) < languages().length && getTranslationCount(key.id) > 0" [class.text-muted-color]="getTranslationCount(key.id) === 0">
+                {{ getTranslationCount(key.id) }}/{{ languages().length }}
+              </span>
+            </td>
+            <td>
+              <div class="flex gap-1">
+                <p-button
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.UPDATE"
+                  icon="pi pi-pencil"
+                  [text]="true"
+                  severity="secondary"
+                  size="small"
+                  [pTooltip]="'shared.edit' | translate"
+                  (onClick)="onEdit(key)"
+                />
+                <p-button
+                  *hasPermission="TRANSLATION_KEY_PERMISSIONS.DELETE"
+                  icon="pi pi-trash"
+                  [text]="true"
+                  severity="danger"
+                  size="small"
+                  [pTooltip]="'shared.delete' | translate"
+                  (onClick)="onDelete(key)"
+                />
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+        <ng-template #emptymessage>
+          <tr>
+            <td colspan="5" class="text-center py-4 text-muted-color">
+              {{ 'localization.key.empty' | translate }}
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+
+    <p-confirmDialog />
+    <p-toast />
+  `, 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$1.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: i8.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: i10.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" }] });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationKeyListPage, [{
-        type: Component,
-        args: [{
-                selector: 'lib-translation-key-list-page',
-                imports: [AngularModule, PrimeModule, FormsModule, HasPermissionDirective, TranslatePipe],
-                providers: [ConfirmationService, MessageService],
-                template: `
+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>
@@ -2170,84 +1994,14 @@ class TranslationKeyListPage {
     <p-confirmDialog />
     <p-toast />
   `,
-            }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TranslationKeyListPage, { className: "TranslationKeyListPage", filePath: "pages/translation-key-list/translation-key-list.page.ts", lineNumber: 146 }); })();
+                }]
+        }] });
 
 var translationKeyList_page = /*#__PURE__*/Object.freeze({
     __proto__: null,
     TranslationKeyListPage: TranslationKeyListPage
 });
 
-const _c0$1 = () => ({ standalone: true });
-const _forTrack0 = ($index, $item) => $item.id;
-function TranslationKeyFormPage_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "h2", 24);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵpipe(4, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode() ? i0.ɵɵpipeBind1(3, 1, "localization.key.edit") : i0.ɵɵpipeBind1(4, 3, "localization.key.create"), " ");
-} }
-function TranslationKeyFormPage_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "p-progressSpinner", 25);
-    i0.ɵɵelementEnd();
-} }
-function TranslationKeyFormPage_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 19);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "translate");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "localization.key.no.languages"), " ");
-} }
-function TranslationKeyFormPage_Conditional_48_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 17);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const lang_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("(", lang_r4.nativeName, ")");
-} }
-function TranslationKeyFormPage_Conditional_48_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 26)(2, "label", 27);
-    i0.ɵɵtext(3);
-    i0.ɵɵconditionalCreate(4, TranslationKeyFormPage_Conditional_48_For_2_Conditional_4_Template, 2, 1, "span", 17);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "p-tag", 28);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "textarea", 29);
-    i0.ɵɵpipe(7, "translate");
-    i0.ɵɵlistener("ngModelChange", function TranslationKeyFormPage_Conditional_48_For_2_Template_textarea_ngModelChange_6_listener($event) { const lang_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setTranslationValue(lang_r4.id, $event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const lang_r4 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", lang_r4.name, " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(lang_r4.nativeName && lang_r4.nativeName !== lang_r4.name ? 4 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("value", lang_r4.code);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngModel", ctx_r1.getTranslationValue(lang_r4.id))("ngModelOptions", i0.ɵɵpureFunction0(9, _c0$1))("rows", 2)("placeholder", ctx_r1.formModel().defaultMessage || i0.ɵɵpipeBind1(7, 7, "localization.key.enter.translation"));
-} }
-function TranslationKeyFormPage_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵrepeaterCreate(1, TranslationKeyFormPage_Conditional_48_For_2_Template, 8, 10, "div", 5, _forTrack0);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.languages());
-} }
 class TranslationKeyFormPage {
     router = inject(Router);
     route = inject(ActivatedRoute);
@@ -2483,121 +2237,8 @@ class TranslationKeyFormPage {
     onCancel() {
         this.router.navigate(['/localization/keys']);
     }
-    static ɵfac = function TranslationKeyFormPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationKeyFormPage)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TranslationKeyFormPage, selectors: [["lib-translation-key-form-page"]], features: [i0.ɵɵProvidersFeature([MessageService])], decls: 56, vars: 65, consts: [["header", ""], [1, "flex", "flex-col", "gap-6", 3, "ngSubmit"], [1, "p-4", "surface-ground", "rounded-lg"], [1, "font-semibold", "mt-0", "mb-4"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4"], [1, "flex", "flex-col", "gap-2"], ["for", "key", 1, "font-medium"], ["pInputText", "", "id", "key", 3, "formField", "placeholder"], ["for", "module", 1, "font-medium"], ["id", "module", "optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "options", "editable", "placeholder"], [1, "flex", "flex-col", "gap-2", "md:col-span-2"], ["for", "defaultMessage", 1, "font-medium"], ["pInputTextarea", "", "id", "defaultMessage", 3, "formField", "rows", "placeholder"], ["for", "description", 1, "font-medium"], ["pInputText", "", "id", "description", 3, "formField", "placeholder"], ["for", "variables", 1, "font-medium"], ["pInputText", "", "id", "variables", 3, "formField", "placeholder"], [1, "text-muted-color"], [1, "flex", "justify-center", "py-4"], [1, "text-muted-color", "text-center", "py-4"], [1, "flex", "justify-end", "gap-4", "pt-4"], ["severity", "secondary", 3, "onClick", "label", "outlined"], ["type", "submit", 3, "label", "loading", "disabled"], [1, "flex", "justify-between", "items-center", "p-4"], [1, "text-xl", "font-semibold", "m-0"], ["strokeWidth", "4"], [1, "flex", "justify-between", "items-center"], [1, "font-medium"], ["severity", "secondary", 1, "uppercase", 3, "value"], ["pInputTextarea", "", 3, "ngModelChange", "ngModel", "ngModelOptions", "rows", "placeholder"]], template: function TranslationKeyFormPage_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "p-card");
-            i0.ɵɵtemplate(1, TranslationKeyFormPage_ng_template_1_Template, 5, 5, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementStart(3, "form", 1);
-            i0.ɵɵlistener("ngSubmit", function TranslationKeyFormPage_Template_form_ngSubmit_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSubmit()); });
-            i0.ɵɵelementStart(4, "div", 2)(5, "h4", 3);
-            i0.ɵɵtext(6);
-            i0.ɵɵpipe(7, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 4)(9, "div", 5)(10, "label", 6);
-            i0.ɵɵtext(11);
-            i0.ɵɵpipe(12, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(13, "input", 7);
-            i0.ɵɵpipe(14, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "div", 5)(16, "label", 8);
-            i0.ɵɵtext(17);
-            i0.ɵɵpipe(18, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "p-select", 9);
-            i0.ɵɵpipe(20, "translate");
-            i0.ɵɵlistener("ngModelChange", function TranslationKeyFormPage_Template_p_select_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateModule($event)); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 10)(22, "label", 11);
-            i0.ɵɵtext(23);
-            i0.ɵɵpipe(24, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(25, "textarea", 12);
-            i0.ɵɵpipe(26, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "div", 10)(28, "label", 13);
-            i0.ɵɵtext(29);
-            i0.ɵɵpipe(30, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(31, "input", 14);
-            i0.ɵɵpipe(32, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(33, "div", 10)(34, "label", 15);
-            i0.ɵɵtext(35);
-            i0.ɵɵpipe(36, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(37, "input", 16);
-            i0.ɵɵpipe(38, "translate");
-            i0.ɵɵcontrolCreate();
-            i0.ɵɵelementStart(39, "small", 17);
-            i0.ɵɵtext(40);
-            i0.ɵɵpipe(41, "translate");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(42, "div", 2)(43, "h4", 3);
-            i0.ɵɵtext(44);
-            i0.ɵɵpipe(45, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(46, TranslationKeyFormPage_Conditional_46_Template, 2, 0, "div", 18)(47, TranslationKeyFormPage_Conditional_47_Template, 3, 3, "p", 19)(48, TranslationKeyFormPage_Conditional_48_Template, 3, 0, "div", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(49, "div", 20)(50, "p-button", 21);
-            i0.ɵɵpipe(51, "translate");
-            i0.ɵɵlistener("onClick", function TranslationKeyFormPage_Template_p_button_onClick_50_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCancel()); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(52, "p-button", 22);
-            i0.ɵɵpipe(53, "translate");
-            i0.ɵɵpipe(54, "translate");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(55, "p-toast");
-        } if (rf & 2) {
-            i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 32, "localization.key.about"));
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(12, 34, "localization.key.name"), " *");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(14, 36, "localization.placeholder.key.name"));
-            i0.ɵɵcontrol(ctx.formTree.key, "formField");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(18, 38, "localization.key.module"), " *");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngModel", ctx.formModel().module)("ngModelOptions", i0.ɵɵpureFunction0(64, _c0$1))("options", ctx.moduleOptions())("editable", true)("placeholder", i0.ɵɵpipeBind1(20, 40, "localization.key.select.module"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(24, 42, "localization.key.default.message"), " *");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("rows", 2)("placeholder", i0.ɵɵpipeBind1(26, 44, "localization.placeholder.default.message"));
-            i0.ɵɵcontrol(ctx.formTree.defaultMessage, "formField");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 46, "localization.key.description"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(32, 48, "localization.placeholder.key.description"));
-            i0.ɵɵcontrol(ctx.formTree.description, "formField");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 50, "localization.key.variables"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("placeholder", i0.ɵɵpipeBind1(38, 52, "localization.key.variables.placeholder"));
-            i0.ɵɵcontrol(ctx.formTree.variables, "formField");
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(41, 54, "localization.key.variables.hint"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 56, "localization.key.translations.section"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoadingLanguages() ? 46 : ctx.languages().length === 0 ? 47 : 48);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(51, 58, "shared.cancel"))("outlined", true);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("label", ctx.isEditMode() ? i0.ɵɵpipeBind1(53, 60, "shared.update") : i0.ɵɵpipeBind1(54, 62, "shared.create"))("loading", ctx.isSaving())("disabled", !ctx.isFormValid() || ctx.isSaving());
-        } }, dependencies: [AngularModule, i1$1.ɵNgNoValidate, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgControlStatusGroup, i1$1.NgModel, i1$1.NgForm, PrimeModule, i2.Button, i3.Card, i4$1.InputText, i5.Select, i4.Tag, i7.Textarea, i10.Toast, i9.ProgressSpinner, FormsModule, FormField, TranslatePipe], encapsulation: 2 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationKeyFormPage, [{
-        type: Component,
-        args: [{
-                selector: 'lib-translation-key-form-page',
-                imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
-                providers: [MessageService],
-                template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationKeyFormPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TranslationKeyFormPage, isStandalone: true, selector: "lib-translation-key-form-page", providers: [MessageService], ngImport: i0, template: `
     <p-card>
       <ng-template #header>
         <div class="flex justify-between items-center p-4">
@@ -2726,162 +2367,152 @@ class TranslationKeyFormPage {
     </p-card>
 
     <p-toast />
-  `,
-            }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TranslationKeyFormPage, { className: "TranslationKeyFormPage", filePath: "pages/translation-key-form/translation-key-form.page.ts", lineNumber: 173 }); })();
-
-var translationKeyForm_page = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    TranslationKeyFormPage: TranslationKeyFormPage
+  `, 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$1.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.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: i10.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,
+            args: [{
+                    selector: 'lib-translation-key-form-page',
+                    imports: [AngularModule, PrimeModule, FormsModule, FormField, TranslatePipe],
+                    providers: [MessageService],
+                    template: `
+    <p-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{ isEditMode() ? ('localization.key.edit' | translate) : ('localization.key.create' | translate) }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form (ngSubmit)="onSubmit()" class="flex flex-col gap-6">
+        <!-- Key Info Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">{{ 'localization.key.about' | translate }}</h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Key Name -->
+            <div class="flex flex-col gap-2">
+              <label for="key" class="font-medium">{{ 'localization.key.name' | translate }} *</label>
+              <input
+                pInputText
+                id="key"
+                [formField]="formTree.key"
+                [placeholder]="'localization.placeholder.key.name' | translate" />
+            </div>
+
+            <!-- Module -->
+            <div class="flex flex-col gap-2">
+              <label for="module" class="font-medium">{{ 'localization.key.module' | translate }} *</label>
+              <p-select
+                id="module"
+                [ngModel]="formModel().module"
+                (ngModelChange)="updateModule($event)"
+                [ngModelOptions]="{standalone: true}"
+                [options]="moduleOptions()"
+                optionLabel="label"
+                optionValue="value"
+                [editable]="true"
+                [placeholder]="'localization.key.select.module' | translate"
+                class="w-full" />
+            </div>
+
+            <!-- Default Message -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="defaultMessage" class="font-medium">{{ 'localization.key.default.message' | translate }} *</label>
+              <textarea
+                pInputTextarea
+                id="defaultMessage"
+                [formField]="formTree.defaultMessage"
+                [rows]="2"
+                [placeholder]="'localization.placeholder.default.message' | translate"></textarea>
+            </div>
+
+            <!-- Description -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="description" class="font-medium">{{ 'localization.key.description' | translate }}</label>
+              <input
+                pInputText
+                id="description"
+                [formField]="formTree.description"
+                [placeholder]="'localization.placeholder.key.description' | translate" />
+            </div>
+
+            <!-- Variables -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="variables" class="font-medium">{{ 'localization.key.variables' | translate }}</label>
+              <input
+                pInputText
+                id="variables"
+                [formField]="formTree.variables"
+                [placeholder]="'localization.key.variables.placeholder' | translate" />
+              <small class="text-muted-color">{{ 'localization.key.variables.hint' | translate }}</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Translations Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">{{ 'localization.key.translations.section' | translate }}</h4>
+          @if (isLoadingLanguages()) {
+            <div class="flex justify-center py-4">
+              <p-progressSpinner strokeWidth="4" />
+            </div>
+          } @else if (languages().length === 0) {
+            <p class="text-muted-color text-center py-4">
+              {{ 'localization.key.no.languages' | translate }}
+            </p>
+          } @else {
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              @for (lang of languages(); track lang.id) {
+                <div class="flex flex-col gap-2">
+                  <div class="flex justify-between items-center">
+                    <label class="font-medium">
+                      {{ lang.name }}
+                      @if (lang.nativeName && lang.nativeName !== lang.name) {
+                        <span class="text-muted-color">({{ lang.nativeName }})</span>
+                      }
+                    </label>
+                    <p-tag [value]="lang.code" severity="secondary" class="uppercase" />
+                  </div>
+                  <textarea
+                    pInputTextarea
+                    [ngModel]="getTranslationValue(lang.id)"
+                    (ngModelChange)="setTranslationValue(lang.id, $event)"
+                    [ngModelOptions]="{standalone: true}"
+                    [rows]="2"
+                    [placeholder]="formModel().defaultMessage || ('localization.key.enter.translation' | translate)"></textarea>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 pt-4">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            [outlined]="true"
+            (onClick)="onCancel()" />
+          <p-button
+            [label]="isEditMode() ? ('shared.update' | translate) : ('shared.create' | translate)"
+            type="submit"
+            [loading]="isSaving()"
+            [disabled]="!isFormValid() || isSaving()" />
+        </div>
+      </form>
+    </p-card>
+
+    <p-toast />
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+var translationKeyForm_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TranslationKeyFormPage: TranslationKeyFormPage
 });
 
-const _c0 = () => ({ standalone: true });
-const _c1 = () => [10, 20, 50, 100];
-const _c2 = a0 => ({ count: a0 });
-function TranslationListPage_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "p-progressSpinner", 21);
-    i0.ɵɵelementEnd();
-} }
-function TranslationListPage_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16)(1, "p");
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "localization.translation.select.language.hint"));
-} }
-function TranslationListPage_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16)(1, "p");
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "localization.translation.no.keys"));
-} }
-function TranslationListPage_Conditional_32_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "th", 22);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "th", 23);
-    i0.ɵɵtext(5);
-    i0.ɵɵpipe(6, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "th", 24);
-    i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "translate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 25);
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "localization.translation.key"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 6, "localization.translation.default.message"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 8, "localization.translation.value"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 10, "localization.translation.verified"));
-} }
-function TranslationListPage_Conditional_32_ng_template_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "small", 19);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const row_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(row_r2.translationKey.description);
-} }
-function TranslationListPage_Conditional_32_ng_template_3_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const v_r3 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r3.formatVariable(v_r3));
-} }
-function TranslationListPage_Conditional_32_ng_template_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵrepeaterCreate(1, TranslationListPage_Conditional_32_ng_template_3_Conditional_5_For_2_Template, 2, 1, "span", 32, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const row_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(row_r2.translationKey.variables);
-} }
-function TranslationListPage_Conditional_32_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 26);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, TranslationListPage_Conditional_32_ng_template_3_Conditional_4_Template, 2, 1, "small", 19);
-    i0.ɵɵconditionalCreate(5, TranslationListPage_Conditional_32_ng_template_3_Conditional_5_Template, 3, 0, "div", 27);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "td")(7, "span", 28);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td")(10, "textarea", 29);
-    i0.ɵɵtwoWayListener("ngModelChange", function TranslationListPage_Conditional_32_ng_template_3_Template_textarea_ngModelChange_10_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; i0.ɵɵtwoWayBindingSet(row_r2.editValue, $event) || (row_r2.editValue = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function TranslationListPage_Conditional_32_ng_template_3_Template_textarea_input_10_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onValueChange(row_r2)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "td", 30)(12, "p-checkbox", 31);
-    i0.ɵɵtwoWayListener("ngModelChange", function TranslationListPage_Conditional_32_ng_template_3_Template_p_checkbox_ngModelChange_12_listener($event) { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; i0.ɵɵtwoWayBindingSet(row_r2.isVerified, $event) || (row_r2.isVerified = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("onChange", function TranslationListPage_Conditional_32_ng_template_3_Template_p_checkbox_onChange_12_listener() { const row_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onVerifiedChange(row_r2)); });
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const row_r2 = ctx.$implicit;
-    i0.ɵɵclassProp("bg-yellow-50", row_r2.isDirty);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(row_r2.translationKey.key);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(row_r2.translationKey.description ? 4 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((row_r2.translationKey.variables == null ? null : row_r2.translationKey.variables.length) ? 5 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(row_r2.translationKey.defaultMessage);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", row_r2.editValue);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(13, _c0))("rows", 2)("placeholder", row_r2.translationKey.defaultMessage);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", row_r2.isVerified);
-    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(14, _c0))("binary", true);
-} }
-function TranslationListPage_Conditional_32_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 33);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, "shared.no.results"), " ");
-} }
-function TranslationListPage_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p-table", 17);
-    i0.ɵɵtemplate(1, TranslationListPage_Conditional_32_ng_template_1_Template, 13, 12, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(3, TranslationListPage_Conditional_32_ng_template_3_Template, 13, 15, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(5, TranslationListPage_Conditional_32_ng_template_5_Template, 4, 3, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("value", ctx_r3.filteredRows())("paginator", true)("rows", 20)("rowsPerPageOptions", i0.ɵɵpureFunction0(6, _c1))("showCurrentPageReport", true)("currentPageReportTemplate", ctx_r3.paginationTemplate());
-} }
-function TranslationListPage_Conditional_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 20);
-    i0.ɵɵelement(1, "i", 34);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, "localization.translation.unsaved.changes", i0.ɵɵpureFunction1(4, _c2, ctx_r3.changedCount())), " ");
-} }
 class TranslationListPage {
     languageService = inject(LanguageApiService);
     translationKeyService = inject(TranslationKeyApiService);
@@ -3050,83 +2681,173 @@ class TranslationListPage {
             },
         });
     }
-    static ɵfac = function TranslationListPage_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslationListPage)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TranslationListPage, selectors: [["lib-translation-list-page"]], features: [i0.ɵɵProvidersFeature([MessageService])], decls: 39, vars: 44, consts: [["header", ""], ["body", ""], ["emptymessage", ""], [1, "card"], [1, "flex", "flex-col", "sm:flex-row", "justify-between", "items-start", "sm:items-center", "gap-4", "mb-4"], [1, "text-xl", "font-semibold", "m-0"], [1, "flex", "gap-2"], ["icon", "pi pi-save", 3, "onClick", "label", "disabled", "loading"], [1, "flex", "flex-col", "md:flex-row", "gap-4", "mb-4"], [1, "flex-1"], [1, "block", "font-medium", "mb-2"], ["optionLabel", "label", "optionValue", "value", 1, "w-full", 3, "ngModelChange", "options", "ngModel", "ngModelOptions", "placeholder"], [1, "w-full"], [1, "pi", "pi-search"], ["pInputText", "", 1, "w-full", 3, "ngModelChange", "ngModel", "ngModelOptions", "placeholder"], [1, "flex", "justify-center", "py-8"], [1, "text-center", "py-8", "text-muted-color"], ["styleClass", "p-datatable-sm", 3, "value", "paginator", "rows", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate"], [1, "flex", "justify-between", "items-center", "mt-4"], [1, "text-muted-color"], [1, "text-orange-500"], ["strokeWidth", "4"], [2, "width", "30%"], [2, "width", "25%"], [2, "width", "35%"], [2, "width", "10%"], [1, "font-medium", "text-sm"], [1, "mt-1"], [1, "text-sm"], ["pInputTextarea", "", 1, "w-full", 3, "ngModelChange", "input", "ngModel", "ngModelOptions", "rows", "placeholder"], [1, "text-center"], [3, "ngModelChange", "onChange", "ngModel", "ngModelOptions", "binary"], [1, "text-xs", "bg-surface-100", "px-2", "py-1", "rounded", "mr-1"], ["colspan", "4", 1, "text-center", "py-4", "text-muted-color"], [1, "pi", "pi-exclamation-circle", "mr-1"]], template: function TranslationListPage_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "h2", 5);
-            i0.ɵɵtext(3);
-            i0.ɵɵpipe(4, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 6)(6, "p-button", 7);
-            i0.ɵɵpipe(7, "translate");
-            i0.ɵɵlistener("onClick", function TranslationListPage_Template_p_button_onClick_6_listener() { return ctx.saveChanges(); });
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(8, "div", 8)(9, "div", 9)(10, "label", 10);
-            i0.ɵɵtext(11);
-            i0.ɵɵpipe(12, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "p-select", 11);
-            i0.ɵɵpipe(14, "translate");
-            i0.ɵɵlistener("ngModelChange", function TranslationListPage_Template_p_select_ngModelChange_13_listener($event) { return ctx.onModuleChange($event); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(15, "div", 9)(16, "label", 10);
-            i0.ɵɵtext(17);
-            i0.ɵɵpipe(18, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "p-select", 11);
-            i0.ɵɵpipe(20, "translate");
-            i0.ɵɵlistener("ngModelChange", function TranslationListPage_Template_p_select_ngModelChange_19_listener($event) { return ctx.onLanguageChange($event); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 9)(22, "label", 10);
-            i0.ɵɵtext(23);
-            i0.ɵɵpipe(24, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "p-iconfield", 12);
-            i0.ɵɵelement(26, "p-inputicon", 13);
-            i0.ɵɵelementStart(27, "input", 14);
-            i0.ɵɵpipe(28, "translate");
-            i0.ɵɵlistener("ngModelChange", function TranslationListPage_Template_input_ngModelChange_27_listener($event) { return ctx.searchTerm.set($event); });
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(29, TranslationListPage_Conditional_29_Template, 2, 0, "div", 15)(30, TranslationListPage_Conditional_30_Template, 4, 3, "div", 16)(31, TranslationListPage_Conditional_31_Template, 4, 3, "div", 16)(32, TranslationListPage_Conditional_32_Template, 7, 7, "p-table", 17);
-            i0.ɵɵelementStart(33, "div", 18)(34, "div", 19);
-            i0.ɵɵconditionalCreate(35, TranslationListPage_Conditional_35_Template, 4, 6, "span", 20);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "p-button", 7);
-            i0.ɵɵpipe(37, "translate");
-            i0.ɵɵlistener("onClick", function TranslationListPage_Template_p_button_onClick_36_listener() { return ctx.saveChanges(); });
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(38, "p-toast");
-        } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 23, "localization.translation.title"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(7, 25, "shared.save"))("disabled", !ctx.hasChanges())("loading", ctx.isSaving());
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 27, "localization.translation.module"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("options", ctx.moduleOptions())("ngModel", ctx.selectedModule())("ngModelOptions", i0.ɵɵpureFunction0(41, _c0))("placeholder", i0.ɵɵpipeBind1(14, 29, "localization.translation.select.module"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 31, "localization.translation.language"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("options", ctx.languageOptions())("ngModel", ctx.selectedLanguageId())("ngModelOptions", i0.ɵɵpureFunction0(42, _c0))("placeholder", i0.ɵɵpipeBind1(20, 33, "localization.translation.select.language"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(24, 35, "shared.search"));
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngModel", ctx.searchTerm())("ngModelOptions", i0.ɵɵpureFunction0(43, _c0))("placeholder", i0.ɵɵpipeBind1(28, 37, "localization.translation.search.keys"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading() ? 29 : !ctx.selectedLanguageId() ? 30 : ctx.filteredRows().length === 0 ? 31 : 32);
-            i0.ɵɵadvance(6);
-            i0.ɵɵconditional(ctx.hasChanges() ? 35 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("label", i0.ɵɵpipeBind1(37, 39, "shared.save"))("disabled", !ctx.hasChanges())("loading", ctx.isSaving());
-        } }, dependencies: [AngularModule, i1$1.DefaultValueAccessor, i1$1.NgControlStatus, i1$1.NgModel, PrimeModule, i2.Button, i3$1.Checkbox, i4$2.IconField, i5$1.InputIcon, i4$1.InputText, i5.Select, i8.Table, i7.Textarea, i10.Toast, i9.ProgressSpinner, FormsModule, TranslatePipe], encapsulation: 2 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TranslationListPage, isStandalone: true, selector: "lib-translation-list-page", providers: [MessageService], ngImport: i0, template: `
+    <div class="card">
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
+        <h2 class="text-xl font-semibold m-0">{{ 'localization.translation.title' | translate }}</h2>
+        <div class="flex gap-2">
+          <p-button
+            [label]="'shared.save' | translate"
+            icon="pi pi-save"
+            [disabled]="!hasChanges()"
+            [loading]="isSaving()"
+            (onClick)="saveChanges()"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col md:flex-row gap-4 mb-4">
+        <div class="flex-1">
+          <label class="block font-medium mb-2">{{ 'localization.translation.module' | translate }}</label>
+          <p-select
+            [options]="moduleOptions()"
+            [ngModel]="selectedModule()"
+            (ngModelChange)="onModuleChange($event)"
+            [ngModelOptions]="{standalone: true}"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'localization.translation.select.module' | translate"
+            class="w-full"
+          />
+        </div>
+        <div class="flex-1">
+          <label class="block font-medium mb-2">{{ 'localization.translation.language' | translate }}</label>
+          <p-select
+            [options]="languageOptions()"
+            [ngModel]="selectedLanguageId()"
+            (ngModelChange)="onLanguageChange($event)"
+            [ngModelOptions]="{standalone: true}"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'localization.translation.select.language' | translate"
+            class="w-full"
+          />
+        </div>
+        <div class="flex-1">
+          <label class="block font-medium mb-2">{{ 'shared.search' | translate }}</label>
+          <p-iconfield class="w-full">
+            <p-inputicon class="pi pi-search" />
+            <input
+              pInputText
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              [ngModelOptions]="{standalone: true}"
+              [placeholder]="'localization.translation.search.keys' | translate"
+              class="w-full"
+            />
+          </p-iconfield>
+        </div>
+      </div>
+
+      @if (isLoading()) {
+        <div class="flex justify-center py-8">
+          <p-progressSpinner strokeWidth="4" />
+        </div>
+      } @else if (!selectedLanguageId()) {
+        <div class="text-center py-8 text-muted-color">
+          <p>{{ 'localization.translation.select.language.hint' | translate }}</p>
+        </div>
+      } @else if (filteredRows().length === 0) {
+        <div class="text-center py-8 text-muted-color">
+          <p>{{ 'localization.translation.no.keys' | translate }}</p>
+        </div>
+      } @else {
+        <p-table
+          [value]="filteredRows()"
+          [paginator]="true"
+          [rows]="20"
+          [rowsPerPageOptions]="[10, 20, 50, 100]"
+          [showCurrentPageReport]="true"
+          [currentPageReportTemplate]="paginationTemplate()"
+          styleClass="p-datatable-sm"
+        >
+          <ng-template #header>
+            <tr>
+              <th style="width: 30%">{{ 'localization.translation.key' | translate }}</th>
+              <th style="width: 25%">{{ 'localization.translation.default.message' | translate }}</th>
+              <th style="width: 35%">{{ 'localization.translation.value' | translate }}</th>
+              <th style="width: 10%">{{ 'localization.translation.verified' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-row>
+            <tr [class.bg-yellow-50]="row.isDirty">
+              <td>
+                <div class="font-medium text-sm">{{ row.translationKey.key }}</div>
+                @if (row.translationKey.description) {
+                  <small class="text-muted-color">{{ row.translationKey.description }}</small>
+                }
+                @if (row.translationKey.variables?.length) {
+                  <div class="mt-1">
+                    @for (v of row.translationKey.variables; track v) {
+                      <span class="text-xs bg-surface-100 px-2 py-1 rounded mr-1">{{ formatVariable(v) }}</span>
+                    }
+                  </div>
+                }
+              </td>
+              <td>
+                <span class="text-sm">{{ row.translationKey.defaultMessage }}</span>
+              </td>
+              <td>
+                <textarea
+                  pInputTextarea
+                  [(ngModel)]="row.editValue"
+                  [ngModelOptions]="{standalone: true}"
+                  [rows]="2"
+                  class="w-full"
+                  [placeholder]="row.translationKey.defaultMessage"
+                  (input)="onValueChange(row)"
+                ></textarea>
+              </td>
+              <td class="text-center">
+                <p-checkbox
+                  [(ngModel)]="row.isVerified"
+                  [ngModelOptions]="{standalone: true}"
+                  [binary]="true"
+                  (onChange)="onVerifiedChange(row)"
+                />
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="4" class="text-center py-4 text-muted-color">
+                {{ 'shared.no.results' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      }
+
+      <div class="flex justify-between items-center mt-4">
+        <div class="text-muted-color">
+          @if (hasChanges()) {
+            <span class="text-orange-500">
+              <i class="pi pi-exclamation-circle mr-1"></i>
+              {{ 'localization.translation.unsaved.changes' | translate: { count: changedCount() } }}
+            </span>
+          }
+        </div>
+        <p-button
+          [label]="'shared.save' | translate"
+          icon="pi pi-save"
+          [disabled]="!hasChanges()"
+          [loading]="isSaving()"
+          (onClick)="saveChanges()"
+        />
+      </div>
+    </div>
+
+    <p-toast />
+  `, 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: i3$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { 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$1.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: i8.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: "directive", type: i7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: i10.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: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslationListPage, [{
-        type: Component,
-        args: [{
-                selector: 'lib-translation-list-page',
-                imports: [AngularModule, PrimeModule, FormsModule, TranslatePipe],
-                providers: [MessageService],
-                template: `
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslationListPage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-translation-list-page',
+                    imports: [AngularModule, PrimeModule, FormsModule, TranslatePipe],
+                    providers: [MessageService],
+                    template: `
     <div class="card">
       <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
         <h2 class="text-xl font-semibold m-0">{{ 'localization.translation.title' | translate }}</h2>
@@ -3284,9 +3005,8 @@ class TranslationListPage {
 
     <p-toast />
   `,
-            }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TranslationListPage, { className: "TranslationListPage", filePath: "pages/translation-list/translation-list.page.ts", lineNumber: 193 }); })();
+                }]
+        }] });
 
 var translationList_page = /*#__PURE__*/Object.freeze({
     __proto__: null,