Refactor country and language components: replace effect with computed for flag derivation

The selectedFlag was a writable signal updated via effect(), but it's purely derived
from the form control value — computed() is the correct primitive here.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: gugu

frontend/src/app/components/ui-components/record-edit-fields/country/country.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, computed, effect, Input, signal } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, computed, Input } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -26,7 +26,13 @@ export class CountryEditComponent extends BaseEditFieldComponent {
 
 	public countries: CountryOption[] = [];
 	public countryControl = new FormControl<CountryOption | string>('');
-	public selectedCountryFlag = signal('');
+	public selectedCountryFlag = computed(() => {
+		const value = this._controlValue();
+		if (typeof value === 'object' && value !== null) {
+			return value.flag;
+		}
+		return '';
+	});
 
 	public showFlag = computed(() => {
 		if (this.widgetStructure?.widget_params) {
@@ -59,18 +65,6 @@ export class CountryEditComponent extends BaseEditFieldComponent {
 
 	getCountryFlag = getCountryFlag;
 
-	constructor() {
-		super();
-		effect(() => {
-			const value = this._controlValue();
-			if (typeof value === 'object' && value !== null) {
-				this.selectedCountryFlag.set(value.flag);
-			} else if (typeof value === 'string') {
-				this.selectedCountryFlag.set('');
-			}
-		});
-	}
-
 	ngOnInit(): void {
 		super.ngOnInit();
 		this.loadCountries();
@@ -79,7 +73,6 @@ export class CountryEditComponent extends BaseEditFieldComponent {
 
 	onCountrySelected(selectedCountry: CountryOption): void {
 		this.value = selectedCountry.value;
-		this.selectedCountryFlag.set(selectedCountry.flag);
 		this.onFieldChange.emit(this.value);
 	}
 
@@ -93,7 +86,6 @@ export class CountryEditComponent extends BaseEditFieldComponent {
 			const country = this.countries.find((c) => c.value === this.value);
 			if (country) {
 				this.countryControl.setValue(country);
-				this.selectedCountryFlag.set(country.flag);
 			}
 		}
 	}

frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, computed, effect, input, OnInit, output, signal } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, computed, input, OnInit, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -51,7 +51,13 @@ export class LanguageEditComponent implements OnInit {
 
 	public languages: LanguageOption[] = [];
 	public languageControl = new FormControl<LanguageOption | string>('');
-	public selectedLanguageFlag = signal('');
+	public selectedLanguageFlag = computed(() => {
+		const value = this._controlValue();
+		if (typeof value === 'object' && value !== null) {
+			return value.flag;
+		}
+		return '';
+	});
 
 	private _controlValue = toSignal(this.languageControl.valueChanges, { initialValue: '' as LanguageOption | string });
 
@@ -64,17 +70,6 @@ export class LanguageEditComponent implements OnInit {
 		return 0;
 	};
 
-	constructor() {
-		effect(() => {
-			const value = this._controlValue();
-			if (typeof value === 'object' && value !== null) {
-				this.selectedLanguageFlag.set(value.flag);
-			} else if (typeof value === 'string') {
-				this.selectedLanguageFlag.set('');
-			}
-		});
-	}
-
 	ngOnInit(): void {
 		this.loadLanguages();
 		this.setInitialValue();
@@ -86,7 +81,6 @@ export class LanguageEditComponent implements OnInit {
 	}
 
 	onLanguageSelected(selectedLanguage: LanguageOption): void {
-		this.selectedLanguageFlag.set(selectedLanguage.flag);
 		this.onFieldChange.emit(selectedLanguage.value);
 	}
 
@@ -96,7 +90,6 @@ export class LanguageEditComponent implements OnInit {
 			const language = this.languages.find((l) => l.value && l.value.toLowerCase() === val.toLowerCase());
 			if (language) {
 				this.languageControl.setValue(language);
-				this.selectedLanguageFlag.set(language.flag);
 			}
 		}
 	}