register media picker

src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts

@@ -18,7 +18,7 @@ import { UmbModalChangePasswordData } from './layouts/modal-layout-change-passwo
 import { UmbIconPickerModalData } from '../../src/backoffice/shared/modals/icon-picker';
 import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm.element';
 import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
-import type { UmbModalMediaPickerData } from '../../src/backoffice/media/media/modals/media-picker/media-picker-modal.element';
+import { UmbMediaPickerModalData } from '../../src/backoffice/media/media/modals/media-picker';
 import type { UmbModalLinkPickerData } from './layouts/link-picker/modal-layout-link-picker.element';
 import { UmbModalHandler } from './modal-handler';
 import type { UmbBasicModalData } from './layouts/basic/modal-layout-basic.element';
@@ -72,11 +72,11 @@ export class UmbModalContext {
 	/**
 	 * Opens a Media Picker sidebar modal
 	 * @public
-	 * @param {UmbModalMediaPickerData} [data]
+	 * @param {UmbMediaPickerModalData} [data]
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalContext
 	 */
-	public mediaPicker(data?: UmbModalMediaPickerData): UmbModalHandler {
+	public mediaPicker(data?: UmbMediaPickerModalData): UmbModalHandler {
 		return this.open('umb-modal-layout-media-picker', { data, type: 'sidebar', size: 'small' });
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/media/media/entity-bulk-actions/move/move.action.ts

@@ -1,4 +1,5 @@
 import type { UmbMediaRepository } from '../../repository/media.repository';
+import { UMB_MEDIA_PICKER_MODAL_TOKEN } from '../../modals/media-picker';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/context-api';
@@ -17,7 +18,10 @@ export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase<UmbMed
 
 	async execute() {
 		// TODO: the picker should be single picker by default
-		const modalHandler = this.#modalContext?.mediaPicker({ selection: [], multiple: false });
+		const modalHandler = this.#modalContext?.open(UMB_MEDIA_PICKER_MODAL_TOKEN, {
+			selection: [],
+			multiple: false,
+		});
 		const selection = await modalHandler?.onClose();
 		const destination = selection[0];
 		await this.repository?.move(this.selection, destination);

src/Umbraco.Web.UI.Client/src/backoffice/media/media/manifests.ts

@@ -4,6 +4,7 @@ import { manifests as treeManifests } from './tree/manifests';
 import { manifests as workspaceManifests } from './workspace/manifests';
 import { manifests as entityActionsManifests } from './entity-actions/manifests';
 import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests';
+import { manifests as modalManifests } from './modals/manifests';
 
 export const manifests = [
 	...repositoryManifests,
@@ -12,4 +13,5 @@ export const manifests = [
 	...workspaceManifests,
 	...entityActionsManifests,
 	...entityBulkActionsManifests,
+	...modalManifests,
 ];

src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/manifests.ts

@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.MediaPicker',
+		name: 'Media Picker Modal',
+		loader: () => import('./media-picker/media-picker-modal.element'),
+	},
+];
+
+export const manifests = [...modals];

src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/index.ts

@@ -0,0 +1,11 @@
+import { UmbModalToken } from 'libs/modal';
+
+export interface UmbMediaPickerModalData {
+	multiple?: boolean;
+	selection: Array<string>;
+}
+
+export const UMB_MEDIA_PICKER_MODAL_TOKEN = new UmbModalToken<UmbMediaPickerModalData>('Umb.Modal.MediaPicker', {
+	type: 'sidebar',
+	size: 'small',
+});

src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts

@@ -3,15 +3,11 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbModalLayoutElement } from '../../../../../../libs/modal/layouts/modal-layout.element';
 
-export interface UmbModalMediaPickerData {
-	multiple?: boolean;
-	selection: Array<string>;
-}
-
 import { UmbTreeElement } from '../../../../shared/components/tree/tree.element';
+import { UmbMediaPickerModalData } from '.';
 
 @customElement('umb-media-picker-modal')
-export class UmbMediaPickerModalElement extends UmbModalLayoutElement<UmbModalMediaPickerData> {
+export class UmbMediaPickerModalElement extends UmbModalLayoutElement<UmbMediaPickerModalData> {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -95,6 +91,8 @@ export class UmbMediaPickerModalElement extends UmbModalLayoutElement<UmbModalMe
 	}
 }
 
+export default UmbMediaPickerModalElement;
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-media-picker-modal': UmbMediaPickerModalElement;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts

@@ -8,6 +8,7 @@ import { UmbMediaRepository } from '../../../media/media/repository/media.reposi
 import { UmbLitElement } from '@umbraco-cms/element';
 import type { EntityTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api';
 import type { UmbObserverController } from '@umbraco-cms/observable-api';
+import { UMB_MEDIA_PICKER_MODAL_TOKEN } from 'src/backoffice/media/media/modals/media-picker';
 
 @customElement('umb-input-media-picker')
 export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) {
@@ -135,10 +136,11 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 
 	private _openPicker() {
 		// We send a shallow copy(good enough as its just an array of keys) of our this._selectedKeys, as we don't want the modal to manipulate our data:
-		const modalHandler = this._modalContext?.mediaPicker({
+		const modalHandler = this._modalContext?.open(UMB_MEDIA_PICKER_MODAL_TOKEN, {
 			multiple: this.max === 1 ? false : true,
 			selection: [...this._selectedKeys],
 		});
+
 		modalHandler?.onClose().then(({ selection }: any) => {
 			this._setSelection(selection);
 		});