input media

Author: nielslyngsoe

src/packages/media/media/components/input-media/input-media.element.ts

@@ -9,12 +9,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 const elementName = 'umb-input-media';
 
 @customElement(elementName)
-export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(UmbLitElement) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.getAttribute('detail');
@@ -107,12 +107,12 @@ export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '')
 	@property({ type: String })
 	startNode = '';
 
-	@property()
-	public set value(idsString: string) {
-		this.selection = splitStringToArray(idsString);
+	@property({ type: String })
+	public set value(selectionString: string | undefined) {
+		this.selection = splitStringToArray(selectionString);
 	}
-	public get value() {
-		return this.selection.join(',');
+	public get value(): string | undefined {
+		return this.selection.length > 0 ? this.selection.join(',') : undefined;
 	}
 
 	@state()

src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts

@@ -1,5 +1,4 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+import { html, customElement, 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 { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
@@ -9,41 +8,34 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi
 
 @customElement('umb-property-editor-ui-media-entity-picker')
 export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	#min: number = 0;
-	#max: number = Infinity;
-
-	@property({ attribute: false })
-	public set value(value: string | null | undefined) {
-		this.#selection = value ? (Array.isArray(value) ? value : splitStringToArray(value)) : [];
-	}
-	public get value() {
-		return this.#selection.length > 0 ? this.#selection.join(',') : null;
-	}
-
-	#selection: Array<string> = [];
+	@property({ type: String })
+	public value: string | undefined;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 
 		const minMax = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
-		this.#min = minMax?.min ?? 0;
-		this.#max = minMax?.max ?? Infinity;
-	}
-	public get config() {
-		return undefined;
+		this._min = minMax?.min ?? 0;
+		this._max = minMax?.max ?? Infinity;
 	}
 
+	@state()
+	_min: number = 0;
+
+	@state()
+	_max: number = Infinity;
+
 	#onChange(event: CustomEvent & { target: UmbInputMediaElement }) {
-		this.value = event.target.selection?.join(',') ?? null;
+		this.value = event.target.value;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
 		return html`
 			<umb-input-media
-				.min=${this.#min}
-				.max=${this.#max}
-				.selection=${this.#selection}
+				.min=${this._min}
+				.max=${this._max}
+				.value=${this.value}
 				@change=${this.#onChange}></umb-input-media>
 		`;
 	}