@flusys/ng-localization 9.1.0 → 9.1.1

package/fesm2022/flusys-ng-localization-translation-key-form.page-Dgn58Sh7.mjs

@@ -0,0 +1,865 @@
+import { LanguageApiService, TranslationApiService, TranslationKeyApiService } from "./flusys-ng-localization.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, computed, effect, inject, signal } from "@angular/core";
+import { TranslatePipe, TranslateService } from "@flusys/ng-shared";
+import { finalize, forkJoin, from } from "rxjs";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import { CardComponent, FButtonDirective, InputTextDirective, MessageService, ProgressSpinnerComponent, SelectComponent, TagComponent, TextareaDirective, UiIconComponent } from "@flusys/ng-ui";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { FormField, disabled, form, required } from "@angular/forms/signals";
+import { ActivatedRoute, Router } from "@angular/router";
+var TranslationKeyFormPage = class TranslationKeyFormPage {
+	router = inject(Router);
+	route = inject(ActivatedRoute);
+	languageService = inject(LanguageApiService);
+	translationKeyService = inject(TranslationKeyApiService);
+	translationService = inject(TranslationApiService);
+	messageService = inject(MessageService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	destroyRef = inject(DestroyRef);
+	routeParams = toSignal(this.route.paramMap);
+	loadTriggered = false;
+	isSaving = signal(false, ...ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []);
+	isLoadingLanguages = signal(false, ...ngDevMode ? [{ debugName: "isLoadingLanguages" }] : /* istanbul ignore next */ []);
+	existingKey = signal(null, ...ngDevMode ? [{ debugName: "existingKey" }] : /* istanbul ignore next */ []);
+	isEditMode = computed(() => !!this.existingKey(), ...ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []);
+	isReadonly = computed(() => this.existingKey()?.isReadonly ?? false, ...ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []);
+	languages = signal([], ...ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []);
+	modules = signal([], ...ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []);
+	translations = signal([], ...ngDevMode ? [{ debugName: "translations" }] : /* istanbul ignore next */ []);
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	moduleOptions = computed(() => this.modules().map((m) => ({
+		label: m,
+		value: m
+	})), ...ngDevMode ? [{ debugName: "moduleOptions" }] : /* istanbul ignore next */ []);
+	formModel = signal({
+		key: "",
+		module: "",
+		defaultMessage: "",
+		description: "",
+		variables: ""
+	}, ...ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []);
+	formTree = form(this.formModel, (f) => {
+		required(f.key, { message: this.translate("localization.validation.key.required") });
+		required(f.defaultMessage, { message: this.translate("localization.validation.default.message.required") });
+		disabled(f.key, { when: () => this.isReadonly() });
+	});
+	isFormValid = computed(() => {
+		const model = this.formModel();
+		return model.key.trim().length > 0 && model.module.trim().length > 0 && model.defaultMessage.trim().length > 0;
+	}, ...ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const params = this.routeParams();
+			if (!params || this.loadTriggered) return;
+			this.loadTriggered = true;
+			const id = params.get("id");
+			if (id && id !== "new") this.loadTranslationKey(id);
+		});
+	}
+	ngOnInit() {
+		this.isLoadingLanguages.set(true);
+		forkJoin({
+			languages: from(this.languageService.getAll({
+				pagination: {
+					currentPage: 0,
+					pageSize: 100
+				},
+				filter: {},
+				sort: {
+					serial: "ASC",
+					name: "ASC"
+				}
+			})),
+			modules: this.translationKeyService.getModules()
+		}).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isLoadingLanguages.set(false))).subscribe({ next: ({ languages, modules }) => {
+			if (languages.success && languages.data) {
+				const activeLanguages = languages.data.filter((l) => l.isActive);
+				this.languages.set(activeLanguages);
+				this.initializeTranslations(activeLanguages);
+			}
+			if (modules.success && modules.data) this.modules.set(modules.data);
+		} });
+	}
+	initializeTranslations(languages) {
+		if (this.translations().length === 0) this.translations.set(languages.map((lang) => ({
+			languageId: lang.id,
+			value: ""
+		})));
+	}
+	updateModule(value) {
+		this.formModel.update((m) => ({
+			...m,
+			module: value ?? ""
+		}));
+	}
+	getTranslationValue(languageId) {
+		return this.translations().find((t) => t.languageId === languageId)?.value ?? "";
+	}
+	setTranslationValue(languageId, value) {
+		this.translations.update((list) => {
+			if (list.find((t) => t.languageId === languageId)) return list.map((t) => t.languageId === languageId ? {
+				...t,
+				value
+			} : t);
+			return [...list, {
+				languageId,
+				value
+			}];
+		});
+	}
+	loadTranslationKey(id) {
+		this.isSaving.set(true);
+		from(this.translationKeyService.findById(id)).pipe(takeUntilDestroyed(this.destroyRef), finalize(() => this.isSaving.set(false))).subscribe({
+			next: (response) => {
+				if (response.success && response.data) {
+					this.existingKey.set(response.data);
+					this.formModel.set(this.toFormModel(response.data));
+					this.loadExistingTranslations(id);
+				}
+			},
+			error: () => this.router.navigate(["/localization/keys"])
+		});
+	}
+	loadExistingTranslations(keyId) {
+		this.translationService.getByKeyId(keyId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({ next: (response) => {
+			if (response.success && response.data) this.translations.update((list) => {
+				const updated = [...list];
+				response.data.forEach((t) => {
+					const existing = updated.find((tr) => tr.languageId === t.languageId);
+					if (existing) {
+						existing.value = t.value;
+						existing.translationId = t.id;
+					} else updated.push({
+						languageId: t.languageId,
+						value: t.value,
+						translationId: t.id
+					});
+				});
+				return updated;
+			});
+		} });
+	}
+	toFormModel(key) {
+		return {
+			key: key.key,
+			module: key.module,
+			defaultMessage: key.defaultMessage,
+			description: key.description ?? "",
+			variables: key.variables?.join(", ") ?? ""
+		};
+	}
+	onSubmit() {
+		if (!this.isFormValid()) return;
+		this.isSaving.set(true);
+		const model = this.formModel();
+		const variables = model.variables.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+		if (this.isEditMode()) this.updateKey(model, variables);
+		else this.createKey(model, variables);
+	}
+	createKey(model, variables) {
+		const createDto = {
+			key: model.key,
+			module: model.module,
+			defaultMessage: model.defaultMessage,
+			description: model.description || void 0,
+			variables: variables.length > 0 ? variables : void 0
+		};
+		from(this.translationKeyService.insert(createDto)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (response) => {
+				if (response.success && response.data) this.saveTranslations(response.data.id, response.messageKey, response.messageVariables);
+				else this.isSaving.set(false);
+			},
+			error: () => this.isSaving.set(false)
+		});
+	}
+	updateKey(model, variables) {
+		const updateDto = {
+			id: this.existingKey().id,
+			key: model.key,
+			module: model.module,
+			defaultMessage: model.defaultMessage,
+			description: model.description || void 0,
+			variables: variables.length > 0 ? variables : void 0
+		};
+		from(this.translationKeyService.update(updateDto)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (response) => {
+				if (response.success) this.saveTranslations(this.existingKey().id, response.messageKey, response.messageVariables);
+				else this.isSaving.set(false);
+			},
+			error: () => this.isSaving.set(false)
+		});
+	}
+	saveTranslations(keyId, messageKey, messageVariables) {
+		const translationsToSave = this.translations().filter((t) => t.value?.trim()).map((t) => ({
+			id: t.translationId,
+			languageId: t.languageId,
+			translationKeyId: keyId,
+			value: t.value,
+			isVerified: false
+		}));
+		if (translationsToSave.length === 0) {
+			this.onSaveSuccess(messageKey, messageVariables);
+			return;
+		}
+		this.translationService.bulkUpdate(translationsToSave).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: () => this.onSaveSuccess(messageKey, messageVariables),
+			error: () => this.onSaveSuccess(messageKey, messageVariables)
+		});
+	}
+	onSaveSuccess(messageKey, messageVariables) {
+		this.messageService.add({
+			severity: "success",
+			summary: this.translate("shared.success"),
+			detail: messageKey ? this.translate(messageKey, messageVariables) : ""
+		});
+		this.isSaving.set(false);
+		this.router.navigate(["/localization/keys"]);
+	}
+	onCancel() {
+		this.router.navigate(["/localization/keys"]);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: TranslationKeyFormPage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: TranslationKeyFormPage,
+		isStandalone: true,
+		selector: "lib-translation-key-form-page",
+		providers: [MessageService],
+		ngImport: i0,
+		template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('localization.key.edit' | translate)
+                : ('localization.key.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form (ngSubmit)="onSubmit()" class="flex flex-col gap-6">
+        <!-- Key Info Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.about' | translate }}
+          </h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Key Name -->
+            <div class="flex flex-col gap-2">
+              <label for="key" class="font-medium"
+                >{{ 'localization.key.name' | translate }} *</label
+              >
+              <input
+                fInputText
+                id="key"
+                [formField]="formTree.key"
+                [placeholder]="'localization.placeholder.key.name' | translate"
+              />
+            </div>
+
+            <!-- Module -->
+            <div class="flex flex-col gap-2">
+              <label for="module" class="font-medium"
+                >{{ 'localization.key.module' | translate }} *</label
+              >
+              <f-select
+                id="module"
+                [ngModel]="formModel().module"
+                (ngModelChange)="updateModule($event)"
+                [ngModelOptions]="{ standalone: true }"
+                [options]="moduleOptions()"
+                optionLabel="label"
+                optionValue="value"
+                [editable]="true"
+                [disabled]="isReadonly()"
+                [placeholder]="'localization.key.select.module' | translate"
+                class="w-full"
+              />
+            </div>
+
+            @if (isReadonly()) {
+              <div class="md:col-span-2 -mt-2">
+                <small class="text-muted-color">{{
+                  'localization.key.readonly.edit.hint' | translate
+                }}</small>
+              </div>
+            }
+
+            <!-- Default Message -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="defaultMessage" class="font-medium"
+                >{{ 'localization.key.default.message' | translate }} *</label
+              >
+              <textarea
+                fTextarea
+                id="defaultMessage"
+                [formField]="formTree.defaultMessage"
+                [rows]="2"
+                [placeholder]="
+                  'localization.placeholder.default.message' | translate
+                "
+              ></textarea>
+            </div>
+
+            <!-- Description -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="description" class="font-medium">{{
+                'localization.key.description' | translate
+              }}</label>
+              <input
+                fInputText
+                id="description"
+                [formField]="formTree.description"
+                [placeholder]="
+                  'localization.placeholder.key.description' | translate
+                "
+              />
+            </div>
+
+            <!-- Variables -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="variables" class="font-medium">{{
+                'localization.key.variables' | translate
+              }}</label>
+              <input
+                fInputText
+                id="variables"
+                [formField]="formTree.variables"
+                [placeholder]="
+                  'localization.key.variables.placeholder' | translate
+                "
+              />
+              <small class="text-muted-color">{{
+                'localization.key.variables.hint' | translate
+              }}</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Translations Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.translations.section' | translate }}
+          </h4>
+          @if (isLoadingLanguages()) {
+            <div class="flex justify-center py-4">
+              <f-progressspinner strokeWidth="4" />
+            </div>
+          } @else if (languages().length === 0) {
+            <p class="text-muted-color text-center py-4">
+              {{ 'localization.key.no.languages' | translate }}
+            </p>
+          } @else {
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              @for (lang of languages(); track lang.id) {
+                <div class="flex flex-col gap-2">
+                  <div class="flex justify-between items-center">
+                    <label class="font-medium">
+                      {{ lang.name }}
+                      @if (lang.nativeName && lang.nativeName !== lang.name) {
+                        <span class="text-muted-color"
+                          >({{ lang.nativeName }})</span
+                        >
+                      }
+                    </label>
+                    <f-tag
+                      [value]="lang.code"
+                      severity="secondary"
+                      class="uppercase"
+                    />
+                  </div>
+                  <textarea
+                    fTextarea
+                    [ngModel]="getTranslationValue(lang.id)"
+                    (ngModelChange)="setTranslationValue(lang.id, $event)"
+                    [ngModelOptions]="{ standalone: true }"
+                    [rows]="2"
+                    [placeholder]="
+                      formModel().defaultMessage ||
+                      ('localization.key.enter.translation' | translate)
+                    "
+                  ></textarea>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isSaving()"
+          >
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: CardComponent,
+				selector: "f-card",
+				inputs: [
+					"header",
+					"subheader",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputTextDirective,
+				selector: "[fInputText]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"size",
+					"fluid"
+				]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "directive",
+				type: TextareaDirective,
+				selector: "[fTextarea]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"fluid",
+					"autoResize"
+				],
+				outputs: ["onResize"]
+			},
+			{
+				kind: "component",
+				type: ProgressSpinnerComponent,
+				selector: "f-progressspinner",
+				inputs: [
+					"size",
+					"strokeWidth",
+					"animationDuration",
+					"styleClass",
+					"ariaLabel"
+				]
+			},
+			{
+				kind: "component",
+				type: TagComponent,
+				selector: "f-tag",
+				inputs: [
+					"value",
+					"severity",
+					"icon",
+					"rounded",
+					"color",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TranslationKeyFormPage,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-translation-key-form-page",
+			imports: [
+				CardComponent,
+				InputTextDirective,
+				SelectComponent,
+				TextareaDirective,
+				ProgressSpinnerComponent,
+				TagComponent,
+				FButtonDirective,
+				UiIconComponent,
+				FormsModule,
+				FormField,
+				TranslatePipe
+			],
+			providers: [MessageService],
+			template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('localization.key.edit' | translate)
+                : ('localization.key.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form (ngSubmit)="onSubmit()" class="flex flex-col gap-6">
+        <!-- Key Info Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.about' | translate }}
+          </h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Key Name -->
+            <div class="flex flex-col gap-2">
+              <label for="key" class="font-medium"
+                >{{ 'localization.key.name' | translate }} *</label
+              >
+              <input
+                fInputText
+                id="key"
+                [formField]="formTree.key"
+                [placeholder]="'localization.placeholder.key.name' | translate"
+              />
+            </div>
+
+            <!-- Module -->
+            <div class="flex flex-col gap-2">
+              <label for="module" class="font-medium"
+                >{{ 'localization.key.module' | translate }} *</label
+              >
+              <f-select
+                id="module"
+                [ngModel]="formModel().module"
+                (ngModelChange)="updateModule($event)"
+                [ngModelOptions]="{ standalone: true }"
+                [options]="moduleOptions()"
+                optionLabel="label"
+                optionValue="value"
+                [editable]="true"
+                [disabled]="isReadonly()"
+                [placeholder]="'localization.key.select.module' | translate"
+                class="w-full"
+              />
+            </div>
+
+            @if (isReadonly()) {
+              <div class="md:col-span-2 -mt-2">
+                <small class="text-muted-color">{{
+                  'localization.key.readonly.edit.hint' | translate
+                }}</small>
+              </div>
+            }
+
+            <!-- Default Message -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="defaultMessage" class="font-medium"
+                >{{ 'localization.key.default.message' | translate }} *</label
+              >
+              <textarea
+                fTextarea
+                id="defaultMessage"
+                [formField]="formTree.defaultMessage"
+                [rows]="2"
+                [placeholder]="
+                  'localization.placeholder.default.message' | translate
+                "
+              ></textarea>
+            </div>
+
+            <!-- Description -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="description" class="font-medium">{{
+                'localization.key.description' | translate
+              }}</label>
+              <input
+                fInputText
+                id="description"
+                [formField]="formTree.description"
+                [placeholder]="
+                  'localization.placeholder.key.description' | translate
+                "
+              />
+            </div>
+
+            <!-- Variables -->
+            <div class="flex flex-col gap-2 md:col-span-2">
+              <label for="variables" class="font-medium">{{
+                'localization.key.variables' | translate
+              }}</label>
+              <input
+                fInputText
+                id="variables"
+                [formField]="formTree.variables"
+                [placeholder]="
+                  'localization.key.variables.placeholder' | translate
+                "
+              />
+              <small class="text-muted-color">{{
+                'localization.key.variables.hint' | translate
+              }}</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Translations Section -->
+        <div class="p-4 surface-ground rounded-lg">
+          <h4 class="font-semibold mt-0 mb-4">
+            {{ 'localization.key.translations.section' | translate }}
+          </h4>
+          @if (isLoadingLanguages()) {
+            <div class="flex justify-center py-4">
+              <f-progressspinner strokeWidth="4" />
+            </div>
+          } @else if (languages().length === 0) {
+            <p class="text-muted-color text-center py-4">
+              {{ 'localization.key.no.languages' | translate }}
+            </p>
+          } @else {
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              @for (lang of languages(); track lang.id) {
+                <div class="flex flex-col gap-2">
+                  <div class="flex justify-between items-center">
+                    <label class="font-medium">
+                      {{ lang.name }}
+                      @if (lang.nativeName && lang.nativeName !== lang.name) {
+                        <span class="text-muted-color"
+                          >({{ lang.nativeName }})</span
+                        >
+                      }
+                    </label>
+                    <f-tag
+                      [value]="lang.code"
+                      severity="secondary"
+                      class="uppercase"
+                    />
+                  </div>
+                  <textarea
+                    fTextarea
+                    [ngModel]="getTranslationValue(lang.id)"
+                    (ngModelChange)="setTranslationValue(lang.id, $event)"
+                    [ngModelOptions]="{ standalone: true }"
+                    [rows]="2"
+                    [placeholder]="
+                      formModel().defaultMessage ||
+                      ('localization.key.enter.translation' | translate)
+                    "
+                  ></textarea>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="onCancel()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isSaving()"
+          >
+            @if (isSaving()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </f-card>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { TranslationKeyFormPage };
+
+//# sourceMappingURL=flusys-ng-localization-translation-key-form.page-Dgn58Sh7.mjs.map