Label property-editor, adds UFM template support (#19610)

* Adds `labelTemplate` config to Label editor

* Code tidyup for Label editor element

* Adds "format-bytes" UFM filter

* Renamed "format-bytes" to "bytes"

* Label element tidy-up + copilot amends

* Added `formatBytes` options

* Simplified condition, thanks CodeScene

* Reverted element export

src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts

@@ -12,6 +12,16 @@ export const manifests: Array<UmbExtensionManifest> = [
 			group: 'common',
 			propertyEditorSchemaAlias: 'Umbraco.Label',
 			supportsReadOnly: true,
+			settings: {
+				properties: [
+					{
+						alias: 'labelTemplate',
+						label: 'Label template',
+						description: 'Enter a template for the label.',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+					},
+				],
+			},
 		},
 	},
 	labelSchemaManifest,

src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts

@@ -1,30 +1,33 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type {
 	UmbPropertyEditorUiElement,
 	UmbPropertyEditorConfigCollection,
 } from '@umbraco-cms/backoffice/property-editor';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 /**
  * @element umb-property-editor-ui-label
  */
 @customElement('umb-property-editor-ui-label')
 export class UmbPropertyEditorUILabelElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	@state()
+	private _labelTemplate?: string;
+
 	@property()
 	value = '';
 
-	@property()
-	description = '';
-
 	@property({ attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
-
-	override render() {
-		return html`${this.value ?? ''}`;
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		this._labelTemplate = config?.getValueByAlias('labelTemplate');
 	}
 
-	static override styles = [UmbTextStyles];
+	override render() {
+		return when(
+			this._labelTemplate?.length,
+			() => html`<umb-ufm-render inline .markdown=${this._labelTemplate} .value=${this.value}></umb-ufm-render>`,
+			() => html`${this.value ?? ''}`,
+		);
+	}
 }
 
 export default UmbPropertyEditorUILabelElement;

src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts

@@ -0,0 +1,11 @@
+import { UmbUfmFilterBase } from './base.filter.js';
+import { formatBytes } from '@umbraco-cms/backoffice/utils';
+
+class UmbUfmBytesFilterApi extends UmbUfmFilterBase {
+	filter(str?: string, decimals?: number, kilo?: number, culture?: string): string {
+		if (!str?.length) return '';
+		return formatBytes(Number(str), { decimals, kilo, culture });
+	}
+}
+
+export { UmbUfmBytesFilterApi as api };

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

@@ -8,6 +8,13 @@ export const manifests: Array<ManifestUfmFilter> = [
 		api: () => import('./fallback.filter.js'),
 		meta: { alias: 'fallback' },
 	},
+	{
+		type: 'ufmFilter',
+		alias: 'Umb.Filter.Bytes',
+		name: 'Bytes UFM Filter',
+		api: () => import('./bytes.filter.js'),
+		meta: { alias: 'bytes' },
+	},
 	{
 		type: 'ufmFilter',
 		alias: 'Umb.Filter.Lowercase',