umb-localize: add support to forward args to localize controller using default converter to Array

src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.test.ts

@@ -1,4 +1,4 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { UmbLocalizeElement } from './localize.element.js';
 
 import '@umbraco-cms/backoffice/context-api';
@@ -15,6 +15,14 @@ const english = {
 			general: {
 				close: 'Close',
 				logout: 'Log out',
+				numUsersSelected: (count: number) => {
+					if (count === 0) return 'No users selected';
+					if (count === 1) return 'One user selected';
+					return `${count} users selected`;
+				},
+				moreThanOneArgument: (arg1: string, arg2: string) => {
+					return `${arg1} ${arg2}`;
+				},
 			},
 		},
 	},
@@ -50,16 +58,49 @@ describe('umb-localize', () => {
 		umbExtensionsRegistry.register(danish);
 		const translationRegistry = new UmbTranslationRegistry(umbExtensionsRegistry);
 		translationRegistry.loadLanguage(english.meta.culture);
-		translationRegistry.loadLanguage(danish.meta.culture);
 
 		beforeEach(async () => {
-			element = await fixture(html`<umb-localize key="general_close"></umb-localize>`);
+			element = await fixture(html`<umb-localize key="general_close">Fallback value</umb-localize>`);
 		});
 
 		it('should localize a key', async () => {
 			expect(element.shadowRoot?.innerHTML).to.contain('Close');
 		});
 
+		it('should localize a key with arguments', async () => {
+			element.key = 'general_numUsersSelected';
+			element.args = [0];
+			await elementUpdated(element);
+
+			expect(element.shadowRoot?.innerHTML).to.contain('No users selected');
+
+			element.args = [1];
+			await elementUpdated(element);
+
+			expect(element.shadowRoot?.innerHTML).to.contain('One user selected');
+
+			element.args = [2];
+			await elementUpdated(element);
+
+			expect(element.shadowRoot?.innerHTML).to.contain('2 users selected');
+		});
+
+		it('should localize a key with multiple arguments', async () => {
+			element.key = 'general_moreThanOneArgument';
+			element.args = ['Hello', 'World'];
+			await elementUpdated(element);
+
+			expect(element.shadowRoot?.innerHTML).to.contain('Hello World');
+		});
+
+		it('should localize a key with args as an attribute', async () => {
+			element.key = 'general_moreThanOneArgument';
+			element.setAttribute('args', '["Hello","World"]');
+			await elementUpdated(element);
+
+			expect(element.shadowRoot?.innerHTML).to.contain('Hello World');
+		});
+
 		it('should change the value if a new key is set', async () => {
 			expect(element.shadowRoot?.innerHTML).to.contain('Close');
 
@@ -72,7 +113,8 @@ describe('umb-localize', () => {
 		it('should change the value if the language is changed', async () => {
 			expect(element.shadowRoot?.innerHTML).to.contain('Close');
 
-			element.lang = danish.meta.culture;
+			translationRegistry.loadLanguage(danish.meta.culture);
+			await aTimeout(0);
 			await elementUpdated(element);
 
 			expect(element.shadowRoot?.innerHTML).to.contain('Luk');
@@ -83,9 +125,18 @@ describe('umb-localize', () => {
 			await elementUpdated(element);
 
 			expect(element.shadowRoot?.innerHTML).to.contain('<slot></slot>');
+		});
+
+		it('should toggle a data attribute', async () => {
+			element.key = 'non-existing-key';
+			await elementUpdated(element);
 
-			// It should also have a data attribute to indicate that the key was not found:
 			expect(element.getAttribute('data-localize-missing')).to.equal('non-existing-key');
+
+			element.key = 'general_close';
+			await elementUpdated(element);
+
+			expect(element.hasAttribute('data-localize-missing')).to.equal(false);
 		});
 
 		it('should use the key if debug is enabled and translation is not found', async () => {

src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts

@@ -13,9 +13,19 @@ export class UmbLocalizeElement extends UmbLitElement {
 	 * @attr
 	 * @example key="general_ok"
 	 */
-	@property({ type: String })
+	@property()
 	key!: string;
 
+	/**
+	 * The comma-separated values to forward to the localization function.
+	 * @attr
+	 * @example args="[1,2,3]"
+	 */
+	@property({
+		type: Array,
+	})
+	args?: unknown[];
+
 	/**
 	 * If true, the key will be rendered instead of the localized value if the key is not found.
 	 * @attr
@@ -25,7 +35,7 @@ export class UmbLocalizeElement extends UmbLitElement {
 
 	@state()
 	get text(): string {
-		const localizedValue = this.localize.term(this.key);
+		const localizedValue = this.localize.term(this.key, ...(this.args ?? []));
 
 		// If the value is the same as the key, it means the key was not found.
 		if (localizedValue === this.key) {