@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc2

package/dist-cms/packages/media/media/collection/item/media-collection-item-card.element.js

@@ -0,0 +1,117 @@
+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 { UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE } from '../../entity.js';
+import { css, customElement, html, ifDefined, nothing, property } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbDeselectedEvent, UmbSelectedEvent } from '../../../../core/event/index.js';
+import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
+import { UMB_MEDIA_TYPE_ENTITY_TYPE } from '../../../media-types/index.js';
+import { UmbEntityContentTypeEntityContext } from '../../../../content/content-type/index.js';
+import '../../../imaging/index.js';
+let UmbMediaCollectionItemCardElement = class UmbMediaCollectionItemCardElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.#entityContentTypeContext = new UmbEntityContentTypeEntityContext(this);
+        this.selectable = false;
+        this.selected = false;
+        this.selectOnly = false;
+        this.disabled = false;
+    }
+    #item;
+    #entityContentTypeContext;
+    get item() {
+        return this.#item;
+    }
+    set item(value) {
+        this.#item = value;
+        const mediaTypeUnique = value?.mediaType?.unique;
+        this.#entityContentTypeContext.setEntityType(mediaTypeUnique ? UMB_MEDIA_TYPE_ENTITY_TYPE : undefined);
+        this.#entityContentTypeContext.setUnique(mediaTypeUnique);
+    }
+    #onSelected(event) {
+        if (!this.item)
+            return;
+        event.stopPropagation();
+        this.dispatchEvent(new UmbSelectedEvent(this.item.unique));
+    }
+    #onDeselected(event) {
+        if (!this.item)
+            return;
+        event.stopPropagation();
+        this.dispatchEvent(new UmbDeselectedEvent(this.item.unique));
+    }
+    render() {
+        if (!this.item)
+            return nothing;
+        if (this.item.entityType === UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE) {
+            return this.#renderPlaceholder(this.item);
+        }
+        return html `
+			<uui-card-media
+				name=${ifDefined(this.item.name)}
+				href=${ifDefined(this.href)}
+				data-mark="${this.item.entityType}:${this.item.unique}"
+				?selectable=${this.selectable}
+				?select-only=${this.selectOnly}
+				?selected=${this.selected}
+				?disabled=${this.disabled}
+				@selected=${this.#onSelected}
+				@deselected=${this.#onDeselected}>
+				<umb-imaging-thumbnail
+					.unique=${this.item.unique}
+					alt=${ifDefined(this.item.name)}
+					icon=${ifDefined(this.item.icon)}></umb-imaging-thumbnail>
+				<slot name="actions" slot="actions"></slot>
+			</uui-card-media>
+		`;
+    }
+    #renderPlaceholder(item) {
+        const complete = item.status === UmbFileDropzoneItemStatus.COMPLETE;
+        const error = item.status !== UmbFileDropzoneItemStatus.WAITING && !complete;
+        return html `<uui-card-media disabled class="media-placeholder-item" name=${ifDefined(item.name)}>
+			<umb-temporary-file-badge
+				.progress=${item.progress ?? 0}
+				?complete=${complete}
+				?error=${error}></umb-temporary-file-badge>
+		</uui-card-media>`;
+    }
+    static { this.styles = [
+        css `
+			uui-card-media {
+				height: 100%;
+			}
+
+			slot[name='actions'] {
+				--uui-button-background-color: var(--uui-color-surface);
+				--uui-button-background-color-hover: var(--uui-color-surface);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Object })
+], UmbMediaCollectionItemCardElement.prototype, "item", null);
+__decorate([
+    property({ type: Boolean })
+], UmbMediaCollectionItemCardElement.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbMediaCollectionItemCardElement.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbMediaCollectionItemCardElement.prototype, "selectOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbMediaCollectionItemCardElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], UmbMediaCollectionItemCardElement.prototype, "href", void 0);
+UmbMediaCollectionItemCardElement = __decorate([
+    customElement('umb-media-collection-item-card')
+], UmbMediaCollectionItemCardElement);
+export { UmbMediaCollectionItemCardElement };
+export { UmbMediaCollectionItemCardElement as element };

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

@@ -0,0 +1,31 @@
+import type { UmbCollectionItemModel } from '../../../../core/collection/index.js';
+import type { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
+import type { UmbEntityWithFlags } from '../../../../core/entity-flag/index.js';
+export interface UmbMediaCollectionItemModel extends UmbCollectionItemModel, UmbEntityWithFlags {
+    /** @deprecated Use `mediaType.alias` on `UmbMediaCollectionItemModel` instead. This field will be removed in v19 */
+    contentTypeAlias?: string;
+    createDate: Date;
+    creator?: string | null;
+    mediaType?: {
+        unique: string;
+        icon: string;
+        alias: string;
+    };
+    sortOrder?: number;
+    updateDate: Date;
+    updater?: string | null;
+    values?: Array<{
+        alias: string;
+        value: string;
+    }>;
+    url?: string;
+    status?: UmbFileDropzoneItemStatus;
+    /**
+     * The progress of the item in percentage.
+     */
+    progress?: number;
+}
+export interface UmbEditableMediaCollectionItemModel {
+    item: UmbMediaCollectionItemModel;
+    editPath: string;
+}

package/dist-cms/packages/media/media/collection/item/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/media/media/collection/manifests.js

@@ -1,6 +1,7 @@
 import { manifests as collectionActionManifests } from './action/manifests.js';
 import { manifests as collectionRepositoryManifests } from './repository/manifests.js';
 import { manifests as collectionViewManifests } from './views/manifests.js';
+import { manifests as itemManifests } from './item/manifests.js';
 import { UMB_MEDIA_COLLECTION_REPOSITORY_ALIAS, UMB_MEDIA_COLLECTION_ALIAS } from './constants.js';
 export const manifests = [
     {
@@ -16,4 +17,5 @@ export const manifests = [
     ...collectionActionManifests,
     ...collectionRepositoryManifests,
     ...collectionViewManifests,
+    ...itemManifests,
 ];

package/dist-cms/packages/media/media/collection/media-collection.context.d.ts

@@ -21,5 +21,11 @@ export declare class UmbMediaCollectionContext extends UmbDefaultCollectionConte
      */
     requestCollection(): Promise<void>;
     protected _requestCollection(): Promise<void>;
+    /**
+     * Returns the href for a specific media collection item.
+     * @param {UmbMediaCollectionItemModel} item - The media item to get the href for.
+     * @returns {Promise<string | undefined>} - The edit workspace href for the media.
+     */
+    requestItemHref(item: UmbMediaCollectionItemModel): Promise<string | undefined>;
 }
 export { UmbMediaCollectionContext as api };

package/dist-cms/packages/media/media/collection/media-collection.context.js

@@ -1,4 +1,5 @@
 import { UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE } from '../entity.js';
+import { UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN } from '../paths.js';
 import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS } from './views/constants.js';
 import { UmbDefaultCollectionContext } from '../../../core/collection/index.js';
 import { UmbArrayState } from '../../../../libs/observable-api/index.js';
@@ -77,5 +78,13 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext {
             this.#placeholders.removeOne(placeholder.unique);
         });
     }
+    /**
+     * Returns the href for a specific media collection item.
+     * @param {UmbMediaCollectionItemModel} item - The media item to get the href for.
+     * @returns {Promise<string | undefined>} - The edit workspace href for the media.
+     */
+    async requestItemHref(item) {
+        return `${UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN.generateAbsolute({ unique: item.unique })}`;
+    }
 }
 export { UmbMediaCollectionContext as api };

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

@@ -28,6 +28,11 @@ export class UmbMediaCollectionServerDataSource {
                     createDate: new Date(variant.createDate),
                     creator: item.creator,
                     icon: item.mediaType.icon,
+                    mediaType: {
+                        unique: item.mediaType.id,
+                        icon: item.mediaType.icon,
+                        alias: item.mediaType.alias,
+                    },
                     name: variant.name,
                     sortOrder: item.sortOrder,
                     updateDate: new Date(variant.updateDate),

package/dist-cms/packages/media/media/collection/types.d.ts

@@ -1,6 +1,5 @@
-import type { UmbFileDropzoneItemStatus } from '../../dropzone/index.js';
 import type { UmbCollectionFilterModel } from '../../../core/collection/index.js';
-import type { UmbEntityWithFlags } from '../../../core/entity-flag/index.js';
+export type * from './item/types.js';
 export interface UmbMediaCollectionFilterModel extends UmbCollectionFilterModel {
     unique?: string;
     dataTypeId?: string;
@@ -12,29 +11,3 @@ export interface UmbMediaCollectionFilterModel extends UmbCollectionFilterModel
         isSystem: boolean;
     }>;
 }
-export interface UmbMediaCollectionItemModel extends UmbEntityWithFlags {
-    unique: string;
-    entityType: string;
-    contentTypeAlias?: string;
-    createDate: Date;
-    creator?: string | null;
-    icon?: string;
-    name?: string;
-    sortOrder?: number;
-    updateDate: Date;
-    updater?: string | null;
-    values?: Array<{
-        alias: string;
-        value: string;
-    }>;
-    url?: string;
-    status?: UmbFileDropzoneItemStatus;
-    /**
-     * The progress of the item in percentage.
-     */
-    progress?: number;
-}
-export interface UmbEditableMediaCollectionItemModel {
-    item: UmbMediaCollectionItemModel;
-    editPath: string;
-}

package/dist-cms/packages/media/media/collection/views/grid/media-grid-collection-view.element.d.ts

@@ -1,11 +1,10 @@
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
-import '../../../../imaging/index.js';
-export declare class UmbMediaGridCollectionViewElement extends UmbLitElement {
+import type { UmbMediaCollectionItemModel } from '../../types.js';
+import { nothing } from '../../../../../../external/lit/index.js';
+import { UmbCollectionViewElementBase } from '../../../../../core/collection/index.js';
+export declare class UmbMediaGridCollectionViewElement extends UmbCollectionViewElementBase<UmbMediaCollectionItemModel> {
     #private;
-    private _items;
-    private _selection;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbMediaGridCollectionViewElement;

package/dist-cms/packages/media/media/collection/views/grid/media-grid-collection-view.element.js

@@ -4,49 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN } from '../../../paths.js';
 import { UMB_MEDIA_COLLECTION_CONTEXT } from '../../media-collection.context-token.js';
-import { UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE } from '../../../entity.js';
-import { css, customElement, html, ifDefined, repeat, state } from '../../../../../../external/lit/index.js';
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { css, customElement, html, nothing, repeat } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
-import { UmbFileDropzoneItemStatus } from '../../../../dropzone/index.js';
-import '../../../../imaging/index.js';
-let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement extends UmbLitElement {
-    #collectionContext;
+import { UmbCollectionViewElementBase } from '../../../../../core/collection/index.js';
+let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement extends UmbCollectionViewElementBase {
     constructor() {
         super();
-        this._items = [];
-        this._selection = [];
         this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (collectionContext) => {
-            this.#collectionContext = collectionContext;
             collectionContext?.setupView(this);
-            this.#observeCollectionContext();
         });
     }
-    #observeCollectionContext() {
-        if (!this.#collectionContext)
-            return;
-        this.observe(this.#collectionContext.items, (items) => (this._items = items), '_observeItems');
-        this.observe(this.#collectionContext.selection.selection, (selection) => (this._selection = selection), '_observeSelection');
-    }
-    #onSelect(item) {
-        if (item.unique) {
-            this.#collectionContext?.selection.select(item.unique);
-        }
-    }
-    #onDeselect(item) {
-        if (item.unique) {
-            this.#collectionContext?.selection.deselect(item.unique);
-        }
-    }
-    #isSelected(item) {
-        return this.#collectionContext?.selection.isSelected(item.unique);
-    }
-    #getEditUrl(item) {
-        return UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN.generateAbsolute({ unique: item.unique });
-    }
     render() {
+        if (this._loading)
+            return nothing;
         return html `
 			<div id="media-grid">
 				${repeat(this._items, (item) => item.unique + item.status, (item) => this.#renderItem(item))}
@@ -54,35 +25,20 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
 		`;
     }
     #renderItem(item) {
-        if (item.entityType === UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE) {
-            return this.#renderPlaceholder(item);
-        }
-        return html `
-			<uui-card-media
-				name=${ifDefined(item.name)}
-				data-mark="${item.entityType}:${item.unique}"
-				selectable
-				?select-only=${this._selection.length > 0}
-				?selected=${this.#isSelected(item)}
-				href=${this.#getEditUrl(item)}
-				@selected=${() => this.#onSelect(item)}
-				@deselected=${() => this.#onDeselect(item)}>
-				<umb-imaging-thumbnail
-					.unique=${item.unique}
-					alt=${ifDefined(item.name)}
-					icon=${ifDefined(item.icon)}></umb-imaging-thumbnail>
-			</uui-card-media>
-		`;
-    }
-    #renderPlaceholder(item) {
-        const complete = item.status === UmbFileDropzoneItemStatus.COMPLETE;
-        const error = item.status !== UmbFileDropzoneItemStatus.WAITING && !complete;
-        return html `<uui-card-media disabled class="media-placeholder-item" name=${ifDefined(item.name)}>
-			<umb-temporary-file-badge
-				.progress=${item.progress ?? 0}
-				?complete=${complete}
-				?error=${error}></umb-temporary-file-badge>
-		</uui-card-media>`;
+        const href = item.unique ? this._itemHrefs.get(item.unique) : undefined;
+        return html ` <umb-entity-collection-item-card
+			.item=${item}
+			href=${href ?? nothing}
+			?selectable=${this._isSelectableItem(item)}
+			?select-only=${this._selectOnly}
+			?selected=${this._isSelectedItem(item.unique)}
+			@selected=${() => this._selectItem(item.unique)}
+			@deselected=${() => this._deselectItem(item.unique)}>
+			<umb-entity-actions-bundle
+				slot="actions"
+				.entityType=${item.entityType}
+				.unique=${item.unique}></umb-entity-actions-bundle>
+		</umb-entity-collection-item-card>`;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -92,12 +48,6 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
 				flex-direction: column;
 			}
 
-			.container {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-
 			#media-grid {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -107,12 +57,6 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
 		`,
     ]; }
 };
-__decorate([
-    state()
-], UmbMediaGridCollectionViewElement.prototype, "_items", void 0);
-__decorate([
-    state()
-], UmbMediaGridCollectionViewElement.prototype, "_selection", void 0);
 UmbMediaGridCollectionViewElement = __decorate([
     customElement('umb-media-grid-collection-view')
 ], UmbMediaGridCollectionViewElement);

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.d.ts

@@ -16,6 +16,7 @@ export declare class UmbImageCropperFocusSetterElement extends UmbLitElement {
     src?: string;
     protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private _handleGridDrag;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.js

@@ -8,7 +8,7 @@ import { UmbFocalPointChangeEvent } from './focalpoint-change.event.js';
 import { isCentered } from './utils.js';
 import { drag } from '../../../../../external/uui/index.js';
 import { clamp } from '../../../../core/utils/index.js';
-import { css, customElement, classMap, ifDefined, html, nothing, state, property, query, } from '../../../../../external/lit/index.js';
+import { css, customElement, classMap, eventOptions, ifDefined, html, nothing, state, property, query, } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement extends UmbLitElement {
     constructor() {
@@ -93,7 +93,7 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         this._coords.x = this.imageElement?.clientWidth / 2;
         this._coords.y = this.imageElement.clientHeight / 2;
     }
-    #handleGridDrag(event) {
+    _handleGridDrag(event) {
         if (this.disabled || this.hideFocalPoint)
             return;
         if (event.button !== 0) {
@@ -179,8 +179,8 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 			<div
 				id="wrapper"
 				@click=${this.#changeFocalPoint}
-				@mousedown=${this.#handleGridDrag}
-				@touchstart=${this.#handleGridDrag}>
+				@mousedown=${this._handleGridDrag}
+				@touchstart=${this._handleGridDrag}>
 				<img id="image" @keydown=${() => nothing} src=${this.src} alt="" />
 				<span
 					id="focal-point"
@@ -218,6 +218,8 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 		#image {
 			margin: auto;
 			position: relative;
+			max-width: 100%;
+			max-height: 100%;
 		}
 		#focal-point {
 			content: '';
@@ -271,6 +273,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UmbImageCropperFocusSetterElement.prototype, "src", void 0);
+__decorate([
+    eventOptions({ passive: false })
+], UmbImageCropperFocusSetterElement.prototype, "_handleGridDrag", null);
 UmbImageCropperFocusSetterElement = __decorate([
     customElement('umb-image-cropper-focus-setter')
 ], UmbImageCropperFocusSetterElement);

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

@@ -4,11 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { css, customElement, html, ifDefined, property, state } from '../../../../../external/lit/index.js';
 import { assignToFrozenObject } from '../../../../../libs/observable-api/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbTemporaryFileConfigRepository } from '../../../../core/temporary-file/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
@@ -58,11 +60,24 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbF
         if (file?.status !== UmbFileDropzoneItemStatus.COMPLETE)
             return;
         this._file = file;
+        const underlyingFile = file.temporaryFile?.file;
+        if (underlyingFile) {
+            void this.#ensureMediaNameFromFile(underlyingFile);
+        }
         this.value = assignToFrozenObject(this.value ?? DefaultValue, {
             temporaryFileId: file.temporaryFile?.temporaryUnique,
         });
         this.dispatchEvent(new UmbChangeEvent());
     }
+    async #ensureMediaNameFromFile(file) {
+        const datasetContext = await this.getContext(UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT);
+        if (!datasetContext || datasetContext.getEntityType() !== UMB_MEDIA_ENTITY_TYPE)
+            return;
+        const currentName = datasetContext.getName();
+        if (currentName && currentName.trim() !== '')
+            return;
+        datasetContext.setName(file.name);
+    }
     #onRemove;
     #mergeCrops() {
         if (this.value) {

package/dist-cms/packages/media/media/components/input-media/input-media.context.d.ts

@@ -3,13 +3,19 @@ import type { UmbMediaPickerModalData, UmbMediaPickerModalValue } from '../../mo
 import type { UmbMediaTreeItemModel } from '../../tree/types.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
-import type { UmbMediaTypeEntityType } from '../../../media-types/index.js';
+import { type UmbMediaTypeEntityType } from '../../../media-types/index.js';
+export declare enum UmbMediaPickerFolderFilter {
+    FILES_ONLY = "filesOnly",
+    FOLDERS_ONLY = "foldersOnly",
+    FILES_AND_FOLDERS = "filesAndFolders"
+}
 interface UmbMediaPickerInputContextOpenArgs {
     allowedContentTypes?: Array<{
         unique: string;
         entityType: UmbMediaTypeEntityType;
     }>;
     includeTrashed?: boolean;
+    folderFilter?: UmbMediaPickerFolderFilter;
 }
 export declare class UmbMediaPickerInputContext extends UmbPickerInputContext<UmbMediaItemModel, UmbMediaTreeItemModel, UmbMediaPickerModalData, UmbMediaPickerModalValue> {
     #private;

package/dist-cms/packages/media/media/components/input-media/input-media.context.js

@@ -3,17 +3,30 @@ import { UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
 import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
 import { isMediaTreeItem } from '../../tree/utils.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
+import { UmbMediaTypeStructureRepository } from '../../../media-types/index.js';
 import { UMB_VARIANT_CONTEXT } from '../../../../core/variant/index.js';
+export var UmbMediaPickerFolderFilter;
+(function (UmbMediaPickerFolderFilter) {
+    UmbMediaPickerFolderFilter["FILES_ONLY"] = "filesOnly";
+    UmbMediaPickerFolderFilter["FOLDERS_ONLY"] = "foldersOnly";
+    UmbMediaPickerFolderFilter["FILES_AND_FOLDERS"] = "filesAndFolders";
+})(UmbMediaPickerFolderFilter || (UmbMediaPickerFolderFilter = {}));
 export class UmbMediaPickerInputContext extends UmbPickerInputContext {
+    #mediaTypeStructureRepository;
+    #folderTypeUniques = new Set();
+    #folderTypesPromise = null;
     constructor(host) {
         super(host, UMB_MEDIA_ITEM_REPOSITORY_ALIAS, UMB_MEDIA_PICKER_MODAL);
+        this.#mediaTypeStructureRepository = new UmbMediaTypeStructureRepository(host);
     }
     async openPicker(pickerData, args) {
+        // Load folder types before opening the picker so the filter is ready
+        await this.#loadFolderTypes();
         const combinedPickerData = {
             ...pickerData,
         };
-        // transform allowedContentTypes to a pickable filter
-        combinedPickerData.pickableFilter = (item) => this.#pickableFilter(item, args?.allowedContentTypes);
+        // combine internal allowedContentTypes filter with user-supplied pickableFilter
+        combinedPickerData.pickableFilter = this._combinePickableFilters((item) => this.#pickableFilter(item, args?.allowedContentTypes, args?.folderFilter), pickerData?.pickableFilter);
         // set default search data
         if (!pickerData?.search) {
             combinedPickerData.search = {
@@ -32,11 +45,28 @@ export class UmbMediaPickerInputContext extends UmbPickerInputContext {
         };
         await super.openPicker(combinedPickerData);
     }
-    #pickableFilter = (item, allowedContentTypes) => {
+    async #loadFolderTypes() {
+        if (!this.#folderTypesPromise) {
+            this.#folderTypesPromise = this.#mediaTypeStructureRepository.requestMediaTypesOfFolders().then((folderTypes) => {
+                this.#folderTypeUniques = new Set(folderTypes.map((ft) => ft.unique).filter((u) => u != null));
+            });
+        }
+        return this.#folderTypesPromise;
+    }
+    #pickableFilter = (item, allowedContentTypes, folderFilter = UmbMediaPickerFolderFilter.FILES_ONLY) => {
         // Check if the user has no access to this item (tree items only)
         if (isMediaTreeItem(item) && item.noAccess) {
             return false;
         }
+        const isFolder = this.#folderTypeUniques.has(item.mediaType.unique);
+        // Apply folder filter
+        if (folderFilter === UmbMediaPickerFolderFilter.FILES_ONLY && isFolder) {
+            return false;
+        }
+        if (folderFilter === UmbMediaPickerFolderFilter.FOLDERS_ONLY && !isFolder) {
+            return false;
+        }
+        // FILES_AND_FOLDERS — no folder-level filtering
         if (allowedContentTypes && allowedContentTypes.length > 0) {
             return allowedContentTypes
                 .map((contentTypeReference) => contentTypeReference.unique)

package/dist-cms/packages/media/media/components/input-media/input-media.element.d.ts

@@ -1,3 +1,4 @@
+import { UmbMediaPickerFolderFilter } from './input-media.context.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbInteractionMemoryModel } from '../../../../core/interaction-memory/index.js';
 import type { UmbTreeStartNode } from '../../../../core/tree/index.js';
@@ -38,8 +39,9 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     maxMessage: string;
     set selection(ids: Array<string>);
     get selection(): Array<string>;
-    allowedContentTypeIds?: Array<string> | undefined;
+    allowedContentTypeIds?: Array<string>;
     includeTrashed: boolean;
+    folderFilter: UmbMediaPickerFolderFilter;
     startNode?: UmbTreeStartNode;
     set value(selectionString: string | undefined);
     get value(): string | undefined;

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UmbMediaPickerInputContext } from './input-media.context.js';
+import { UmbMediaPickerFolderFilter, UmbMediaPickerInputContext } from './input-media.context.js';
 import { css, customElement, html, ifDefined, nothing, property, repeat, state, } from '../../../../../external/lit/index.js';
 import { jsonStringComparison } from '../../../../../libs/observable-api/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
@@ -128,6 +128,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         this.includeTrashed = false;
+        this.folderFilter = UmbMediaPickerFolderFilter.FILES_ONLY;
         this.#readonly = false;
         this.#interactionMemories = [];
         this._editMediaPath = '';
@@ -169,6 +170,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
                 entityType: UMB_MEDIA_TYPE_ENTITY_TYPE,
             })),
             includeTrashed: this.includeTrashed,
+            folderFilter: this.folderFilter,
         });
     }
     async #onRemove(item) {
@@ -210,6 +212,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
         const href = this.readonly ? undefined : `${this._editMediaPath}edit/${item.unique}`;
         return html `
 			<uui-card-media
+				title=${ifDefined(item.name === null ? undefined : item.name)}
 				name=${ifDefined(item.name === null ? undefined : item.name)}
 				data-mark="${item.entityType}:${item.unique}"
 				href="${ifDefined(href)}"
@@ -296,6 +299,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'include-trashed' })
 ], UmbInputMediaElement.prototype, "includeTrashed", void 0);
+__decorate([
+    property({ type: String, attribute: 'folder-filter' })
+], UmbInputMediaElement.prototype, "folderFilter", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbInputMediaElement.prototype, "startNode", void 0);

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

@@ -42,7 +42,7 @@ export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_b
     maxMessage: string;
     set value(value: Array<UmbMediaPickerPropertyValueEntry> | undefined);
     get value(): Array<UmbMediaPickerPropertyValueEntry> | undefined;
-    allowedContentTypeIds?: string[] | undefined;
+    allowedContentTypeIds?: string[];
     startNode?: UmbTreeStartNode;
     multiple: boolean;
     preselectedCrops?: Array<UmbCropModel>;