Fix: #18272 (#18300)

* only localize if string

* better types of localize string

* test for string update

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts

@@ -298,8 +298,8 @@ describe('UmbLocalizeController', () => {
 		});
 
 		it('should return an empty string if the input is not a string', async () => {
-			expect(controller.string(123)).to.equal('');
-			expect(controller.string({})).to.equal('');
+			expect(controller.string(123 as any)).to.equal('');
+			expect(controller.string({} as any)).to.equal('');
 			expect(controller.string(undefined)).to.equal('');
 		});
 
@@ -338,5 +338,15 @@ describe('UmbLocalizeController', () => {
 			await elementUpdated(element);
 			expect(element.localize.term('close')).to.equal('Luk');
 		});
+
+		it('should update the string when the language changes', async () => {
+			expect(element.localize.string('testing #close')).to.equal('testing Close');
+
+			// Switch browser to Danish
+			element.lang = danishRegional.$code;
+
+			await elementUpdated(element);
+			expect(element.localize.string('testing #close')).to.equal('testing Luk');
+		});
 	});
 });

src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts

@@ -190,11 +190,11 @@ export class UmbLocalizationController<LocalizationSetType extends UmbLocalizati
 	 * Translates a string containing one or more terms. The terms should be prefixed with a `#` character.
 	 * If the term is found in the localization set, it will be replaced with the localized term.
 	 * If the term is not found, the original term will be returned.
-	 * @param {string} text The text to translate.
+	 * @param {string | null | undefined} text The text to translate.
 	 * @param {...any} args The arguments to parse for this localization entry.
 	 * @returns {string} The translated text.
 	 */
-	string(text: unknown, ...args: any): string {
+	string(text: string | null | undefined, ...args: any): string {
 		if (typeof text !== 'string') {
 			return '';
 		}
@@ -204,6 +204,9 @@ export class UmbLocalizationController<LocalizationSetType extends UmbLocalizati
 
 		const localizedText = text.replace(regex, (match: string) => {
 			const key = match.slice(1);
+			if (!this.#usedKeys.includes(key)) {
+				this.#usedKeys.push(key);
+			}
 
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.element.ts

@@ -22,7 +22,9 @@ export class UmbConfirmModalElement extends UmbLitElement {
 	override render() {
 		return html`
 			<uui-dialog-layout class="uui-text" .headline=${this.localize.string(this.data?.headline) ?? null}>
-				${unsafeHTML(this.localize.string(this.data?.content))}
+				${typeof this.data?.content === 'string'
+					? unsafeHTML(this.localize.string(this.data?.content))
+					: this.data?.content}
 
 				<uui-button
 					slot="actions"