UFM: Add umbElementName component

src/Umbraco.Web.UI.Client/src/packages/elements/item/index.ts

@@ -1 +1,2 @@
 export { UmbElementItemRepository } from './repository/index.js';
+export * from './data-resolver/element-item-data-resolver.js';

src/Umbraco.Web.UI.Client/src/packages/ufm/components/element-name/element-name.component.ts

@@ -0,0 +1,14 @@
+import type { UfmToken } from '../../plugins/types.js';
+import { UmbUfmComponentBase } from '../ufm-component-base.js';
+
+import './element-name.element.js';
+
+export class UmbUfmElementNameComponent extends UmbUfmComponentBase {
+	render(token: UfmToken) {
+		if (!token.text) return;
+		const attributes = super.getAttributes(token.text);
+		return `<ufm-element-name ${attributes}></ufm-element-name>`;
+	}
+}
+
+export { UmbUfmElementNameComponent as api };

src/Umbraco.Web.UI.Client/src/packages/ufm/components/element-name/element-name.element.ts

@@ -0,0 +1,68 @@
+import { UmbUfmElementBase } from '../ufm-element-base.js';
+import { UMB_UFM_RENDER_CONTEXT } from '../ufm-render/ufm-render.context.js';
+import { customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementItemDataResolver, UmbElementItemRepository } from '@umbraco-cms/backoffice/element';
+import { UmbId } from '@umbraco-cms/backoffice/id';
+
+@customElement('ufm-element-name')
+export class UmbUfmElementNameElement extends UmbUfmElementBase {
+	#repository?: UmbElementItemRepository;
+
+	@property()
+	alias?: string;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_UFM_RENDER_CONTEXT, (context) => {
+			this.observe(
+				context?.value,
+				async (value) => {
+					const temp =
+						this.alias && typeof value === 'object'
+							? (value as Record<string, unknown>)[this.alias]
+							: (value as unknown);
+
+					if (!temp) return;
+
+					const uniques = this.#getUniques(temp);
+					this.value = await this.#getNames(uniques);
+				},
+				'observeValue',
+			);
+		});
+	}
+
+	#getUniques(value: unknown) {
+		if (Array.isArray(value)) {
+			return value.map((x) => x.unique ?? x).filter((x) => UmbId.validate(x));
+		}
+		return typeof value === 'string' && UmbId.validate(value) ? [value] : [];
+	}
+
+	async #getNames(uniques?: Array<string>) {
+		if (uniques?.length) {
+			if (!this.#repository) this.#repository = new UmbElementItemRepository(this);
+			const { data } = await this.#repository.requestItems(uniques);
+
+			if (Array.isArray(data) && data.length > 0) {
+				const namePromises = data.map(async (item) => {
+					const resolver = new UmbElementItemDataResolver(this);
+					resolver.setData(item);
+					return await resolver.getName();
+				});
+				const names = await Promise.all(namePromises);
+				return names.join(', ');
+			}
+		}
+		return '';
+	}
+}
+
+export { UmbUfmElementNameElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'ufm-element-name': UmbUfmElementNameElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/ufm/components/element-name/manifests.ts

@@ -0,0 +1,11 @@
+import type { ManifestUfmComponent } from '../../extensions/ufm-component.extension.js';
+
+export const manifests: Array<ManifestUfmComponent> = [
+	{
+		type: 'ufmComponent',
+		alias: 'Umb.Markdown.ElementName',
+		name: 'Element Name UFM Component',
+		api: () => import('./element-name.component.js'),
+		meta: { alias: 'umbElementName' },
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/ufm/components/manifests.ts

@@ -1,4 +1,5 @@
 import type { ManifestUfmComponent } from '../extensions/ufm-component.extension.js';
+import { manifests as elementNameManifests } from './element-name/manifests.js';
 
 export const manifests: Array<ManifestUfmComponent> = [
 	{
@@ -22,6 +23,7 @@ export const manifests: Array<ManifestUfmComponent> = [
 		api: () => import('./content-name/content-name.component.js'),
 		meta: { alias: 'umbContentName' },
 	},
+	...elementNameManifests,
 	{
 		type: 'ufmComponent',
 		alias: 'Umb.Markdown.Link',