@umbraco-cms/backoffice 18.2.0 → 18.3.0-rc

package/dist-cms/packages/media/media/components/input-rich-media/input-rich-media.element.js

@@ -78,6 +78,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
             },
             identifier: 'Umb.SorterIdentifier.InputRichMedia',
             itemSelector: 'uui-card-media',
+            disabledItemSelector: '[error]',
             containerSelector: '.container',
             resolvePlacement: UmbSorterResolvePlacementAsGrid,
             onChange: ({ model }) => {
@@ -117,6 +118,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.#focalPointEnabled = false;
         this.#readonly = false;
         this._cards = [];
+        this._statuses = [];
         this.#itemManager = new UmbRepositoryItemsManager(this, UMB_MEDIA_ITEM_REPOSITORY_ALIAS);
         this.#pickerInputContext = new UmbMediaPickerInputContext(this);
         this.#interactionMemoryManager = new UmbEntityInputInteractionMemoryManager(this, this.#pickerInputContext.interactionMemory);
@@ -129,6 +131,10 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.observe(this.#itemManager.items, () => {
             this.#populateCards();
         }, null);
+        this.observe(this.#itemManager.statuses, (statuses) => {
+            this._statuses = statuses;
+            this.#populateCards();
+        }, null);
         new UmbModalRouteRegistrationController(this, UMB_IMAGE_CROPPER_EDITOR_MODAL)
             .addAdditionalPath(':key')
             .onSetup((params) => {
@@ -194,13 +200,16 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this._cards =
             this.value?.map((item) => {
                 const media = mediaItems.find((x) => x.unique === item.mediaKey);
+                const isNotFound = this._statuses.find((x) => x.unique === item.mediaKey)?.state.type === 'error';
                 return {
                     unique: item.key,
                     media: item.mediaKey,
                     name: media?.name ?? '',
                     icon: media?.mediaType?.icon,
+                    extension: media?.extension,
                     isTrashed: media?.isTrashed ?? false,
-                    isLoading: !media,
+                    isLoading: !media && !isNotFound,
+                    isNotFound,
                 };
             }) ?? [];
     }
@@ -272,7 +281,10 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         if (!this._cards.length)
             return nothing;
         return html `
-			${repeat(this._cards, (item) => item.unique, (item) => this.#renderItem(item))}
+			${repeat(this._cards, 
+        // Re-key on not-found state so the sorter re-evaluates `disabledItemSelector` when an item settles
+        // into "not found" — the sorter only checks this when an element is first mounted.
+        (item) => `${item.unique}:${item.isNotFound ?? false}`, (item) => this.#renderItem(item))}
 		`;
     }
     #renderAddButton() {
@@ -299,6 +311,9 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
     #renderItem(item) {
         if (!item.unique)
             return nothing;
+        if (item.isNotFound) {
+            return this.#renderNotFoundItem(item);
+        }
         const href = this.readonly ? undefined : this._routeBuilder?.({ key: item.unique });
         return html `
 			<uui-card-media id=${item.unique} title=${item.name} name=${item.name} .href=${href} ?readonly=${this.readonly}>
@@ -306,12 +321,21 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
 					.unique=${item.media}
 					.alt=${item.name}
 					.icon=${item.icon ?? 'icon-picture'}
+					.fileExt=${item.extension}
 					.externalLoading=${item.isLoading ?? false}></umb-media-thumbnail>
 
 				${this.#renderIsTrashed(item)} ${this.#renderActions(item)}
 			</uui-card-media>
 		`;
     }
+    #renderNotFoundItem(item) {
+        return html `
+			<uui-card-media id=${item.unique} error disabled name=${this.localize.string('#general_notFound')}>
+				<umb-icon name="icon-alert"></umb-icon>
+				${this.#renderActions(item)}
+			</uui-card-media>
+		`;
+    }
     #renderActions(item) {
         if (this.readonly)
             return nothing;
@@ -417,6 +441,9 @@ __decorate([
 __decorate([
     state()
 ], UmbInputRichMediaElement.prototype, "_cards", void 0);
+__decorate([
+    state()
+], UmbInputRichMediaElement.prototype, "_statuses", void 0);
 __decorate([
     state()
 ], UmbInputRichMediaElement.prototype, "_routeBuilder", void 0);

package/dist-cms/packages/media/media/dashboard/media-dashboard.element.d.ts

@@ -3,7 +3,7 @@ export declare class UmbMediaDashboardElement extends UmbLitElement {
     #private;
     private _routes?;
     constructor();
-    render(): import("lit-html").TemplateResult<1> | undefined;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbMediaDashboardElement;

package/dist-cms/packages/media/media/dashboard/media-dashboard.element.js

@@ -11,8 +11,8 @@ import { css, html, customElement, state } from '../../../../external/lit/index.
 import { UmbDataTypeDetailRepository } from '../../../data-type/index.js';
 import { UmbEntityContext } from '../../../core/entity/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
 import { UmbCollectionElement } from '../../../core/collection/index.js';
+import { umbMapDataTypeToCollectionConfiguration } from '../../../content/content/index.js';
 let UmbMediaDashboardElement = class UmbMediaDashboardElement extends UmbLitElement {
     #dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
     #entityContext = new UmbEntityContext(this);
@@ -29,7 +29,10 @@ let UmbMediaDashboardElement = class UmbMediaDashboardElement extends UmbLitElem
         this.observe(await this.#dataTypeDetailRepository.byUnique(config.defaultDataTypeId), (dataType) => {
             if (!dataType)
                 return;
-            const dataTypeConfig = this.#mapDataTypeConfigToCollectionConfig(dataType);
+            const dataTypeConfig = {
+                unique: '',
+                ...umbMapDataTypeToCollectionConfiguration(dataType),
+            };
             this._routes = [
                 {
                     path: 'collection',
@@ -52,23 +55,10 @@ let UmbMediaDashboardElement = class UmbMediaDashboardElement extends UmbLitElem
             ];
         }, '_observeConfigDataType');
     }
-    #mapDataTypeConfigToCollectionConfig(dataType) {
-        const config = new UmbPropertyEditorConfigCollection(dataType.values);
-        const pageSize = Number(config.getValueByAlias('pageSize'));
-        return {
-            unique: '',
-            dataTypeId: '',
-            layouts: config?.getValueByAlias('layouts'),
-            orderBy: config?.getValueByAlias('orderBy') ?? 'updateDate',
-            orderDirection: config?.getValueByAlias('orderDirection') ?? 'asc',
-            pageSize: isNaN(pageSize) ? 50 : pageSize,
-            userDefinedProperties: config?.getValueByAlias('includeProperties'),
-        };
-    }
     render() {
-        if (!this._routes)
-            return;
-        return html `<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
+        return html `<umb-router-slot id="router-slot" .routes=${this._routes}
+			><umb-view-loader></umb-view-loader
+		></umb-router-slot>`;
     }
     static { this.styles = [
         css `

package/dist-cms/packages/media/media/dropzone/media-dropzone.manager.js

@@ -187,9 +187,9 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
         if (allowed)
             return allowed;
         // Request information on this media type.
-        const { data } = await this.#mediaTypeStructure.requestAllowedChildrenOf(mediaTypeUnique, parentUnique);
+        const { data } = await this.#mediaTypeStructure.requestAllAllowedChildrenOf(mediaTypeUnique, parentUnique);
         if (!data)
-            throw new Error('Parent media type does not exist');
+            throw new Error('Could not retrieve the media types allowed under the parent media type');
         this.#allowedChildrenOf.appendOne({ mediaTypeUnique, allowedChildren: data.items });
         return data.items;
     }

package/dist-cms/packages/media/media/entity-actions/create/media-create-options-modal.element.js

@@ -43,9 +43,8 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
         }
     }
     async #retrieveAllowedMediaTypesOf(unique, parentContentUnique) {
-        const { data } = await this.#mediaTypeStructureRepository.requestAllowedChildrenOf(unique, parentContentUnique);
+        const { data } = await this.#mediaTypeStructureRepository.requestAllAllowedChildrenOf(unique, parentContentUnique);
         if (data) {
-            // TODO: implement pagination, or get 1000?
             this._allowedMediaTypes = data.items;
         }
         this._loading = false;

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/sort-children-of.repository.d.ts

@@ -1,5 +1,5 @@
 import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
-import type { UmbSortChildrenOfArgs, UmbSortChildrenOfRepository } from '../../../../../core/tree/index.js';
+import type { UmbSortChildrenByFieldOption, UmbSortChildrenOfArgs, UmbSortChildrenOfByFieldArgs, UmbSortChildrenOfRepository } from '../../../../../core/tree/index.js';
 export declare class UmbSortChildrenOfMediaRepository extends UmbControllerBase implements UmbSortChildrenOfRepository {
     #private;
     sortChildrenOf(args: UmbSortChildrenOfArgs): Promise<import("../../../../../core/resources/index.js").UmbApiResponse<{
@@ -7,5 +7,11 @@ export declare class UmbSortChildrenOfMediaRepository extends UmbControllerBase
         request: Request;
         response: Response;
     }>>;
+    sortChildrenOfByField(args: UmbSortChildrenOfByFieldArgs): Promise<import("../../../../../core/resources/index.js").UmbApiResponse<{
+        data: unknown;
+        request: Request;
+        response: Response;
+    }>>;
+    requestSortByFieldOptions(): Promise<Array<UmbSortChildrenByFieldOption>>;
 }
 export { UmbSortChildrenOfMediaRepository as api };

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/sort-children-of.repository.js

@@ -1,5 +1,6 @@
 import { UmbSortChildrenOfMediaServerDataSource } from './sort-children-of.server.data.js';
 import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
+import { ContentSortFieldModel } from '../../../../../core/backend-api/index.js';
 export class UmbSortChildrenOfMediaRepository extends UmbControllerBase {
     #dataSource = new UmbSortChildrenOfMediaServerDataSource(this);
     async sortChildrenOf(args) {
@@ -9,5 +10,17 @@ export class UmbSortChildrenOfMediaRepository extends UmbControllerBase {
             throw new Error('Sorting details are missing');
         return this.#dataSource.sortChildrenOf(args);
     }
+    async sortChildrenOfByField(args) {
+        if (args.unique === undefined)
+            throw new Error('Unique is missing');
+        return this.#dataSource.sortChildrenOfByField(args);
+    }
+    async requestSortByFieldOptions() {
+        return [
+            { value: ContentSortFieldModel.NAME, label: '#sort_sortByFieldNameOption' },
+            { value: ContentSortFieldModel.CREATE_DATE, label: '#sort_sortByFieldCreateDateOption' },
+            { value: ContentSortFieldModel.UPDATE_DATE, label: '#sort_sortByFieldUpdateDateOption' },
+        ];
+    }
 }
 export { UmbSortChildrenOfMediaRepository as api };

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/sort-children-of.server.data.d.ts

@@ -1,5 +1,5 @@
 import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
-import type { UmbSortChildrenOfArgs, UmbSortChildrenOfDataSource } from '../../../../../core/tree/index.js';
+import type { UmbSortChildrenOfArgs, UmbSortChildrenOfByFieldArgs, UmbSortChildrenOfDataSource } from '../../../../../core/tree/index.js';
 /**
  * A server data source for sorting children of a Media
  * @class UmbSortChildrenOfMediaServerDataSource
@@ -23,4 +23,14 @@ export declare class UmbSortChildrenOfMediaServerDataSource implements UmbSortCh
         request: Request;
         response: Response;
     }>>;
+    /**
+     * Sorts the children of the given Media by a field
+     * @param {UmbSortChildrenOfByFieldArgs} args - The sort request arguments
+     * @memberof UmbSortChildrenOfMediaServerDataSource
+     */
+    sortChildrenOfByField(args: UmbSortChildrenOfByFieldArgs): Promise<import("../../../../../core/resources/index.js").UmbApiResponse<{
+        data: unknown;
+        request: Request;
+        response: Response;
+    }>>;
 }

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/sort-children-of.server.data.js

@@ -31,4 +31,15 @@ export class UmbSortChildrenOfMediaServerDataSource {
             },
         }));
     }
+    /**
+     * Sorts the children of the given Media by a field
+     * @param {UmbSortChildrenOfByFieldArgs} args - The sort request arguments
+     * @memberof UmbSortChildrenOfMediaServerDataSource
+     */
+    async sortChildrenOfByField(args) {
+        const body = { field: args.field, direction: args.direction };
+        return args.unique
+            ? tryExecute(this.#host, MediaService.putMediaByIdSortChildren({ path: { id: args.unique }, body }))
+            : tryExecute(this.#host, MediaService.putMediaRootSortChildren({ body }));
+    }
 }

package/dist-cms/packages/media/media/item/media-item-ref.element.js

@@ -12,7 +12,7 @@ import { customElement, html, ifDefined, nothing, property, state } from '../../
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
 import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../../core/section/index.js';
-import { UMB_WORKSPACE_MODAL } from '../../../core/workspace/index.js';
+import { UMB_WORKSPACE_MODAL, umbGenerateWorkspaceLink } from '../../../core/workspace/index.js';
 let UmbMediaItemRefElement = class UmbMediaItemRefElement extends UmbLitElement {
     #item;
     get item() {
@@ -46,20 +46,25 @@ let UmbMediaItemRefElement = class UmbMediaItemRefElement extends UmbLitElement
             this._editPath = routeBuilder({});
         });
     }
-    #getHref(item) {
-        if (!this._editPath)
+    #getLink(item) {
+        if (!item.unique)
             return;
-        const path = UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN.generateLocal({ unique: item.unique });
-        return `${this._editPath}/${path}`;
+        return umbGenerateWorkspaceLink({
+            pattern: UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN,
+            params: { unique: item.unique },
+            routePath: this._editPath,
+        });
     }
     render() {
         if (!this.item)
             return nothing;
+        const link = this.#getLink(this.item);
         return html `
 			<uui-ref-node
 				name=${this.item.name}
-				href=${ifDefined(this.#getHref(this.item))}
-				?readonly=${this.readonly || !this._userHasSectionAccess || !this._editPath}
+				href=${ifDefined(link?.href)}
+				target=${ifDefined(link?.target)}
+				?readonly=${this.readonly || !this._userHasSectionAccess}
 				?standalone=${this.standalone}>
 				<slot name="actions" slot="actions"></slot>
 				${this.#renderIcon(this.item)}

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.js

@@ -79,7 +79,7 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
         const mediaTypeUnique = currentPath?.mediaType?.unique ?? null;
         const parentUnique = currentPath?.unique ?? null;
         // Fetch allowed children of the current parent's media type
-        const { data: allowedChildrenData } = await this.#mediaTypeStructureRepository.requestAllowedChildrenOf(mediaTypeUnique, parentUnique);
+        const { data: allowedChildrenData } = await this.#mediaTypeStructureRepository.requestAllAllowedChildrenOf(mediaTypeUnique, parentUnique);
         const allowedChildren = allowedChildrenData?.items ?? [];
         // Fetch all folder media types
         const allFolderTypes = await this.#getAllFolderTypes();

package/dist-cms/packages/media/media/modals/media-picker/media-picker-modal.element.js

@@ -517,7 +517,11 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				?selected=${this.value?.selection?.find((value) => value === item.unique)}
 				?selectable=${selectable}
 				?select-only=${this._isSelectionMode || canNavigate === false}>
-				<umb-media-thumbnail unique=${item.unique} alt=${item.name} icon=${item.mediaType.icon}></umb-media-thumbnail>
+				<umb-media-thumbnail
+					unique=${item.unique}
+					alt=${item.name}
+					icon=${item.mediaType.icon}
+					file-ext=${ifDefined(item.extension)}></umb-media-thumbnail>
 			</uui-card-media>
 		`;
     }

package/dist-cms/packages/media/media/property-editors/image-cropper/manifests.js

@@ -7,6 +7,7 @@ export const manifests = [
         name: 'Image Cropper Property Editor UI',
         element: () => import('./property-editor-ui-image-cropper.element.js'),
         meta: {
+            supportsVariantChange: true,
             label: 'Image Cropper',
             icon: 'icon-crop',
             group: '#propertyEditorUIGroups_media',

package/dist-cms/packages/media/media/property-editors/image-crops/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Image Crops Property Editor UI',
     element: () => import('./property-editor-ui-image-crops.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Image Crops Configuration',
         icon: 'icon-autofill',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/media/media/property-editors/manifests.js

@@ -2,10 +2,12 @@ import { manifest as imageCropsConfiguration } from './image-crops/manifests.js'
 import { manifest as mediaEntityPicker } from './media-entity-picker/manifests.js';
 import { manifests as imageCropperManifests } from './image-cropper/manifests.js';
 import { manifests as mediaPickerManifests } from './media-picker/manifests.js';
+import { manifests as mediaStartNodeAccessManifests } from './media-start-node-access/manifests.js';
 import { manifests as uploadFieldManifests } from './upload-field/manifests.js';
 export const manifests = [
     ...imageCropperManifests,
     ...mediaPickerManifests,
+    ...mediaStartNodeAccessManifests,
     ...uploadFieldManifests,
     imageCropsConfiguration,
     mediaEntityPicker,

package/dist-cms/packages/media/media/property-editors/media-entity-picker/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Media Entity Picker Property Editor UI',
     element: () => import('./property-editor-ui-media-entity-picker.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Media Entity Picker',
         icon: 'icon-picture',
         group: '#propertyEditorUIGroups_pickers',

package/dist-cms/packages/media/media/property-editors/media-picker/manifests.js

@@ -7,6 +7,7 @@ export const manifests = [
         name: 'Media Picker Property Editor UI',
         element: () => import('./property-editor-ui-media-picker.element.js'),
         meta: {
+            supportsVariantChange: true,
             label: 'Media Picker',
             propertyEditorSchemaAlias: 'Umbraco.MediaPicker3',
             icon: 'icon-picture',

package/dist-cms/packages/media/media/property-editors/media-start-node-access/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/media/media/property-editors/media-start-node-access/manifests.js

@@ -0,0 +1,14 @@
+export const manifests = [
+    {
+        type: 'propertyEditorUi',
+        alias: 'Umb.PropertyEditorUi.MediaStartNodeAccess',
+        name: 'Media Start Node Access Property Editor UI',
+        element: () => import('./media-start-node-access-property-editor-ui.element.js'),
+        meta: {
+            label: 'Media Start Node Access',
+            icon: 'icon-picture',
+            group: '#propertyEditorUIGroups_pickers',
+            supportsReadOnly: true,
+        },
+    },
+];

package/dist-cms/packages/media/media/property-editors/media-start-node-access/media-start-node-access-property-editor-ui.element.d.ts

@@ -0,0 +1,11 @@
+import { UmbStartNodeAccessPropertyEditorUiElementBase } from '../../../../core/property-editor/index.js';
+export declare class UmbMediaStartNodeAccessPropertyEditorUIElement extends UmbStartNodeAccessPropertyEditorUiElementBase {
+    #private;
+    protected renderPicker(): import("lit-html").TemplateResult<1>;
+}
+export { UmbMediaStartNodeAccessPropertyEditorUIElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-media-start-node-access': UmbMediaStartNodeAccessPropertyEditorUIElement;
+    }
+}

package/dist-cms/packages/media/media/property-editors/media-start-node-access/media-start-node-access-property-editor-ui.element.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbMediaPickerFolderFilter } from '../../components/input-media/input-media.context.js';
+import { customElement, html } from '../../../../../external/lit/index.js';
+import { UmbStartNodeAccessPropertyEditorUiElementBase } from '../../../../core/property-editor/index.js';
+let UmbMediaStartNodeAccessPropertyEditorUIElement = class UmbMediaStartNodeAccessPropertyEditorUIElement extends UmbStartNodeAccessPropertyEditorUiElementBase {
+    #onChange(event) {
+        this._onPick(event.target.selection);
+    }
+    renderPicker() {
+        return html `
+			<umb-input-media
+				.selection=${this._selection}
+				.min=${this._min}
+				.max=${this._max}
+				.folderFilter=${UmbMediaPickerFolderFilter.FOLDERS_ONLY}
+				?readonly=${this.readonly}
+				@change=${this.#onChange}>
+			</umb-input-media>
+		`;
+    }
+};
+UmbMediaStartNodeAccessPropertyEditorUIElement = __decorate([
+    customElement('umb-property-editor-ui-media-start-node-access')
+], UmbMediaStartNodeAccessPropertyEditorUIElement);
+export { UmbMediaStartNodeAccessPropertyEditorUIElement };
+export { UmbMediaStartNodeAccessPropertyEditorUIElement as element };

package/dist-cms/packages/media/media/property-editors/upload-field/manifests.js

@@ -7,6 +7,7 @@ export const manifests = [
         name: 'Upload Field Property Editor UI',
         element: () => import('./property-editor-ui-upload-field.element.js'),
         meta: {
+            supportsVariantChange: true,
             label: 'Upload Field',
             propertyEditorSchemaAlias: 'Umbraco.UploadField',
             icon: 'icon-download-alt',

package/dist-cms/packages/media/media/recycle-bin/manifests.js

@@ -5,6 +5,7 @@ import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as rootManifests } from './root/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
+import { manifests as workspaceContextManifests } from './workspace-context/manifests.js';
 export const manifests = [
     {
         type: 'condition',
@@ -18,4 +19,5 @@ export const manifests = [
     ...repositoryManifests,
     ...rootManifests,
     ...treeManifests,
+    ...workspaceContextManifests,
 ];

package/dist-cms/packages/media/media/recycle-bin/root/workspace/constants.d.ts

@@ -1 +1,2 @@
 export declare const UMB_MEDIA_RECYCLE_BIN_ROOT_WORKSPACE_ALIAS = "Umb.Workspace.Media.RecycleBin.Root";
+export declare const UMB_MEDIA_RECYCLE_BIN_ROOT_WORKSPACE_PATH: string;

package/dist-cms/packages/media/media/recycle-bin/root/workspace/constants.js

@@ -1 +1,8 @@
+import { UMB_MEDIA_RECYCLE_BIN_ROOT_ENTITY_TYPE } from '../entity.js';
+import { UMB_MEDIA_SECTION_PATHNAME } from '../../../../media-section/paths.js';
+import { UMB_WORKSPACE_PATH_PATTERN } from '../../../../../core/workspace/index.js';
 export const UMB_MEDIA_RECYCLE_BIN_ROOT_WORKSPACE_ALIAS = 'Umb.Workspace.Media.RecycleBin.Root';
+export const UMB_MEDIA_RECYCLE_BIN_ROOT_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
+    sectionName: UMB_MEDIA_SECTION_PATHNAME,
+    entityType: UMB_MEDIA_RECYCLE_BIN_ROOT_ENTITY_TYPE,
+});

package/dist-cms/packages/media/media/recycle-bin/tree/media-recycle-bin-tree.server.data-source.js

@@ -54,6 +54,11 @@ MediaService.getTreeMediaAncestors({
     query: { descendantId: args.treeItem.unique },
 });
 const mapper = (item) => {
+    const contentType = {
+        unique: item.mediaType.id,
+        icon: item.mediaType.icon,
+        collection: item.mediaType.collection ? { unique: item.mediaType.collection.id } : null,
+    };
     return {
         unique: item.id,
         parent: {
@@ -64,11 +69,9 @@ const mapper = (item) => {
         noAccess: false,
         isTrashed: true,
         hasChildren: item.hasChildren,
-        mediaType: {
-            unique: item.mediaType.id,
-            icon: item.mediaType.icon,
-            collection: item.mediaType.collection ? { unique: item.mediaType.collection.id } : null,
-        },
+        contentType,
+        // TODO (V20): remove when the deprecated `mediaType` field is removed.
+        mediaType: contentType,
         variants: item.variants.map((variant) => {
             return {
                 name: variant.name,

package/dist-cms/packages/media/media/recycle-bin/tree/tree-item-children/collection/views/manifests.js

@@ -8,7 +8,7 @@ export const manifests = [
         element: () => import('./media-recycle-bin-tree-item-table-collection-view.element.js'),
         weight: 300,
         meta: {
-            label: 'Table',
+            label: '#collection_tableViewLabel',
             icon: 'icon-table',
             pathName: 'table',
         },

package/dist-cms/packages/media/media/recycle-bin/workspace-context/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/media/media/recycle-bin/workspace-context/manifests.js

@@ -0,0 +1,16 @@
+import { UMB_MEDIA_WORKSPACE_ALIAS } from '../../workspace/constants.js';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '../../../../core/workspace/index.js';
+export const manifests = [
+    {
+        type: 'workspaceContext',
+        kind: 'trashable',
+        name: 'Trashable Media Workspace Context',
+        alias: 'Umb.WorkspaceContext.Media.Trashable',
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_MEDIA_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+];

package/dist-cms/packages/media/media/repository/item/media-item.server.data-source.js

@@ -37,6 +37,7 @@ const mapper = (item) => {
             collection: item.mediaType.collection ? { unique: item.mediaType.collection.id } : null,
         },
         name: item.variants[0]?.name, // TODO: get correct variant name
+        extension: item.extension ?? undefined,
         parent: item.parent ? { unique: item.parent.id } : null,
         variants: item.variants.map((variant) => {
             return {

package/dist-cms/packages/media/media/repository/item/types.d.ts

@@ -13,6 +13,8 @@ export interface UmbMediaItemModel extends UmbEntityWithOptionalFlags {
         collection: UmbReferenceByUnique | null;
     };
     name: string;
+    /** The file extension, without the leading dot and in lowercase. Undefined when the item holds no file. */
+    extension?: string;
     parent: {
         unique: UmbEntityUnique;
     } | null;

package/dist-cms/packages/media/media/search/media-search.server.data-source.js

@@ -77,6 +77,7 @@ export class UmbMediaSearchServerDataSource {
                         unique: item.mediaType.id,
                     },
                     name: item.variants[0]?.name, // TODO: get correct variant name
+                    extension: item.extension ?? undefined,
                     parent: item.parent ? { unique: item.parent.id } : null,
                     variants: item.variants.map((variant) => {
                         return {

package/dist-cms/packages/media/media/tree/server-data-source/media-tree.server.data-source.js

@@ -33,6 +33,11 @@ export class UmbMediaTreeServerDataSource extends UmbControllerBase {
         return { data: mappedData, error };
     }
     #mapItem(item) {
+        const contentType = {
+            unique: item.mediaType.id,
+            icon: item.mediaType.icon,
+            collection: item.mediaType.collection ? { unique: item.mediaType.collection.id } : null,
+        };
         return {
             unique: item.id,
             parent: {
@@ -44,11 +49,9 @@ export class UmbMediaTreeServerDataSource extends UmbControllerBase {
             noAccess: item.noAccess,
             isTrashed: item.isTrashed,
             isFolder: false,
-            mediaType: {
-                unique: item.mediaType.id,
-                icon: item.mediaType.icon,
-                collection: item.mediaType.collection ? { unique: item.mediaType.collection.id } : null,
-            },
+            contentType,
+            // TODO (V20): remove when the deprecated `mediaType` field is removed.
+            mediaType: contentType,
             name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
             variants: item.variants.map((variant) => {
                 return {
@@ -57,6 +60,7 @@ export class UmbMediaTreeServerDataSource extends UmbControllerBase {
                 };
             }),
             createDate: item.createDate,
+            extension: item.extension ?? undefined,
             flags: item.flags,
         };
     }

package/dist-cms/packages/media/media/tree/tree-item/media-tree-item.context.js

@@ -9,7 +9,9 @@ export class UmbMediaTreeItemContext extends UmbDefaultTreeItemContext {
         super(host);
         this.observe(this.treeItem, (item) => {
             this.#isTrashedContext.setIsTrashed(item?.isTrashed || false);
-            const mediaTypeUnique = item?.mediaType.unique;
+            // TODO (V20): drop the `mediaType` fallback when the deprecated field is removed.
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            const mediaTypeUnique = (item?.contentType ?? item?.mediaType)?.unique;
             this.#entityContentTypeContext.setEntityType(mediaTypeUnique ? UMB_MEDIA_TYPE_ENTITY_TYPE : undefined);
             this.#entityContentTypeContext.setUnique(mediaTypeUnique ?? undefined);
         }, null);