Merge branch 'main' into feature/create-new-from-tree-picker

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.ts

@@ -18,6 +18,7 @@ export const manifest: ManifestPropertyEditorSchema = {
 					alias: 'validationLimit',
 					label: 'Amount',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
+					config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
 				},
 			],
 			defaultData: [

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts

@@ -44,6 +44,7 @@ export const manifests: Array<ManifestTypes> = [
 						label: 'Grid Columns',
 						description: 'Set the number of columns for the layout. (defaults to 12)',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+						config: [{ alias: 'min', value: 0 }],
 					},
 					{
 						alias: 'layoutStylesheet',

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts

@@ -19,6 +19,7 @@ export const manifest: ManifestPropertyEditorSchema = {
 					label: 'Amount',
 					description: 'Set a required range of blocks',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
+					config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
 				},
 			],
 		},

src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts

@@ -1,6 +1,8 @@
+import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
-import { html, customElement, property, state, type PropertyValueMap, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
 
 function getNumberOrUndefined(value: string) {
@@ -40,6 +42,9 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 		return this._maxValue;
 	}
 
+	@property({ type: Object })
+	validationRange?: NumberRangeValueType;
+
 	private updateValue() {
 		const newValue =
 			this._minValue || this._maxValue ? (this._minValue ?? '') + ',' + (this._maxValue ?? '') : undefined;
@@ -78,8 +83,7 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 		);
 	}
 
-	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-		super.firstUpdated(_changedProperties);
+	firstUpdated() {
 		this.shadowRoot?.querySelectorAll<UUIInputElement>('uui-input').forEach((x) => this.addFormControlElement(x));
 	}
 
@@ -87,31 +91,38 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 		return this.shadowRoot?.querySelector<UUIInputElement>('uui-input')?.focus();
 	}
 
-	private _onMinInput(e: InputEvent) {
-		const value = Number((e.target as HTMLInputElement).value);
+	#onMinInput(e: InputEvent & { target: HTMLInputElement }) {
+		const value = e.target.value;
 		this.minValue = value ? Number(value) : undefined;
-		this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+		this.dispatchEvent(new UmbChangeEvent());
 	}
 
-	private _onMaxInput(e: InputEvent) {
-		const value = (e.target as HTMLInputElement).value;
+	#onMaxInput(e: InputEvent & { target: HTMLInputElement }) {
+		const value = e.target.value;
 		this.maxValue = value ? Number(value) : undefined;
-		this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	render() {
-		return html`<uui-input
+		return html`
+			<uui-input
 				type="number"
+				label=${this.minLabel}
+				min=${ifDefined(this.validationRange?.min)}
+				max=${ifDefined(this.validationRange?.max)}
+				placeholder=${this.validationRange?.min ?? ''}
 				.value=${this._minValue}
-				@input=${this._onMinInput}
-				label=${this.minLabel}></uui-input>
+				@input=${this.#onMinInput}></uui-input>
 			<b>–</b>
 			<uui-input
 				type="number"
-				.value=${this._maxValue}
-				@input=${this._onMaxInput}
 				label=${this.maxLabel}
-				placeholder="&infin;"></uui-input>`;
+				min=${ifDefined(this.validationRange?.min)}
+				max=${ifDefined(this.validationRange?.max)}
+				placeholder=${this.validationRange?.max === Infinity ? '∞' : this.validationRange?.max ?? ''}
+				.value=${this._maxValue}
+				@input=${this.#onMaxInput}></uui-input>
+		`;
 	}
 
 	static styles = css`

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

@@ -140,6 +140,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 					(icon) => html`
 						<uui-button
 							label="${icon.name}"
+							title="${icon.name}"
 							class="${icon.name === this._currentIcon ? 'selected' : ''}"
 							@click="${this.#changeIcon}"
 							@keyup="${this.#changeIcon}">

src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts

@@ -1,8 +1,8 @@
 import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type-workspace.context-token.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UMB_MODAL_MANAGER_CONTEXT, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+import { css, customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_MODAL_MANAGER_CONTEXT, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-data-type-details-workspace-view')
@@ -19,35 +19,35 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 	@state()
 	private _propertyEditorSchemaAlias?: string | null = null;
 
-	private _workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
+	#workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
 
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (_instance) => {
-			this._workspaceContext = _instance;
-			this._observeDataType();
+		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#workspaceContext = workspaceContext;
+			this.#observeDataType();
 		});
 	}
 
-	private _observeDataType() {
-		if (!this._workspaceContext) {
+	#observeDataType() {
+		if (!this.#workspaceContext) {
 			return;
 		}
 
-		this.observe(this._workspaceContext.propertyEditorUiAlias, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorUiAlias, (value) => {
 			this._propertyEditorUiAlias = value;
 		});
 
-		this.observe(this._workspaceContext.propertyEditorSchemaAlias, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorSchemaAlias, (value) => {
 			this._propertyEditorSchemaAlias = value;
 		});
 
-		this.observe(this._workspaceContext.propertyEditorUiName, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorUiName, (value) => {
 			this._propertyEditorUiName = value;
 		});
 
-		this.observe(this._workspaceContext.propertyEditorUiIcon, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorUiIcon, (value) => {
 			this._propertyEditorUiIcon = value;
 		});
 	}
@@ -63,53 +63,60 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 			.onSubmit()
 			.catch(() => undefined);
 
-		this._workspaceContext?.setPropertyEditorUiAlias(value?.selection[0]);
+		if (value) {
+			this.#workspaceContext?.setPropertyEditorUiAlias(value.selection[0]);
+		}
 	}
 
 	render() {
 		return html`
-			<uui-box> ${this.#renderPropertyEditorReference()} </uui-box>
-			${this.#renderPropertyEditorConfig()} </uui-box>
+			<uui-box>
+				<umb-property-layout label="Property Editor" description=${this.localize.term('propertyEditorPicker_title')}>
+					${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
+						? this.#renderPropertyEditorReference()
+						: this.#renderChooseButton()}
+				</umb-property-layout>
+			</uui-box>
+			<uui-box headline=${this.localize.term('general_settings')}>
+				<umb-property-editor-config></umb-property-editor-config>
+			</uui-box>
+		`;
+	}
+
+	#renderChooseButton() {
+		return html`
+			<uui-button
+				slot="editor"
+				id="btn-add"
+				label=${this.localize.term('propertyEditorPicker_title')}
+				look="placeholder"
+				color="default"
+				@click=${this.#openPropertyEditorUIPicker}></uui-button>
 		`;
 	}
 
 	#renderPropertyEditorReference() {
+		if (!this._propertyEditorUiAlias || !this._propertyEditorSchemaAlias) return nothing;
 		return html`
-			<umb-property-layout label="Property Editor" description="Select a property editor">
-				${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
-					? html`
-							<umb-ref-property-editor-ui
-								slot="editor"
-								name=${this._propertyEditorUiName ?? ''}
-								alias=${this._propertyEditorUiAlias}
-								property-editor-schema-alias=${this._propertyEditorSchemaAlias}
-								standalone>
-								${this._propertyEditorUiIcon
-									? html` <umb-icon name="${this._propertyEditorUiIcon}" slot="icon"></umb-icon> `
-									: ''}
-								<uui-action-bar slot="actions">
-									<uui-button label="Change" @click=${this.#openPropertyEditorUIPicker}></uui-button>
-								</uui-action-bar>
-							</umb-ref-property-editor-ui>
-						`
-					: html`
-							<uui-button
-								slot="editor"
-								label="Select Property Editor"
-								look="placeholder"
-								color="default"
-								@click=${this.#openPropertyEditorUIPicker}></uui-button>
-						`}
-			</umb-property-layout>
+			<umb-ref-property-editor-ui
+				slot="editor"
+				name=${this._propertyEditorUiName ?? ''}
+				alias=${this._propertyEditorUiAlias}
+				property-editor-schema-alias=${this._propertyEditorSchemaAlias}
+				standalone
+				@open=${this.#openPropertyEditorUIPicker}>
+				${this._propertyEditorUiIcon
+					? html`<umb-icon name=${this._propertyEditorUiIcon} slot="icon"></umb-icon>`
+					: nothing}
+				<uui-action-bar slot="actions">
+					<uui-button
+						label=${this.localize.term('general_change')}
+						@click=${this.#openPropertyEditorUIPicker}></uui-button>
+				</uui-action-bar>
+			</umb-ref-property-editor-ui>
 		`;
 	}
 
-	#renderPropertyEditorConfig() {
-		return html`<uui-box headline="Settings">
-			<umb-property-editor-config></umb-property-editor-config>
-		</uui-box> `;
-	}
-
 	static styles = [
 		UmbTextStyles,
 		css`
@@ -122,6 +129,10 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 			uui-box {
 				margin-top: var(--uui-size-layout-1);
 			}
+
+			#btn-add {
+				display: block;
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts

@@ -116,13 +116,13 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 					</div>
 					<div class="input">
 						<uui-label for="width">Width</uui-label>
-						<uui-input label="Width" id="width" name="width" type="number" autocomplete="false" value="">
+						<uui-input label="Width" id="width" name="width" type="number" autocomplete="false" value="" min="0">
 							<span class="append" slot="append">px</span>
 						</uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="height">Height</uui-label>
-						<uui-input label="Height" id="height" name="height" type="number" autocomplete="false" value="">
+						<uui-input label="Height" id="height" name="height" type="number" autocomplete="false" value="" min="0">
 							<span class="append" slot="append">px</span>
 						</uui-input>
 					</div>

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/Umbraco.MediaPicker.ts

@@ -25,6 +25,7 @@ export const manifest: ManifestPropertyEditorSchema = {
 					label: 'Amount',
 					description: 'Set a required range of medias',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
+					config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
 				},
 				{
 					alias: 'startNodeId',

src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts

@@ -1,6 +1,6 @@
 import type { UmbMemberItemModel } from '../../repository/index.js';
 import { UmbMemberPickerContext } from './input-member.context.js';
-import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -164,7 +164,7 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
 	}
 
 	#renderItems() {
-		if (!this._items) return;
+		if (!this._items) return nothing;
 		return html`
 			<uui-ref-list>
 				${repeat(
@@ -177,7 +177,7 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
 	}
 
 	#renderAddButton() {
-		if (this.max === 1 && this.selection.length >= this.max) return;
+		if (this.max === 1 && this.selection.length >= this.max) return nothing;
 		return html`<uui-button
 			id="btn-add"
 			look="placeholder"
@@ -186,7 +186,7 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
 	}
 
 	#renderItem(item: UmbMemberItemModel) {
-		if (!item.unique) return;
+		if (!item.unique) return nothing;
 		return html`
 			<uui-ref-node name=${item.name} id=${item.unique}>
 				<uui-action-bar slot="actions">
@@ -198,7 +198,7 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
 	}
 
 	#renderOpenButton(item: UmbMemberItemModel) {
-		if (!this.showOpenButton) return;
+		if (!this.showOpenButton) return nothing;
 		return html`
 			<uui-button
 				href="${this._editMemberPath}edit/${item.unique}"

src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts

@@ -1,7 +1,6 @@
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
-import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbInputMemberElement } from '@umbraco-cms/backoffice/member';
@@ -14,19 +13,8 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 	@property()
 	public value?: string;
 
-	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		if (!config) return;
-
-		const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
-		this.min = minMax?.min ?? 0;
-		this.max = minMax?.max ?? Infinity;
-	}
-
-	@state()
-	min = 0;
-
-	@state()
-	max = Infinity;
+	@property({ attribute: false })
+	public config?: UmbPropertyEditorConfigCollection;
 
 	#onChange(event: CustomEvent & { target: UmbInputMemberElement }) {
 		this.value = event.target.value;
@@ -35,11 +23,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 
 	render() {
 		return html`
-			<umb-input-member
-				.min=${this.min}
-				.max=${this.max}
-				.value=${this.value ?? ''}
-				@change=${this.#onChange}></umb-input-member>
+			<umb-input-member min="0" max="1" .value=${this.value ?? ''} @change=${this.#onChange}></umb-input-member>
 		`;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts

@@ -33,9 +33,9 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 	});
 
 	@property({ type: Array })
-	public set value(value: Array<UmbCollectionColumnConfiguration>) {
-		this.#value = value;
-		this.#sorter.setModel(value);
+	public set value(value: Array<UmbCollectionColumnConfiguration> | undefined) {
+		this.#value = value ?? [];
+		this.#sorter.setModel(this.#value);
 	}
 	public get value(): Array<UmbCollectionColumnConfiguration> {
 		return this.#value;
@@ -95,7 +95,10 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 	}
 
 	render() {
-		return html`${this.#renderColumns()} ${this.#renderInput()}`;
+		return html`
+			<div id="layout-wrapper">${this.#renderColumns()}</div>
+			${this.#renderInput()}
+		`;
 	}
 
 	#renderInput() {
@@ -109,15 +112,11 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 
 	#renderColumns() {
 		if (!this.value) return nothing;
-		return html`
-			<div id="layout-wrapper">
-				${repeat(
-					this.value,
-					(column) => column.alias,
-					(column) => this.#renderColumn(column),
-				)}
-			</div>
-		`;
+		return repeat(
+			this.value,
+			(column) => column.alias,
+			(column) => this.#renderColumn(column),
+		);
 	}
 
 	#renderColumn(column: UmbCollectionColumnConfiguration) {

src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts

@@ -53,9 +53,9 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 	});
 
 	@property({ type: Array })
-	public set value(value: Array<UmbCollectionLayoutConfiguration>) {
-		this.#value = value;
-		this.#sorter.setModel(value);
+	public set value(value: Array<UmbCollectionLayoutConfiguration> | undefined) {
+		this.#value = value ?? [];
+		this.#sorter.setModel(this.#value);
 	}
 	public get value(): Array<UmbCollectionLayoutConfiguration> {
 		return this.#value;
@@ -132,7 +132,10 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 	}
 
 	render() {
-		return html`${this.#renderLayouts()} ${this.#renderInput()}`;
+		return html`
+			<div id="layout-wrapper">${this.#renderLayouts()}</div>
+			${this.#renderInput()}
+		`;
 	}
 
 	#renderInput() {
@@ -141,15 +144,11 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 
 	#renderLayouts() {
 		if (!this.value) return nothing;
-		return html`
-			<div id="layout-wrapper">
-				${repeat(
-					this.value,
-					(layout) => this.#getUnique(layout),
-					(layout, index) => this.#renderLayout(layout, index),
-				)}
-			</div>
-		`;
+		return repeat(
+			this.value,
+			(layout) => this.#getUnique(layout),
+			(layout, index) => this.#renderLayout(layout, index),
+		);
 	}
 
 	#renderLayout(layout: UmbCollectionLayoutConfiguration, index: number) {

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

@@ -13,7 +13,7 @@ const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Collection View',
 		propertyEditorSchemaAlias: 'Umbraco.ListView',
-		icon: 'icon-bulleted-list',
+		icon: 'icon-layers',
 		group: 'lists',
 		settings: {
 			properties: [
@@ -28,6 +28,7 @@ const manifest: ManifestPropertyEditorUi = {
 					label: 'Page Size',
 					description: 'Number of items per page.',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 				},
 				{
 					alias: 'orderBy',
@@ -71,6 +72,31 @@ const manifest: ManifestPropertyEditorUi = {
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
 				},
 			],
+			defaultData: [
+				{
+					alias: 'includeProperties',
+					value: [
+						{ header: 'Sort', alias: 'sortOrder', isSystem: 1 },
+						{ header: 'Last edited', alias: 'updateDate', isSystem: 1 },
+						{ header: 'Created by', alias: 'creator', isSystem: 1 },
+					],
+				},
+				{
+					alias: 'layouts',
+					value: [
+						{ name: 'Table', icon: 'icon-list', collectionView: 'Umb.CollectionView.Document.Table' },
+						{ name: 'Grid', icon: 'icon-grid', collectionView: 'Umb.CollectionView.Document.Grid' },
+					],
+				},
+				{ alias: 'pageSize', value: 10 },
+				{ alias: 'orderBy', value: 'updateDate' },
+				{ alias: 'orderDirection', value: 'desc' },
+				{
+					alias: 'bulkActionPermissions',
+					value: { allowBulkPublish: true, allowBulkUnpublish: true, allowBulkCopy: true },
+				},
+				{ alias: 'icon', value: 'icon-list' },
+			],
 		},
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/Umbraco.MultiUrlPicker.ts

@@ -13,12 +13,14 @@ export const manifest: ManifestPropertyEditorSchema = {
 					label: 'Minimum number of items',
 					description: '',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 				},
 				{
 					alias: 'maxNumber',
 					label: 'Maximum number of items',
 					description: '',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 				},
 				{
 					alias: 'ignoreUserStartNodes',
@@ -28,14 +30,8 @@ export const manifest: ManifestPropertyEditorSchema = {
 				},
 			],
 			defaultData: [
-				{
-					alias: 'minNumber',
-					value: 0,
-				},
-				{
-					alias: 'maxNumber',
-					value: 0,
-				},
+				{ alias: 'minNumber', value: 0 },
+				{ alias: 'maxNumber', value: 0 },
 			],
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/Umbraco.MultipleTextString.ts

@@ -14,23 +14,19 @@ export const manifests: Array<ManifestTypes> = [
 						label: 'Minimum',
 						description: 'Enter the minimum amount of text boxes to be displayed',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+						config: [{ alias: 'min', value: 0 }],
 					},
 					{
 						alias: 'max',
 						label: 'Maximum',
 						description: 'Enter the maximum amount of text boxes to be displayed, enter 0 for unlimited',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+						config: [{ alias: 'min', value: 0 }],
 					},
 				],
 				defaultData: [
-					{
-						alias: 'min',
-						value: 0,
-					},
-					{
-						alias: 'max',
-						value: 0,
-					},
+					{ alias: 'min', value: 0 },
+					{ alias: 'max', value: 0 },
 				],
 			},
 		},

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

@@ -1,13 +1,13 @@
 import type { UmbInputNumberRangeElement } from '../../core/components/input-number-range/input-number-range.element.js';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
 import '../../core/components/input-number-range/input-number-range.element.js';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 /**
  * @element umb-property-editor-ui-number-range
@@ -17,35 +17,37 @@ export class UmbPropertyEditorUINumberRangeElement
 	extends UmbFormControlMixin<NumberRangeValueType | undefined, typeof UmbLitElement>(UmbLitElement, undefined)
 	implements UmbPropertyEditorUiElement
 {
+	@state()
+	_minValue?: number;
+
+	@state()
+	_maxValue?: number;
+
+	@state()
+	_validationRange?: NumberRangeValueType;
+
 	@property({ type: Object })
 	public set value(value: NumberRangeValueType | undefined) {
-		this._value = value || { min: undefined, max: undefined };
+		this.#value = value || { min: undefined, max: undefined };
 		this._minValue = value?.min;
 		this._maxValue = value?.max;
 	}
 	public get value() {
-		return this._value;
+		return this.#value;
 	}
-	private _value: NumberRangeValueType = { min: undefined, max: undefined };
+	#value: NumberRangeValueType = { min: undefined, max: undefined };
 
-	@property({ attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
-
-	private _onChange(event: CustomEvent) {
-		this.value = {
-			min: (event.target as UmbInputNumberRangeElement).minValue,
-			max: (event.target as UmbInputNumberRangeElement).maxValue,
-		};
-		this.dispatchEvent(new CustomEvent('change'));
+	public set config(config: UmbPropertyEditorConfigCollection) {
+		if (!config) return;
+		this._validationRange = config.getValueByAlias<NumberRangeValueType>('validationRange');
 	}
 
-	@state()
-	_minValue?: number;
-	@state()
-	_maxValue?: number;
+	#onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) {
+		this.value = { min: event.target.minValue, max: event.target.maxValue };
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
 
-	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-		super.firstUpdated(_changedProperties);
+	firstUpdated() {
 		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-number-range')!);
 	}
 
@@ -54,10 +56,14 @@ export class UmbPropertyEditorUINumberRangeElement
 	}
 
 	render() {
-		return html`<umb-input-number-range
-			.minValue=${this._minValue}
-			.maxValue=${this._maxValue}
-			@change=${this._onChange}></umb-input-number-range>`;
+		return html`
+			<umb-input-number-range
+				.minValue=${this._minValue}
+				.maxValue=${this._maxValue}
+				.validationRange=${this._validationRange}
+				@change=${this.#onChange}>
+			</umb-input-number-range>
+		`;
 	}
 }
 

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

@@ -1,13 +1,13 @@
-import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-property-editor-ui-number')
 export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property({ type: Number })
-	value: undefined | number = undefined;
+	value?: number;
 
 	@state()
 	private _max?: number;
@@ -19,28 +19,36 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 	private _step?: number;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		this._min = config?.getValueByAlias('min');
-		this._max = config?.getValueByAlias('max');
-		this._step = config?.getValueByAlias('step');
+		if (!config) return;
+		this._min = this.#parseInt(config.getValueByAlias('min'));
+		this._max = this.#parseInt(config.getValueByAlias('max'));
+		this._step = this.#parseInt(config.getValueByAlias('step'));
 	}
 
-	private onInput(e: InputEvent) {
-		this.value = Number((e.target as HTMLInputElement).value);
-		this.dispatchEvent(new CustomEvent('property-value-change'));
+	#parseInt(input: unknown): number | undefined {
+		const num = Number(input);
+		return Number.isNaN(num) ? undefined : num;
+	}
+
+	#onInput(e: InputEvent & { target: HTMLInputElement }) {
+		this.value = this.#parseInt(e.target.value);
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
-		return html`<uui-input
-			.value=${this.value ?? 0}
-			type="number"
-			max="${ifDefined(this._max)}"
-			min="${ifDefined(this._min)}"
-			step="${ifDefined(this._step)}"
-			@input=${this.onInput}></uui-input>`;
+		return html`
+			<uui-input
+				type="number"
+				min=${ifDefined(this._min)}
+				max=${ifDefined(this._max)}
+				step=${ifDefined(this._step)}
+				.value=${this.value ?? 0}
+				@input=${this.#onInput}>
+			</uui-input>
+		`;
 	}
 
 	static styles = [
-		UmbTextStyles,
 		css`
 			uui-input {
 				width: 100%;

src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts

@@ -22,14 +22,8 @@ export const manifest: ManifestPropertyEditorSchema = {
 				},
 			],
 			defaultData: [
-				{
-					alias: 'minVal',
-					value: 0,
-				},
-				{
-					alias: 'maxVal',
-					value: 0,
-				},
+				{ alias: 'minVal', value: 0 },
+				{ alias: 'maxVal', value: 0 },
 			],
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/Umbraco.TextArea.ts

@@ -13,6 +13,7 @@ export const manifest: ManifestPropertyEditorSchema = {
 					label: 'Maximum allowed characters',
 					description: 'If empty - no character limit',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 				},
 			],
 		},

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

@@ -19,26 +19,24 @@ export const manifests: Array<ManifestTypes> = [
 						label: 'Number of rows',
 						description: 'If empty or zero, the textarea is set to auto-height',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 					},
 					{
 						alias: 'minHeight',
 						label: 'Min height (pixels)',
 						description: 'Sets the minimum height of the textarea',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 					},
 					{
 						alias: 'maxHeight',
 						label: 'Max height (pixels)',
 						description: 'Sets the maximum height of the textarea',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 					},
 				],
-				defaultData: [
-					{
-						alias: 'rows',
-						value: 10,
-					},
-				],
+				defaultData: [{ alias: 'rows', value: 10 }],
 			},
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/property-editors/tree-picker/Umbraco.MultiNodeTreePicker.ts

@@ -13,12 +13,14 @@ export const manifest: ManifestPropertyEditorSchema = {
 					label: 'Minimum number of items',
 					description: '',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 				},
 				{
 					alias: 'maxNumber',
 					label: 'Maximum number of items',
 					description: '',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
 				},
 				{
 					alias: 'ignoreUserStartNodes',
@@ -34,14 +36,8 @@ export const manifest: ManifestPropertyEditorSchema = {
 				},
 			],
 			defaultData: [
-				{
-					alias: 'minNumber',
-					value: 0,
-				},
-				{
-					alias: 'maxNumber',
-					value: 0,
-				},
+				{ alias: 'minNumber', value: 0 },
+				{ alias: 'maxNumber', value: 0 },
 			],
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts

@@ -1,19 +1,20 @@
 import { loadManifestApi } from '../../../../libs/extension-api/functions/load-manifest-api.function.js';
-import { pastePreProcessHandler } from './input-tiny-mce.handlers.js';
-import { defaultFallbackConfig } from './input-tiny-mce.defaults.js';
 import { availableLanguages } from './input-tiny-mce.languages.js';
+import { defaultFallbackConfig } from './input-tiny-mce.defaults.js';
+import { pastePreProcessHandler } from './input-tiny-mce.handlers.js';
 import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js';
 import type { TinyMcePluginArguments, UmbTinyMcePluginBase } from './tiny-mce-plugin.js';
-import { getProcessedImageUrl } from '@umbraco-cms/backoffice/utils';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
-import type { EditorEvent, Editor, RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce';
-import { type ManifestTinyMcePlugin, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { css, customElement, html, property, query, state } from '@umbraco-cms/backoffice/external/lit';
 import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet';
+import { getProcessedImageUrl } from '@umbraco-cms/backoffice/utils';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import type { EditorEvent, Editor, RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce';
+import type { ManifestTinyMcePlugin } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
 /**
  * Handles the resize event

src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts

@@ -1,7 +1,7 @@
 import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 /**
@@ -21,12 +21,16 @@ export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement
 	}
 
 	render() {
-		return html`<uui-input
-			label="Max size"
-			type="number"
-			placeholder="Max size"
-			@change=${this.#onChange}
-			.value=${this.value}></uui-input>`;
+		return html`
+			<uui-input
+				type="number"
+				min="0"
+				label="Max size"
+				placeholder="Max size"
+				.value=${this.value}
+				@change=${this.#onChange}>
+			</uui-input>
+		`;
 	}
 }
 

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

@@ -22,171 +22,39 @@ const manifest: ManifestPropertyEditorUi = {
 						{
 							alias: 'toolbar',
 							value: [
-								{
-									alias: 'undo',
-									label: 'Undo',
-									icon: 'undo',
-								},
-								{
-									alias: 'redo',
-									label: 'Redo',
-									icon: 'redo',
-								},
-								{
-									alias: 'cut',
-									label: 'Cut',
-									icon: 'cut',
-								},
-								{
-									alias: 'copy',
-									label: 'Copy',
-									icon: 'copy',
-								},
-								{
-									alias: 'paste',
-									label: 'Paste',
-									icon: 'paste',
-								},
-								{
-									alias: 'styles',
-									label: 'Style select',
-									icon: 'permanent-pen',
-								},
-								{
-									alias: 'fontname',
-									label: 'Font select',
-									icon: 'text-color',
-								},
-								{
-									alias: 'fontsize',
-									label: 'Font size',
-									icon: 'text-color',
-								},
-								{
-									alias: 'forecolor',
-									label: 'Text color',
-									icon: 'text-color',
-								},
-								{
-									alias: 'backcolor',
-									label: 'Background color',
-									icon: 'highlight-bg-color',
-								},
-								{
-									alias: 'blockquote',
-									label: 'Blockquote',
-									icon: 'quote',
-								},
-								{
-									alias: 'formatblock',
-									label: 'Format block',
-									icon: 'format',
-								},
-								{
-									alias: 'removeformat',
-									label: 'Remove format',
-									icon: 'remove-formatting',
-								},
-								{
-									alias: 'bold',
-									label: 'Bold',
-									icon: 'bold',
-								},
-								{
-									alias: 'italic',
-									label: 'Italic',
-									icon: 'italic',
-								},
-								{
-									alias: 'underline',
-									label: 'Underline',
-									icon: 'underline',
-								},
-								{
-									alias: 'strikethrough',
-									label: 'Strikethrough',
-									icon: 'strike-through',
-								},
-								{
-									alias: 'alignleft',
-									label: 'Align left',
-									icon: 'align-left',
-								},
-								{
-									alias: 'aligncenter',
-									label: 'Align center',
-									icon: 'align-center',
-								},
-								{
-									alias: 'alignright',
-									label: 'Align right',
-									icon: 'align-right',
-								},
-								{
-									alias: 'alignjustify',
-									label: 'Justify justify',
-									icon: 'align-justify',
-								},
-								{
-									alias: 'bullist',
-									label: 'Bullet list',
-									icon: 'unordered-list',
-								},
-								{
-									alias: 'numlist',
-									label: 'Numbered list',
-									icon: 'ordered-list',
-								},
-								{
-									alias: 'outdent',
-									label: 'Outdent',
-									icon: 'outdent',
-								},
-								{
-									alias: 'indent',
-									label: 'Indent',
-									icon: 'indent',
-								},
-								{
-									alias: 'anchor',
-									label: 'Anchor',
-									icon: 'bookmark',
-								},
-								{
-									alias: 'table',
-									label: 'Table',
-									icon: 'table',
-								},
-								{
-									alias: 'hr',
-									label: 'Horizontal rule',
-									icon: 'horizontal-rule',
-								},
-								{
-									alias: 'subscript',
-									label: 'Subscript',
-									icon: 'subscript',
-								},
-								{
-									alias: 'superscript',
-									label: 'Superscript',
-									icon: 'superscript',
-								},
-								{
-									alias: 'charmap',
-									label: 'Character map',
-									icon: 'insert-character',
-								},
-								{
-									alias: 'rtl',
-									label: 'Right to left',
-									icon: 'rtl',
-								},
-								{
-									alias: 'ltr',
-									label: 'Left to right',
-									icon: 'ltr',
-								},
+								{ alias: 'undo', label: 'Undo', icon: 'undo' },
+								{ alias: 'redo', label: 'Redo', icon: 'redo' },
+								{ alias: 'cut', label: 'Cut', icon: 'cut' },
+								{ alias: 'copy', label: 'Copy', icon: 'copy' },
+								{ alias: 'paste', label: 'Paste', icon: 'paste' },
+								{ alias: 'styles', label: 'Style select', icon: 'permanent-pen' },
+								{ alias: 'fontname', label: 'Font select', icon: 'text-color' },
+								{ alias: 'fontsize', label: 'Font size', icon: 'text-color' },
+								{ alias: 'forecolor', label: 'Text color', icon: 'text-color' },
+								{ alias: 'backcolor', label: 'Background color', icon: 'highlight-bg-color' },
+								{ alias: 'blockquote', label: 'Blockquote', icon: 'quote' },
+								{ alias: 'formatblock', label: 'Format block', icon: 'format' },
+								{ alias: 'removeformat', label: 'Remove format', icon: 'remove-formatting' },
+								{ alias: 'bold', label: 'Bold', icon: 'bold' },
+								{ alias: 'italic', label: 'Italic', icon: 'italic' },
+								{ alias: 'underline', label: 'Underline', icon: 'underline' },
+								{ alias: 'strikethrough', label: 'Strikethrough', icon: 'strike-through' },
+								{ alias: 'alignleft', label: 'Align left', icon: 'align-left' },
+								{ alias: 'aligncenter', label: 'Align center', icon: 'align-center' },
+								{ alias: 'alignright', label: 'Align right', icon: 'align-right' },
+								{ alias: 'alignjustify', label: 'Justify justify', icon: 'align-justify' },
+								{ alias: 'bullist', label: 'Bullet list', icon: 'unordered-list' },
+								{ alias: 'numlist', label: 'Numbered list', icon: 'ordered-list' },
+								{ alias: 'outdent', label: 'Outdent', icon: 'outdent' },
+								{ alias: 'indent', label: 'Indent', icon: 'indent' },
+								{ alias: 'anchor', label: 'Anchor', icon: 'bookmark' },
+								{ alias: 'table', label: 'Table', icon: 'table' },
+								{ alias: 'hr', label: 'Horizontal rule', icon: 'horizontal-rule' },
+								{ alias: 'subscript', label: 'Subscript', icon: 'subscript' },
+								{ alias: 'superscript', label: 'Superscript', icon: 'superscript' },
+								{ alias: 'charmap', label: 'Character map', icon: 'insert-character' },
+								{ alias: 'rtl', label: 'Right to left', icon: 'rtl' },
+								{ alias: 'ltr', label: 'Left to right', icon: 'ltr' },
 							],
 						},
 					],
@@ -214,12 +82,7 @@ const manifest: ManifestPropertyEditorUi = {
 					label: 'Mode',
 					description: 'Select the mode for the editor',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList',
-					config: [
-						{
-							alias: 'items',
-							value: ['Classic', 'Inline'],
-						},
-					],
+					config: [{ alias: 'items', value: ['Classic', 'Inline'] }],
 				},
 				{
 					alias: 'overlaySize',
@@ -235,9 +98,26 @@ const manifest: ManifestPropertyEditorUi = {
 			],
 			defaultData: [
 				{
-					alias: 'mode',
-					value: 'Classic',
+					alias: 'toolbar',
+					value: [
+						'styles',
+						'bold',
+						'italic',
+						'alignleft',
+						'aligncenter',
+						'alignright',
+						'bullist',
+						'numlist',
+						'outdent',
+						'indent',
+						'sourcecode',
+						'link',
+						'umbmediapicker',
+						'umbembeddialog',
+					],
 				},
+				{ alias: 'mode', value: 'Classic' },
+				{ alias: 'maxImageSize', value: 500 },
 			],
 		},
 	},

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

@@ -1,7 +1,8 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
 import '../../components/input-tiny-mce/input-tiny-mce.element.js';
 
@@ -31,19 +32,22 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
 		return this.#configuration;
 	}
 
-	#onChange(event: InputEvent) {
+	#onChange(event: InputEvent & { target: HTMLInputElement }) {
 		this.value = {
 			blocks: {},
-			markup: (event.target as HTMLInputElement).value,
+			markup: event.target.value,
 		};
-		this.dispatchEvent(new CustomEvent('property-value-change'));
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
-		return html`<umb-input-tiny-mce
-			@change=${this.#onChange}
-			.configuration=${this.#configuration}
-			.value=${this.value?.markup ?? ''}></umb-input-tiny-mce>`;
+		return html`
+			<umb-input-tiny-mce
+				.configuration=${this.#configuration}
+				.value=${this.value?.markup ?? ''}
+				@change=${this.#onChange}>
+			</umb-input-tiny-mce>
+		`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts

@@ -154,7 +154,7 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '')
 	}
 
 	#renderItem(item: UmbUserItemModel) {
-		if (!item.unique) return;
+		if (!item.unique) return nothing;
 		return html`
 			<uui-ref-node-user name=${item.name} id=${item.unique}>
 				<uui-action-bar slot="actions">

src/Umbraco.Web.UI.Client/src/packages/user/user/property-editor/user-picker/property-editor-ui-user-picker.element.ts

@@ -17,12 +17,14 @@ export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implemen
 	public config?: UmbPropertyEditorConfigCollection;
 
 	#onChange(event: CustomEvent & { target: UmbUserInputElement }) {
-		this.value = event.target.selection.join(',');
+		this.value = event.target.value;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
-		return html`<umb-user-input max="1" .value=${this.value ?? ''} @change=${this.#onChange}></umb-user-input>`;
+		return html`
+			<umb-user-input min="0" max="1" .value=${this.value ?? ''} @change=${this.#onChange}></umb-user-input>
+		`;
 	}
 }