@umbraco-cms/backoffice 14.0.0--preview007-e6045110 → 14.0.0--preview007-2aa9121f

package/dist-cms/custom-elements.json

@@ -8129,19 +8129,19 @@
       ]
     },
     {
-      "name": "umb-collection-view-media-test",
-      "path": "./../src/packages/media/media/collection-view/collection-view-media-test.element.ts",
+      "name": "umb-media-collection",
+      "path": "./../src/packages/media/media/collection/media-collection.element.ts",
       "properties": [
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UmbTextStyles\",null]"
+          "default": "[null]"
         }
       ]
     },
     {
       "name": "umb-media-grid-collection-view",
-      "path": "./../src/packages/media/media/collection-view/media-grid-collection-view.element.ts",
+      "path": "./../src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts",
       "properties": [
         {
           "name": "styles",
@@ -8151,24 +8151,36 @@
       ]
     },
     {
-      "name": "umb-media-table-collection-view",
-      "path": "./../src/packages/media/media/collection-view/media-table-collection-view.element.ts",
+      "name": "umb-media-table-column-name",
+      "path": "./../src/packages/media/media/collection/views/table/column-layouts/media-table-column-name.element.ts",
       "properties": [
+        {
+          "name": "column",
+          "type": "UmbTableColumn"
+        },
+        {
+          "name": "item",
+          "type": "UmbTableItem"
+        },
+        {
+          "name": "value",
+          "type": "UmbMediaCollectionItemModel"
+        },
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UmbTextStyles\",null]"
+          "default": "[null]"
         }
       ]
     },
     {
-      "name": "umb-media-collection",
-      "path": "./../src/packages/media/media/collection/media-collection.element.ts",
+      "name": "umb-media-table-collection-view",
+      "path": "./../src/packages/media/media/collection/views/table/media-table-collection-view.element.ts",
       "properties": [
         {
           "name": "styles",
           "type": "array",
-          "default": "[null]"
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },
@@ -8528,6 +8540,17 @@
         }
       ]
     },
+    {
+      "name": "umb-media-section-view",
+      "path": "./../src/packages/media/media/section-view/media-section-view.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-media-workspace-editor",
       "path": "./../src/packages/media/media/workspace/media-workspace-editor.element.ts",

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[];

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

@@ -0,0 +1,39 @@
+import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS, UMB_MEDIA_TABLE_COLLECTION_VIEW_ALIAS } from './index.js';
+import { UMB_COLLECTION_ALIAS_CONDITION } from '../../../../core/collection/index.js';
+const gridViewManifest = {
+    type: 'collectionView',
+    alias: UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS,
+    name: 'Media Grid Collection View',
+    element: () => import('./grid/media-grid-collection-view.element.js'),
+    weight: 300,
+    meta: {
+        label: 'Grid',
+        icon: 'icon-grid',
+        pathName: 'grid',
+    },
+    conditions: [
+        {
+            alias: UMB_COLLECTION_ALIAS_CONDITION,
+            match: 'Umb.Collection.Media',
+        },
+    ],
+};
+const tableViewManifest = {
+    type: 'collectionView',
+    alias: UMB_MEDIA_TABLE_COLLECTION_VIEW_ALIAS,
+    name: 'Media Table Collection View',
+    element: () => import('./table/media-table-collection-view.element.js'),
+    weight: 200,
+    meta: {
+        label: 'Table',
+        icon: 'icon-list',
+        pathName: 'table',
+    },
+    conditions: [
+        {
+            alias: UMB_COLLECTION_ALIAS_CONDITION,
+            match: 'Umb.Collection.Media',
+        },
+    ],
+};
+export const manifests = [gridViewManifest, tableViewManifest];

package/dist-cms/packages/media/media/collection/views/table/column-layouts/media-table-column-name.element.d.ts

@@ -0,0 +1,19 @@
+import type { UmbMediaCollectionItemModel } from '../../../types.js';
+import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
+import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '../../../../../../core/components/index.js';
+export declare class UmbMediaTableColumnNameElement extends UmbLitElement implements UmbTableColumnLayoutElement {
+    #private;
+    private _editMediaPath;
+    column: UmbTableColumn;
+    item: UmbTableItem;
+    value: UmbMediaCollectionItemModel;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbMediaTableColumnNameElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-media-table-column-name': UmbMediaTableColumnNameElement;
+    }
+}

package/dist-cms/packages/media/media/collection/views/table/column-layouts/media-table-column-name.element.js

@@ -0,0 +1,69 @@
+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 __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 _UmbMediaTableColumnNameElement_instances, _UmbMediaTableColumnNameElement_onClick;
+import { css, customElement, html, property, state } from '../../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../../../core/modal/index.js';
+let UmbMediaTableColumnNameElement = class UmbMediaTableColumnNameElement extends UmbLitElement {
+    constructor() {
+        super();
+        _UmbMediaTableColumnNameElement_instances.add(this);
+        this._editMediaPath = '';
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath('media')
+            .onSetup(() => {
+            return { data: { entityType: 'media', preset: {} } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._editMediaPath = routeBuilder({});
+        });
+    }
+    render() {
+        return html `<uui-button
+			look="default"
+			color="default"
+			compact
+			href="${this._editMediaPath}edit/${this.value.unique}"
+			label="${this.value.name}"
+			@click=${__classPrivateFieldGet(this, _UmbMediaTableColumnNameElement_instances, "m", _UmbMediaTableColumnNameElement_onClick)}></uui-button>`;
+    }
+};
+_UmbMediaTableColumnNameElement_instances = new WeakSet();
+_UmbMediaTableColumnNameElement_onClick = function _UmbMediaTableColumnNameElement_onClick(event) {
+    // TODO: [LK] Review the `stopPropagation` usage, as it causes a page reload.
+    // But we still need a say to prevent the `umb-table` from triggering a selection event.
+    event.stopPropagation();
+};
+UmbMediaTableColumnNameElement.styles = [
+    css `
+			uui-button {
+				text-align: left;
+			}
+		`,
+];
+__decorate([
+    state()
+], UmbMediaTableColumnNameElement.prototype, "_editMediaPath", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbMediaTableColumnNameElement.prototype, "column", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbMediaTableColumnNameElement.prototype, "item", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbMediaTableColumnNameElement.prototype, "value", void 0);
+UmbMediaTableColumnNameElement = __decorate([
+    customElement('umb-media-table-column-name')
+], UmbMediaTableColumnNameElement);
+export { UmbMediaTableColumnNameElement };
+export default UmbMediaTableColumnNameElement;

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

@@ -1,17 +1,15 @@
-import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import './column-layouts/media-table-column-name.element.js';
 export declare class UmbMediaTableCollectionViewElement extends UmbLitElement {
-    private _mediaItems?;
+    #private;
+    private _loading;
+    private _userDefinedProperties?;
+    private _items?;
     private _tableConfig;
     private _tableColumns;
     private _tableItems;
     private _selection;
-    private _collectionContext?;
     constructor();
-    private _observeCollectionContext;
-    private _createTableItems;
-    private _handleSelect;
-    private _handleDeselect;
-    private _handleOrdering;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

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

@@ -0,0 +1,205 @@
+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 _UmbMediaTableCollectionViewElement_instances, _UmbMediaTableCollectionViewElement_systemColumns, _UmbMediaTableCollectionViewElement_collectionContext, _UmbMediaTableCollectionViewElement_observeCollectionContext, _UmbMediaTableCollectionViewElement_createTableHeadings, _UmbMediaTableCollectionViewElement_createTableItems, _UmbMediaTableCollectionViewElement_getPropertyValueByAlias, _UmbMediaTableCollectionViewElement_handleSelect, _UmbMediaTableCollectionViewElement_handleDeselect, _UmbMediaTableCollectionViewElement_handleOrdering;
+import { css, html, customElement, state } 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';
+import './column-layouts/media-table-column-name.element.js';
+let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElement extends UmbLitElement {
+    constructor() {
+        super();
+        _UmbMediaTableCollectionViewElement_instances.add(this);
+        this._loading = false;
+        this._tableConfig = {
+            allowSelection: true,
+        };
+        this._tableColumns = [];
+        _UmbMediaTableCollectionViewElement_systemColumns.set(this, [
+            {
+                name: this.localize.term('general_name'),
+                alias: 'entityName',
+                elementName: 'umb-media-table-column-name',
+                allowSorting: true,
+            },
+        ]);
+        this._tableItems = [];
+        this._selection = [];
+        _UmbMediaTableCollectionViewElement_collectionContext.set(this, void 0);
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (collectionContext) => {
+            __classPrivateFieldSet(this, _UmbMediaTableCollectionViewElement_collectionContext, collectionContext, "f");
+            __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_observeCollectionContext).call(this);
+        });
+    }
+    render() {
+        if (this._loading) {
+            return html `<div class="container"><uui-loader></uui-loader></div>`;
+        }
+        if (this._tableItems.length === 0) {
+            return html `<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`;
+        }
+        return html `
+			<umb-table
+				.config=${this._tableConfig}
+				.columns=${this._tableColumns}
+				.items=${this._tableItems}
+				.selection=${this._selection}
+				@selected="${__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_handleSelect)}"
+				@deselected="${__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_handleDeselect)}"
+				@ordered="${__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_handleOrdering)}"></umb-table>
+		`;
+    }
+};
+_UmbMediaTableCollectionViewElement_systemColumns = new WeakMap();
+_UmbMediaTableCollectionViewElement_collectionContext = new WeakMap();
+_UmbMediaTableCollectionViewElement_instances = new WeakSet();
+_UmbMediaTableCollectionViewElement_observeCollectionContext = function _UmbMediaTableCollectionViewElement_observeCollectionContext() {
+    if (!__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_collectionContext, "f"))
+        return;
+    this.observe(__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_collectionContext, "f").userDefinedProperties, (userDefinedProperties) => {
+        this._userDefinedProperties = userDefinedProperties;
+        __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_createTableHeadings).call(this);
+    }, 'umbCollectionUserDefinedPropertiesObserver');
+    this.observe(__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_collectionContext, "f").items, (items) => {
+        this._items = items;
+        __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_createTableItems).call(this, this._items);
+    }, 'umbCollectionItemsObserver');
+    this.observe(__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_collectionContext, "f").selection.selection, (selection) => {
+        this._selection = selection;
+    }, 'umbCollectionSelectionObserver');
+};
+_UmbMediaTableCollectionViewElement_createTableHeadings = function _UmbMediaTableCollectionViewElement_createTableHeadings() {
+    if (this._userDefinedProperties && this._userDefinedProperties.length > 0) {
+        const userColumns = this._userDefinedProperties.map((item) => {
+            return {
+                name: item.header,
+                alias: item.alias,
+                elementName: item.elementName,
+                allowSorting: true,
+            };
+        });
+        this._tableColumns = [...__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_systemColumns, "f"), ...userColumns];
+    }
+    else {
+        this._tableColumns = [...__classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_systemColumns, "f")];
+    }
+};
+_UmbMediaTableCollectionViewElement_createTableItems = function _UmbMediaTableCollectionViewElement_createTableItems(items) {
+    if (this._tableColumns.length === 0) {
+        __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_createTableHeadings).call(this);
+    }
+    this._tableItems = items.map((item) => {
+        if (!item.unique)
+            throw new Error('Item id is missing.');
+        const data = this._tableColumns?.map((column) => {
+            return {
+                columnAlias: column.alias,
+                value: column.elementName ? item : __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_instances, "m", _UmbMediaTableCollectionViewElement_getPropertyValueByAlias).call(this, item, column.alias),
+            };
+        }) ?? [];
+        return {
+            id: item.unique,
+            icon: item.icon,
+            data: data,
+        };
+    });
+};
+_UmbMediaTableCollectionViewElement_getPropertyValueByAlias = function _UmbMediaTableCollectionViewElement_getPropertyValueByAlias(item, alias) {
+    switch (alias) {
+        case 'createDate':
+            return item.createDate.toLocaleString();
+        case 'entityName':
+            return item.name;
+        case 'owner':
+            return item.creator;
+        case 'updateDate':
+            return item.updateDate.toLocaleString();
+        default:
+            return item.values.find((value) => value.alias === alias)?.value ?? '';
+    }
+};
+_UmbMediaTableCollectionViewElement_handleSelect = function _UmbMediaTableCollectionViewElement_handleSelect(event) {
+    event.stopPropagation();
+    const table = event.target;
+    const selection = table.selection;
+    __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_collectionContext, "f")?.selection.setSelection(selection);
+};
+_UmbMediaTableCollectionViewElement_handleDeselect = function _UmbMediaTableCollectionViewElement_handleDeselect(event) {
+    event.stopPropagation();
+    const table = event.target;
+    const selection = table.selection;
+    __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_collectionContext, "f")?.selection.setSelection(selection);
+};
+_UmbMediaTableCollectionViewElement_handleOrdering = function _UmbMediaTableCollectionViewElement_handleOrdering(event) {
+    const table = event.target;
+    const orderingColumn = table.orderingColumn;
+    const orderingDesc = table.orderingDesc;
+    __classPrivateFieldGet(this, _UmbMediaTableCollectionViewElement_collectionContext, "f")?.setFilter({
+        orderBy: orderingColumn,
+        orderDirection: orderingDesc ? 'desc' : 'asc',
+    });
+};
+UmbMediaTableCollectionViewElement.styles = [
+    UmbTextStyles,
+    css `
+			:host {
+				display: block;
+				box-sizing: border-box;
+				height: auto;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+
+			/* TODO: Should we have embedded padding in the table component? */
+			umb-table {
+				padding: 0; /* To fix the embedded padding in the table component. */
+			}
+
+			.container {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		`,
+];
+__decorate([
+    state()
+], UmbMediaTableCollectionViewElement.prototype, "_loading", void 0);
+__decorate([
+    state()
+], UmbMediaTableCollectionViewElement.prototype, "_userDefinedProperties", void 0);
+__decorate([
+    state()
+], UmbMediaTableCollectionViewElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbMediaTableCollectionViewElement.prototype, "_tableConfig", void 0);
+__decorate([
+    state()
+], UmbMediaTableCollectionViewElement.prototype, "_tableColumns", void 0);
+__decorate([
+    state()
+], UmbMediaTableCollectionViewElement.prototype, "_tableItems", void 0);
+__decorate([
+    state()
+], UmbMediaTableCollectionViewElement.prototype, "_selection", void 0);
+UmbMediaTableCollectionViewElement = __decorate([
+    customElement('umb-media-table-collection-view')
+], UmbMediaTableCollectionViewElement);
+export { UmbMediaTableCollectionViewElement };
+export default UmbMediaTableCollectionViewElement;

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

@@ -1 +1 @@
-export declare const manifests: (import("../../core/index.js").ManifestCollection | import("../../core/index.js").ManifestCollectionView | import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestEntityBulkAction | import("../../core/index.js").ManifestItemStore | import("../../core/index.js").ManifestMenuItemTreeKind | import("../../core/index.js").ManifestPropertyEditorUi | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceView | import("../../core/index.js").ManifestUserPermission | import("../../core/index.js").ManifestRepository<import("../../../libs/extension-api/index.js").UmbApi>)[];
+export declare const manifests: (import("../../core/index.js").ManifestCollection | import("../../core/index.js").ManifestCollectionView | import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestEntityBulkAction | import("../../core/index.js").ManifestItemStore | import("../../core/index.js").ManifestMenuItemTreeKind | import("../../core/index.js").ManifestPropertyEditorUi | import("../../core/index.js").ManifestSectionView | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceView | import("../../core/index.js").ManifestUserPermission | import("../../core/index.js").ManifestRepository<import("../../../libs/extension-api/index.js").UmbApi>)[];