diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts index aa672fc77603..7b87f756d1a4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts @@ -12,6 +12,16 @@ export const manifests: Array = [ 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, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts index 7d75fb8a76c1..90f59bf98a45 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts +++ b/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 { - @property() - value = ''; + @state() + private _labelTemplate?: string; @property() - description = ''; + value = ''; @property({ attribute: false }) - public config?: UmbPropertyEditorConfigCollection; + public set config(config: UmbPropertyEditorConfigCollection | undefined) { + this._labelTemplate = config?.getValueByAlias('labelTemplate'); + } override render() { - return html`${this.value ?? ''}`; + return when( + this._labelTemplate?.length, + () => html``, + () => html`${this.value ?? ''}`, + ); } - - static override styles = [UmbTextStyles]; } export default UmbPropertyEditorUILabelElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts new file mode 100644 index 000000000000..2aacfb3e1f1b --- /dev/null +++ b/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 }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts index 1e08fa9f26f3..eb12e0643c27 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts @@ -8,6 +8,13 @@ export const manifests: Array = [ 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',