@umbraco-cms/backoffice 14.0.0--preview007-e6045110 → 14.0.0--preview007-772eb996

package/dist-cms/external/backend-api/src/services/MemberResource.d.ts

@@ -6,6 +6,18 @@ import type { PagedMemberResponseModel } from '../models/PagedMemberResponseMode
 import type { UpdateMemberRequestModel } from '../models/UpdateMemberRequestModel';
 import type { CancelablePromise } from '../core/CancelablePromise';
 export declare class MemberResource {
+    /**
+     * @returns PagedMemberResponseModel Success
+     * @throws ApiError
+     */
+    static getFilterMember({ memberTypeId, orderBy, orderDirection, filter, skip, take, }: {
+        memberTypeId?: string;
+        orderBy?: string;
+        orderDirection?: DirectionModel;
+        filter?: string;
+        skip?: number;
+        take?: number;
+    }): CancelablePromise<PagedMemberResponseModel>;
     /**
      * @returns any Success
      * @throws ApiError
@@ -50,18 +62,6 @@ export declare class MemberResource {
         id: string;
         requestBody?: UpdateMemberRequestModel;
     }): CancelablePromise<any>;
-    /**
-     * @returns PagedMemberResponseModel Success
-     * @throws ApiError
-     */
-    static getMemberFilter({ memberTypeId, orderBy, orderDirection, filter, skip, take, }: {
-        memberTypeId?: string;
-        orderBy?: string;
-        orderDirection?: DirectionModel;
-        filter?: string;
-        skip?: number;
-        take?: number;
-    }): CancelablePromise<PagedMemberResponseModel>;
     /**
      * @returns any Success
      * @throws ApiError

package/dist-cms/external/backend-api/src/services/TemporaryFileResource.d.ts

@@ -5,7 +5,7 @@ export declare class TemporaryFileResource {
      * @returns string Created
      * @throws ApiError
      */
-    static postTemporaryfile({ formData, }: {
+    static postTemporaryFile({ formData, }: {
         formData?: {
             Id?: string;
             File?: Blob;
@@ -15,19 +15,19 @@ export declare class TemporaryFileResource {
      * @returns any Success
      * @throws ApiError
      */
-    static getTemporaryfileById({ id, }: {
+    static getTemporaryFileById({ id, }: {
         id: string;
     }): CancelablePromise<TemporaryFileResponseModel>;
     /**
      * @returns any Success
      * @throws ApiError
      */
-    static deleteTemporaryfileById({ id, }: {
+    static deleteTemporaryFileById({ id, }: {
         id: string;
     }): CancelablePromise<any>;
     /**
      * @returns any Success
      * @throws ApiError
      */
-    static getTemporaryfileConfiguration(): CancelablePromise<any>;
+    static getTemporaryFileConfiguration(): CancelablePromise<any>;
 }

package/dist-cms/external/backend-api/src/services/UserResource.d.ts

@@ -28,6 +28,19 @@ import type { UserTwoFactorProviderModel } from '../models/UserTwoFactorProvider
 import type { VerifyInviteUserRequestModel } from '../models/VerifyInviteUserRequestModel';
 import type { CancelablePromise } from '../core/CancelablePromise';
 export declare class UserResource {
+    /**
+     * @returns PagedUserResponseModel Success
+     * @throws ApiError
+     */
+    static getFilterUser({ skip, take, orderBy, orderDirection, userGroupIds, userStates, filter, }: {
+        skip?: number;
+        take?: number;
+        orderBy?: UserOrderModel;
+        orderDirection?: DirectionModel;
+        userGroupIds?: Array<string>;
+        userStates?: Array<UserStateModel>;
+        filter?: string;
+    }): CancelablePromise<PagedUserResponseModel>;
     /**
      * @returns any Success
      * @throws ApiError
@@ -214,19 +227,6 @@ export declare class UserResource {
     static postUserEnable({ requestBody, }: {
         requestBody?: EnableUserRequestModel;
     }): CancelablePromise<any>;
-    /**
-     * @returns PagedUserResponseModel Success
-     * @throws ApiError
-     */
-    static getUserFilter({ skip, take, orderBy, orderDirection, userGroupIds, userStates, filter, }: {
-        skip?: number;
-        take?: number;
-        orderBy?: UserOrderModel;
-        orderDirection?: DirectionModel;
-        userGroupIds?: Array<string>;
-        userStates?: Array<UserStateModel>;
-        filter?: string;
-    }): CancelablePromise<PagedUserResponseModel>;
     /**
      * @returns string Created
      * @throws ApiError

package/dist-cms/mocks/data/data-type/data-type.data.js

@@ -7,6 +7,7 @@ export const data = [
         hasChildren: false,
         editorAlias: '',
         values: [],
+        isDeletable: true,
     },
     {
         name: 'Folder 2',
@@ -16,6 +17,7 @@ export const data = [
         hasChildren: true,
         editorAlias: '',
         values: [],
+        isDeletable: true,
     },
     {
         id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae',
@@ -26,6 +28,7 @@ export const data = [
         values: [],
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
     },
     {
         name: 'Text',
@@ -35,6 +38,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.TextBox',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'maxChars',
@@ -50,6 +54,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.TextArea',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -60,6 +65,7 @@ export const data = [
         editorUiAlias: 'My.PropertyEditorUI.Custom',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -70,6 +76,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.ColorPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'useLabel',
@@ -126,6 +133,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.DocumentPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'validationLimit',
@@ -141,6 +149,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.EyeDropper',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 //showPalette
@@ -178,6 +187,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.MultiUrlPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'overlaySize',
@@ -209,6 +219,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.TreePicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'startNode',
@@ -256,6 +267,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.DatePicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'format',
@@ -278,6 +290,7 @@ export const data = [
         editorAlias: 'Umbraco.DateTime',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'format',
@@ -297,6 +310,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.DatePicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'format',
@@ -316,6 +330,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Email',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'inputMode',
@@ -331,6 +346,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.MultipleTextString',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'minNumber',
@@ -350,6 +366,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'multiple',
@@ -373,6 +390,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Slider',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'enableRange',
@@ -408,6 +426,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Toggle',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'default',
@@ -435,6 +454,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Tags',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'group',
@@ -454,6 +474,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.MarkdownEditor',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -464,6 +485,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'items',
@@ -483,6 +505,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.CheckboxList',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'items',
@@ -502,6 +525,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.BlockList',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'blocks',
@@ -565,6 +589,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.MediaPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -575,6 +600,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.ImageCropper',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'crops',
@@ -606,6 +632,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.UploadField',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'fileExtensions',
@@ -625,6 +652,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.BlockGrid',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'blockGroups',
@@ -732,6 +760,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.CollectionView',
         hasChildren: false,
         isFolder: false,
+        isDeletable: false,
         values: [
             { alias: 'pageSize', value: 2 },
             { alias: 'orderDirection', value: 'desc' },
@@ -775,6 +804,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -785,6 +815,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.TinyMCE',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'hideLabel',
@@ -862,6 +893,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Label',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -872,6 +904,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Integer',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -882,6 +915,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.Decimal',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [
             {
                 alias: 'step',
@@ -897,6 +931,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.UserPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -907,6 +942,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.MemberPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -917,6 +953,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.MemberGroupPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -927,6 +964,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.MemberGroupPicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
     {
@@ -937,6 +975,7 @@ export const data = [
         editorUiAlias: 'Umb.PropertyEditorUi.StaticFilePicker',
         hasChildren: false,
         isFolder: false,
+        isDeletable: true,
         values: [],
     },
 ];

package/dist-cms/mocks/data/data-type/data-type.db.js

@@ -23,6 +23,7 @@ const createFolderMockMapper = (request) => {
         isFolder: true,
         hasChildren: false,
         editorAlias: '',
+        isDeletable: true,
         values: [],
     };
 };
@@ -36,6 +37,7 @@ const createDetailMockMapper = (request) => {
         values: request.values,
         isFolder: false,
         hasChildren: false,
+        isDeletable: true,
     };
 };
 const detailResponseMapper = (item) => {
@@ -46,12 +48,14 @@ const detailResponseMapper = (item) => {
         editorAlias: item.editorAlias,
         editorUiAlias: item.editorUiAlias,
         values: item.values,
+        isDeletable: item.isDeletable,
     };
 };
 const itemResponseMapper = (item) => {
     return {
         id: item.id,
         name: item.name,
+        isDeletable: item.isDeletable,
     };
 };
 export const umbDataTypeMockDb = new UmbDataTypeMockDB(data);

package/dist-cms/packages/core/temporary-file/temporary-file.server.data-source.js

@@ -36,7 +36,7 @@ export class UmbTemporaryFileServerDataSource {
      * @memberof UmbTemporaryFileServerDataSource
      */
     async create(id, file) {
-        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.postTemporaryfile({
+        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.postTemporaryFile({
             formData: {
                 Id: id,
                 File: file,
@@ -52,7 +52,7 @@ export class UmbTemporaryFileServerDataSource {
     read(id) {
         if (!id)
             throw new Error('Id is missing');
-        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.getTemporaryfileById({ id }));
+        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.getTemporaryFileById({ id }));
     }
     /**
      * Deletes a temporary file from the server
@@ -63,7 +63,7 @@ export class UmbTemporaryFileServerDataSource {
     delete(id) {
         if (!id)
             throw new Error('Id is missing');
-        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.deleteTemporaryfileById({ id }));
+        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.deleteTemporaryFileById({ id }));
     }
 }
 _UmbTemporaryFileServerDataSource_host = new WeakMap();

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

@@ -1 +1 @@
-export declare const manifests: (import("../../../core/extension-registry/index.js").ManifestCollection | import("../../../core/extension-registry/index.js").ManifestRepository<import("../../../../libs/extension-api/index.js").UmbApi>)[];
+export declare const manifests: (import("../../../core/extension-registry/index.js").ManifestCollection | import("../../../core/extension-registry/index.js").ManifestCollectionView | import("../../../core/extension-registry/index.js").ManifestRepository<import("../../../../libs/extension-api/index.js").UmbApi>)[];

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

@@ -1,5 +1,6 @@
 import { UMB_MEDIA_COLLECTION_REPOSITORY_ALIAS } from './repository/index.js';
 import { manifests as collectionRepositoryManifests } from './repository/manifests.js';
+import { manifests as collectionViewManifests } from './views/manifests.js';
 import { UmbMediaCollectionContext } from './media-collection.context.js';
 import { UMB_MEDIA_COLLECTION_ALIAS } from './index.js';
 const collectionManifest = {
@@ -15,4 +16,5 @@ const collectionManifest = {
 export const manifests = [
     collectionManifest,
     ...collectionRepositoryManifests,
+    ...collectionViewManifests,
 ];

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

@@ -1,7 +1,8 @@
+import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS } from './views/index.js';
 import { UmbDefaultCollectionContext } from '../../../core/collection/index.js';
 export class UmbMediaCollectionContext extends UmbDefaultCollectionContext {
     constructor(host) {
-        super(host, 'Umb.CollectionView.MediaGrid');
+        super(host, UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS);
         this.selection.setSelectable(true);
     }
 }

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

@@ -1,19 +1,10 @@
-import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 export declare class UmbMediaGridCollectionViewElement extends UmbLitElement {
-    private _mediaItems?;
+    #private;
+    private _items;
+    private _loading;
     private _selection;
-    private _collectionContext?;
     constructor();
-    disconnectedCallback(): void;
-    private _handleDragEnter;
-    private _handleDragLeave;
-    private _handleDrop;
-    private _observeCollectionContext;
-    private _handleOpenItem;
-    private _handleSelect;
-    private _handleDeselect;
-    private _isSelected;
-    private _renderMediaItem;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

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

@@ -0,0 +1,128 @@
+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;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbMediaGridCollectionViewElement_instances, _UmbMediaGridCollectionViewElement_collectionContext, _UmbMediaGridCollectionViewElement_observeCollectionContext, _UmbMediaGridCollectionViewElement_onOpen, _UmbMediaGridCollectionViewElement_onSelect, _UmbMediaGridCollectionViewElement_onDeselect, _UmbMediaGridCollectionViewElement_isSelected, _UmbMediaGridCollectionViewElement_renderCard;
+import { css, html, customElement, state, repeat } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbTextStyles } from '../../../../../../shared/style/index.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../../../../core/collection/index.js';
+let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement extends UmbLitElement {
+    constructor() {
+        super();
+        _UmbMediaGridCollectionViewElement_instances.add(this);
+        this._items = [];
+        this._loading = false;
+        this._selection = [];
+        _UmbMediaGridCollectionViewElement_collectionContext.set(this, void 0);
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (collectionContext) => {
+            __classPrivateFieldSet(this, _UmbMediaGridCollectionViewElement_collectionContext, collectionContext, "f");
+            __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_instances, "m", _UmbMediaGridCollectionViewElement_observeCollectionContext).call(this);
+        });
+    }
+    render() {
+        if (this._loading) {
+            return html `<div class="container"><uui-loader></uui-loader></div>`;
+        }
+        if (this._items.length === 0) {
+            return html `<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`;
+        }
+        return html `
+			<div id="media-grid">
+				${repeat(this._items, (item) => item.unique, (item) => __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_instances, "m", _UmbMediaGridCollectionViewElement_renderCard).call(this, item))}
+			</div>
+		`;
+    }
+};
+_UmbMediaGridCollectionViewElement_collectionContext = new WeakMap();
+_UmbMediaGridCollectionViewElement_instances = new WeakSet();
+_UmbMediaGridCollectionViewElement_observeCollectionContext = function _UmbMediaGridCollectionViewElement_observeCollectionContext() {
+    if (!__classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_collectionContext, "f"))
+        return;
+    this.observe(__classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_collectionContext, "f").items, (items) => (this._items = items), 'umbCollectionItemsObserver');
+    this.observe(__classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_collectionContext, "f").selection.selection, (selection) => (this._selection = selection), 'umbCollectionSelectionObserver');
+};
+_UmbMediaGridCollectionViewElement_onOpen = function _UmbMediaGridCollectionViewElement_onOpen(item) {
+    //TODO: Fix when we have dynamic routing
+    history.pushState(null, '', 'section/media-management/workspace/media/edit/' + item.unique);
+};
+_UmbMediaGridCollectionViewElement_onSelect = function _UmbMediaGridCollectionViewElement_onSelect(item) {
+    if (item.unique) {
+        __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_collectionContext, "f")?.selection.select(item.unique);
+    }
+};
+_UmbMediaGridCollectionViewElement_onDeselect = function _UmbMediaGridCollectionViewElement_onDeselect(item) {
+    if (item.unique) {
+        __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_collectionContext, "f")?.selection.deselect(item.unique);
+    }
+};
+_UmbMediaGridCollectionViewElement_isSelected = function _UmbMediaGridCollectionViewElement_isSelected(item) {
+    return __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_collectionContext, "f")?.selection.isSelected(item.unique);
+};
+_UmbMediaGridCollectionViewElement_renderCard = function _UmbMediaGridCollectionViewElement_renderCard(item) {
+    // TODO: Fix the file extension when media items have a file extension. [?]
+    return html `
+			<uui-card-media
+				.name=${item.name ?? 'Unnamed Media'}
+				selectable
+				?select-only=${this._selection && this._selection.length > 0}
+				?selected=${__classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_instances, "m", _UmbMediaGridCollectionViewElement_isSelected).call(this, item)}
+				@open=${() => __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_instances, "m", _UmbMediaGridCollectionViewElement_onOpen).call(this, item)}
+				@selected=${() => __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_instances, "m", _UmbMediaGridCollectionViewElement_onSelect).call(this, item)}
+				@deselected=${() => __classPrivateFieldGet(this, _UmbMediaGridCollectionViewElement_instances, "m", _UmbMediaGridCollectionViewElement_onDeselect).call(this, item)}
+				class="media-item"
+				file-ext="${item.icon}">
+				<!-- TODO: [LK] I'd like to indicate a busy state when bulk actions are triggered. -->
+				<!-- <div class="container"><uui-loader></uui-loader></div> -->
+			</uui-card-media>
+		`;
+};
+UmbMediaGridCollectionViewElement.styles = [
+    UmbTextStyles,
+    css `
+			:host {
+				display: flex;
+				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));
+				grid-template-rows: repeat(auto-fill, 200px);
+				gap: var(--uui-size-space-5);
+			}
+		`,
+];
+__decorate([
+    state()
+], UmbMediaGridCollectionViewElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbMediaGridCollectionViewElement.prototype, "_loading", void 0);
+__decorate([
+    state()
+], UmbMediaGridCollectionViewElement.prototype, "_selection", void 0);
+UmbMediaGridCollectionViewElement = __decorate([
+    customElement('umb-media-grid-collection-view')
+], UmbMediaGridCollectionViewElement);
+export { UmbMediaGridCollectionViewElement };
+export default UmbMediaGridCollectionViewElement;

package/dist-cms/packages/media/media/collection/views/index.d.ts

@@ -0,0 +1,2 @@
+export declare const UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS = "Umb.CollectionView.Media.Grid";
+export declare const UMB_MEDIA_TABLE_COLLECTION_VIEW_ALIAS = "Umb.CollectionView.Media.Table";

package/dist-cms/packages/media/media/collection/views/index.js

@@ -0,0 +1,2 @@
+export const UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Media.Grid';
+export const UMB_MEDIA_TABLE_COLLECTION_VIEW_ALIAS = 'Umb.CollectionView.Media.Table';

package/dist-cms/packages/media/media/collection/views/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestCollectionView } from '../../../../core/extension-registry/index.js';
+export declare const manifests: ManifestCollectionView[];