Fix: 17764 (#18093)

* Add property value model type

* make the element a Form Control

Author: nielslyngsoe

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

@@ -1,6 +1,6 @@
 import { UmbMediaItemRepository } from '../../repository/index.js';
 import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
-import type { UmbMediaItemModel, UmbCropModel, UmbMediaPickerPropertyValue } from '../../types.js';
+import type { UmbMediaItemModel, UmbCropModel, UmbMediaPickerPropertyValueEntry } from '../../types.js';
 import type { UmbUploadableItem } from '../../dropzone/types.js';
 import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { umbConfirmModal, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
@@ -27,7 +27,7 @@ type UmbRichMediaCardModel = {
 
 @customElement('umb-input-rich-media')
 export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
-	#sorter = new UmbSorterController<UmbMediaPickerPropertyValue>(this, {
+	#sorter = new UmbSorterController<UmbMediaPickerPropertyValueEntry>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
 		},
@@ -46,7 +46,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 		},
 	});
 
-	#sortCards(model: Array<UmbMediaPickerPropertyValue>) {
+	#sortCards(model: Array<UmbMediaPickerPropertyValueEntry>) {
 		const idToIndexMap: { [unique: string]: number } = {};
 		model.forEach((item, index) => {
 			idToIndexMap[item.key] = index;
@@ -93,15 +93,15 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 	maxMessage = 'This field exceeds the allowed amount of items';
 
 	@property({ type: Array })
-	public set items(value: Array<UmbMediaPickerPropertyValue>) {
+	public set items(value: Array<UmbMediaPickerPropertyValueEntry>) {
 		this.#sorter.setModel(value);
 		this.#items = value;
 		this.#populateCards();
 	}
-	public get items(): Array<UmbMediaPickerPropertyValue> {
+	public get items(): Array<UmbMediaPickerPropertyValueEntry> {
 		return this.#items;
 	}
-	#items: Array<UmbMediaPickerPropertyValue> = [];
+	#items: Array<UmbMediaPickerPropertyValueEntry> = [];
 
 	@property({ type: Array })
 	allowedContentTypeIds?: string[] | undefined;
@@ -282,7 +282,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 	#addItems(uniques: string[]) {
 		if (!uniques.length) return;
 
-		const additions: Array<UmbMediaPickerPropertyValue> = uniques.map((unique) => ({
+		const additions: Array<UmbMediaPickerPropertyValueEntry> = uniques.map((unique) => ({
 			key: UmbId.new(),
 			mediaKey: unique,
 			mediaTypeAlias: '',

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

@@ -1,5 +1,5 @@
 import type { UmbInputRichMediaElement } from '../../components/input-rich-media/input-rich-media.element.js';
-import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../types.js';
+import type { UmbCropModel, UmbMediaPickerValueModel } from '../types.js';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
@@ -11,17 +11,18 @@ import type {
 } from '@umbraco-cms/backoffice/property-editor';
 
 import '../../components/input-rich-media/input-rich-media.element.js';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 const elementName = 'umb-property-editor-ui-media-picker';
 
 /**
  * @element umb-property-editor-ui-media-picker
  */
 @customElement(elementName)
-export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property({ attribute: false })
-	value?: Array<UmbMediaPickerPropertyValue>;
-
+export class UmbPropertyEditorUIMediaPickerElement
+	extends UmbFormControlMixin<UmbMediaPickerValueModel | undefined, typeof UmbLitElement, undefined>(UmbLitElement)
+	implements UmbPropertyEditorUiElement
+{
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 

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

@@ -1,11 +1,19 @@
-export type UmbMediaPickerPropertyValue = {
+export type UmbMediaPickerPropertyValueEntry = {
 	key: string;
 	mediaKey: string;
 	mediaTypeAlias: string;
 	focalPoint: UmbFocalPointModel | null;
 	crops: Array<UmbCropModel>;
 };
 
+/**
+ * @deprecated Use UmbMediaPickerPropertyValueEntry instead — Will be removed in v.17.
+ * Also notice this is a modal for the entry type, use UmbMediaPickerPropertyValueModel for the type of the value.
+ */
+export type UmbMediaPickerPropertyValue = UmbMediaPickerPropertyValueEntry;
+
+export type UmbMediaPickerValueModel = Array<UmbMediaPickerPropertyValueEntry>;
+
 export type UmbCropModel = {
 	label?: string;
 	alias: string;