media input

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

@@ -1,4 +1,4 @@
-import { UmbInputMediaPickerElement } from '../../../../media/media/components/input-media-picker/input-media-picker.element.js';
+import { UmbMediaInputElement } from '../../../../media/media/components/media-input/media-input.element.js';
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/components';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -36,18 +36,18 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
 	private _limitMax?: number;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputMediaPickerElement).selectedIds;
+		this.value = (event.target as UmbMediaInputElement).selectedIds;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	render() {
 		return html`
-			<umb-input-media-picker
+			<umb-media-input
 				@change=${this._onChange}
 				.selectedIds=${this._value}
 				.min=${this._limitMin}
 				.max=${this._limitMax}
-				>Add</umb-input-media-picker
+				>Add</umb-media-input
 			>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/media/media/components/index.ts

@@ -1 +1 @@
-import './input-media-picker/input-media-picker.element.js';
+import './media-input/media-input.element.js';

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media-picker/input-media-picker.stories.ts

@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-import './input-media-picker.element.js';
-import type { UmbInputMediaPickerElement } from './input-media-picker.element.js';
-
-const meta: Meta<UmbInputMediaPickerElement> = {
-	title: 'Components/Inputs/Media Picker',
-	component: 'umb-input-media-picker',
-};
-
-export default meta;
-type Story = StoryObj<UmbInputMediaPickerElement>;
-
-export const Overview: Story = {
-	args: {},
-};

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

@@ -11,8 +11,8 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
-@customElement('umb-input-media-picker')
-export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-media-input')
+export class UmbMediaInputElement extends FormControlMixin(UmbLitElement) {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -201,10 +201,10 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 	];
 }
 
-export default UmbInputMediaPickerElement;
+export default UmbMediaInputElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-input-media-picker': UmbInputMediaPickerElement;
+		'umb-media-input': UmbMediaInputElement;
 	}
 }

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './media-input.element.js';
+import type { UmbMediaInputElement } from './media-input.element.js';
+
+const meta: Meta<UmbMediaInputElement> = {
+	title: 'Components/Inputs/Media',
+	component: 'umb-media-input',
+};
+
+export default meta;
+type Story = StoryObj<UmbMediaInputElement>;
+
+export const Overview: Story = {
+	args: {},
+};

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

@@ -1,15 +1,15 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import { UmbInputMediaPickerElement } from './input-media-picker.element.js';
+import { UmbMediaInputElement } from './media-input.element.js';
 import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
-describe('UmbInputMediaPickerElement', () => {
-	let element: UmbInputMediaPickerElement;
+describe('UmbMediaInputElement', () => {
+	let element: UmbMediaInputElement;
 
 	beforeEach(async () => {
-		element = await fixture(html` <umb-input-media-picker></umb-input-media-picker> `);
+		element = await fixture(html` <umb-media-input></umb-media-input> `);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbInputMediaPickerElement);
+		expect(element).to.be.instanceOf(UmbMediaInputElement);
 	});
 
 	it('passes the a11y audit', async () => {

src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts

@@ -1,5 +1,5 @@
 import type { UmbDocumentInputElement } from '../../../documents/documents/components/document-input/document-input.element.js';
-import type { UmbInputMediaPickerElement } from '../../../media/media/components/input-media-picker/input-media-picker.element.js';
+import type { UmbMediaInputElement } from '../../../media/media/components/media-input/media-input.element.js';
 import type { UmbInputLanguagePickerElement } from '../../../settings/languages/components/input-language-picker/input-language-picker.element.js';
 import {
 	UUITextStyles,
@@ -203,10 +203,10 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 	#renderMediaSection() {
 		return html`
 			<div slot="editor">
-				<umb-input-media-picker
+				<umb-media-input
 					.selectedIds=${this._package.mediaIds ?? []}
 					@change="${(e: CustomEvent) =>
-						(this._package.mediaIds = (e.target as UmbInputMediaPickerElement).selectedIds)}"></umb-input-media-picker>
+						(this._package.mediaIds = (e.target as UmbMediaInputElement).selectedIds)}"></umb-media-input>
 				<uui-checkbox
 					label="Include child nodes"
 					.checked="${this._package.mediaLoadChildNodes ?? false}"