diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index cd9abf6633..8805e2a30b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/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(this, { + #sorter = new UmbSorterController(this, { getUniqueOfElement: (element) => { return element.id; }, @@ -46,7 +46,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, }, }); - #sortCards(model: Array) { + #sortCards(model: Array) { 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) { + public set items(value: Array) { this.#sorter.setModel(value); this.#items = value; this.#populateCards(); } - public get items(): Array { + public get items(): Array { return this.#items; } - #items: Array = []; + #items: Array = []; @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 = uniques.map((unique) => ({ + const additions: Array = uniques.map((unique) => ({ key: UmbId.new(), mediaKey: unique, mediaTypeAlias: '', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index 281d3a47b8..2dd6905f69 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/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,6 +11,7 @@ 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'; @@ -18,10 +19,10 @@ 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; - +export class UmbPropertyEditorUIMediaPickerElement + extends UmbFormControlMixin(UmbLitElement) + implements UmbPropertyEditorUiElement +{ public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts index 0baa97364e..85109d3b08 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts @@ -1,4 +1,4 @@ -export type UmbMediaPickerPropertyValue = { +export type UmbMediaPickerPropertyValueEntry = { key: string; mediaKey: string; mediaTypeAlias: string; @@ -6,6 +6,14 @@ export type UmbMediaPickerPropertyValue = { crops: Array; }; +/** + * @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; + export type UmbCropModel = { label?: string; alias: string;