@umbraco-cms/backoffice 18.1.1 → 18.2.0-rc

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbMediaDropzoneManager } from './media-dropzone.manager.js';
 import { css, customElement, property } from '../../../../external/lit/index.js';
 import { UmbInputDropzoneElement, UmbFileDropzoneItemStatus } from '../../dropzone/index.js';
+import { UUIBlinkAnimationValue, UUIBlinkKeyframes, } from '../../../../external/uui/index.js';
 /**
  * A dropzone for uploading files and folders as media items. It is hidden by default and will be shown when dragging files over the window.
  * @element umb-dropzone-media
@@ -68,10 +69,6 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
         this._manager = new UmbMediaDropzoneManager(this);
         this.progressItems = () => this._manager.progressItems;
         this.progress = () => this._manager.progress;
-        document.addEventListener('dragenter', this.#handleDragEnter);
-        document.addEventListener('dragleave', this.#handleDragLeave);
-        document.addEventListener('dragover', this.#handleDragOver);
-        document.addEventListener('drop', this.#handleDrop);
         // TODO: Revisit this. I am not sure why it is needed to call these methods here when they are already called in the constructor of the parent class.
         // If we do not call them here, the observer will use the wrong instance of the dropzone manager (UmbDropZoneManager instead of UmbMediaDropzoneManager).
         this._observeProgress();
@@ -86,6 +83,13 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
             }
         }, '_observeProgressItemsComplete');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('dragenter', this.#handleDragEnter);
+        document.addEventListener('dragleave', this.#handleDragLeave);
+        document.addEventListener('dragover', this.#handleDragOver);
+        document.addEventListener('drop', this.#handleDrop);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('dragenter', this.#handleDragEnter);
@@ -98,10 +102,12 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
     }
     static { this.styles = [
         ...UmbInputDropzoneElement.styles,
+        UUIBlinkKeyframes,
         css `
 			:host(:not([disabled])[dragging]) #dropzone {
 				opacity: 1;
 				pointer-events: all;
+				animation: ${UUIBlinkAnimationValue};
 			}
 
 			[dropzone] {
@@ -116,8 +122,6 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
 				justify-content: center;
 				position: absolute;
 				z-index: 100;
-				border-radius: var(--uui-border-radius);
-				border: 1px solid var(--uui-color-focus);
 				box-sizing: border-box;
 			}
 		`,

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

@@ -145,7 +145,7 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
         // Check the parent which children media types are allowed.
         const parent = item.parentUnique ? await this.#mediaDetailRepository.requestByUnique(item.parentUnique) : null;
         const allowedChildren = await this.#getAllowedChildrenOf(parent?.data?.mediaType.unique ?? null, item.parentUnique);
-        const extension = item.temporaryFile ? getFileExtension(item.temporaryFile.file.name) ?? null : null;
+        const extension = item.temporaryFile ? (getFileExtension(item.temporaryFile.file.name) ?? null) : null;
         // Check which media types allow the file's extension.
         const availableMediaTypes = await this.#getAvailableMediaTypesOf(extension);
         if (!availableMediaTypes.length)

package/dist-cms/packages/media/media/entity-actions/move-to/manifests.js

@@ -1,8 +1,8 @@
 import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEDIA_TREE_REPOSITORY_ALIAS, UMB_MEDIA_TREE_ALIAS } from '../../constants.js';
+import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
 import { UMB_MOVE_MEDIA_REPOSITORY_ALIAS } from './constants.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
-import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
 import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '../../../../core/recycle-bin/index.js';
 export const manifests = [
     {

package/dist-cms/packages/media/media/entity-actions/move-to/repository/media-move.repository.d.ts

@@ -3,7 +3,7 @@ import { UmbRepositoryBase } from '../../../../../core/repository/index.js';
 export declare class UmbMoveMediaRepository extends UmbRepositoryBase implements UmbMoveRepository {
     #private;
     requestMoveTo(args: UmbMoveToRequestArgs): Promise<{
-        error: import("../../../../../core/resources/index.js").UmbCancelError | import("../../../../../core/resources/index.js").UmbApiError | undefined;
+        error: Error | import("../../../../../core/resources/index.js").UmbError | import("../../../../../core/resources/index.js").UmbCancelError | import("../../../../../core/resources/index.js").UmbApiError | undefined;
     }>;
 }
 export { UmbMoveMediaRepository as api };

package/dist-cms/packages/media/media/entity-actions/move-to/repository/media-move.server.data-source.d.ts

@@ -1,5 +1,6 @@
 import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
 import type { UmbMoveDataSource, UmbMoveToRequestArgs } from '../../../../../core/tree/index.js';
+import type { UmbDataSourceErrorResponse } from '../../../../../core/repository/index.js';
 /**
  * Move Media Server Data Source
  * @class UmbMoveMediaServerDataSource
@@ -14,15 +15,9 @@ export declare class UmbMoveMediaServerDataSource implements UmbMoveDataSource {
     constructor(host: UmbControllerHost);
     /**
      * Move an item for the given id to the target unique
-     * @param {string} unique
-     * @param {(string | null)} targetUnique
-     * @param args
-     * @returns {*}
+     * @param {UmbMoveToRequestArgs} args - The move request arguments
+     * @returns {UmbDataSourceErrorResponse} A promise that resolves once the media has been moved
      * @memberof UmbMoveMediaServerDataSource
      */
-    moveTo(args: UmbMoveToRequestArgs): Promise<import("../../../../../core/resources/index.js").UmbApiResponse<{
-        data: unknown;
-        request: Request;
-        response: Response;
-    }>>;
+    moveTo(args: UmbMoveToRequestArgs): Promise<UmbDataSourceErrorResponse>;
 }

package/dist-cms/packages/media/media/entity-actions/move-to/repository/media-move.server.data-source.js

@@ -16,10 +16,8 @@ export class UmbMoveMediaServerDataSource {
     }
     /**
      * Move an item for the given id to the target unique
-     * @param {string} unique
-     * @param {(string | null)} targetUnique
-     * @param args
-     * @returns {*}
+     * @param {UmbMoveToRequestArgs} args - The move request arguments
+     * @returns {UmbDataSourceErrorResponse} A promise that resolves once the media has been moved
      * @memberof UmbMoveMediaServerDataSource
      */
     async moveTo(args) {

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

@@ -3,7 +3,7 @@ import type { UmbSortChildrenOfArgs, UmbSortChildrenOfDataSource } from '../../.
 /**
  * A server data source for sorting children of a Media
  * @class UmbSortChildrenOfMediaServerDataSource
- * @implements {RepositoryDetailDataSource}
+ * @implements {UmbSortChildrenOfDataSource}
  */
 export declare class UmbSortChildrenOfMediaServerDataSource implements UmbSortChildrenOfDataSource {
     #private;
@@ -15,7 +15,7 @@ export declare class UmbSortChildrenOfMediaServerDataSource implements UmbSortCh
     constructor(host: UmbControllerHost);
     /**
      * Creates the Public Access for the given Media unique
-     * @param {UmbSortChildrenOfArgs} args
+     * @param {UmbSortChildrenOfArgs} args - The sorting request arguments
      * @memberof UmbSortChildrenOfMediaServerDataSource
      */
     sortChildrenOf(args: UmbSortChildrenOfArgs): Promise<import("../../../../../core/resources/index.js").UmbApiResponse<{

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

@@ -3,7 +3,7 @@ import { tryExecute } from '../../../../../core/resources/index.js';
 /**
  * A server data source for sorting children of a Media
  * @class UmbSortChildrenOfMediaServerDataSource
- * @implements {RepositoryDetailDataSource}
+ * @implements {UmbSortChildrenOfDataSource}
  */
 export class UmbSortChildrenOfMediaServerDataSource {
     #host;
@@ -17,7 +17,7 @@ export class UmbSortChildrenOfMediaServerDataSource {
     }
     /**
      * Creates the Public Access for the given Media unique
-     * @param {UmbSortChildrenOfArgs} args
+     * @param {UmbSortChildrenOfArgs} args - The sorting request arguments
      * @memberof UmbSortChildrenOfMediaServerDataSource
      */
     async sortChildrenOf(args) {

package/dist-cms/packages/media/media/entity-bulk-actions/move-to/manifests.js

@@ -1,8 +1,8 @@
 import { UMB_MEDIA_COLLECTION_ALIAS, UMB_MEDIA_TREE_ALIAS } from '../../constants.js';
 import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
+import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
 import { UMB_BULK_MOVE_MEDIA_REPOSITORY_ALIAS } from './constants.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
-import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
 import { UMB_COLLECTION_ALIAS_CONDITION } from '../../../../core/collection/index.js';
 const bulkMoveAction = {
     type: 'entityBulkAction',

package/dist-cms/packages/media/media/item/media-item-ref.element.d.ts

@@ -10,7 +10,7 @@ export declare class UmbMediaItemRefElement extends UmbLitElement {
     private _editPath;
     private _userHasSectionAccess;
     constructor();
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 export { UmbMediaItemRefElement as element };
 declare global {

package/dist-cms/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.js

@@ -51,8 +51,7 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
         this.#observeAcceptedFileTypes();
         this.#getSrc();
     }
-    async #observeAcceptedFileTypes() {
-        await this.#config.initialized;
+    #observeAcceptedFileTypes() {
         this.observe(this.#config.part('imageFileTypes'), (imageFileTypes) => (this.#imageFileTypes = imageFileTypes), '_observeFileTypes');
     }
     async #getSrc() {
@@ -69,7 +68,7 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
         /**
          * Combine the crops from the property editor with the stored crops and ignore any invalid crops
          * (e.g. crops that have been removed from the property editor)
-         * @remark If a crop is removed from the property editor, it will be ignored and not saved
+         * @remarks If a crop is removed from the property editor, it will be ignored and not saved
          */
         const crops = this._crops.map((crop) => {
             const existingCrop = this.value.crops?.find((c) => c.alias === crop.alias);

package/dist-cms/packages/media/media/modals/media-caption-alt-text/media-caption-alt-text-modal.element.js

@@ -67,41 +67,41 @@ let UmbMediaCaptionAltTextModalElement = class UmbMediaCaptionAltTextModalElemen
         return html `
 			<umb-body-layout .headline=${this.localize.term('defaultdialogs_editSelectedMedia')}>
 				<uui-box>
-				<div id="wrapper">
-					<uui-label for="alt-text">${this.localize.term('content_altTextOptional')}</uui-label>
-					<uui-input
-						id="alt-text"
-						label="alt text"
-						.value=${this.value?.altText ?? ''}
-						@input=${(e) => (this.value = { ...this.value, altText: e.target.value })}></uui-input>
+					<div id="wrapper">
+						<uui-label for="alt-text">${this.localize.term('content_altTextOptional')}</uui-label>
+						<uui-input
+							id="alt-text"
+							label="alt text"
+							.value=${this.value?.altText ?? ''}
+							@input=${(e) => (this.value = { ...this.value, altText: e.target.value })}></uui-input>
 
-					<uui-label for="caption">${this.localize.term('content_captionTextOptional')}</uui-label>
-					<uui-input
-						id="caption"
-						label="caption"
-						.value=${this.value?.caption ?? ''}
-						@input=${(e) => (this.value = { ...this.value, caption: e.target.value })}></uui-input>
+						<uui-label for="caption">${this.localize.term('content_captionTextOptional')}</uui-label>
+						<uui-input
+							id="caption"
+							label="caption"
+							.value=${this.value?.caption ?? ''}
+							@input=${(e) => (this.value = { ...this.value, caption: e.target.value })}></uui-input>
 
-					<umb-input-dimensions
-						.width=${this.value?.width}
-						.height=${this.value?.height}
-						.naturalWidth=${this._naturalWidth}
-						.naturalHeight=${this._naturalHeight}
-						@change=${this.#onDimensionsChange}></umb-input-dimensions>
+						<umb-input-dimensions
+							.width=${this.value?.width}
+							.height=${this.value?.height}
+							.naturalWidth=${this._naturalWidth}
+							.naturalHeight=${this._naturalHeight}
+							@change=${this.#onDimensionsChange}></umb-input-dimensions>
 
-					<figure id="mainobject">
-						${this.value?.url
+						<figure id="mainobject">
+							${this.value?.url
             ? html `<img
-									src=${this.value.url}
-									alt=${this.value?.altText ?? ''}
-									decoding="async"
-									style=${this.value?.width && this.value?.height
+										src=${this.value.url}
+										alt=${this.value?.altText ?? ''}
+										decoding="async"
+										style=${this.value?.width && this.value?.height
                 ? `width: ${this.value.width}px; aspect-ratio: ${this.value.width} / ${this.value.height}`
                 : ''} />`
             : ''}
-						<figcaption>${this.value?.caption ?? ''}</figcaption>
-					</figure>
-				</div>
+							<figcaption>${this.value?.caption ?? ''}</figcaption>
+						</figure>
+					</div>
 				</uui-box>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>

package/dist-cms/packages/media/media/modals/media-picker/components/index.d.ts

@@ -1 +1,2 @@
 export * from './media-picker-folder-path.element.js';
+export * from './media-picker-table-column-name.element.js';

package/dist-cms/packages/media/media/modals/media-picker/components/index.js

@@ -1 +1,2 @@
 export * from './media-picker-folder-path.element.js';
+export * from './media-picker-table-column-name.element.js';

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-table-column-name.element.d.ts

@@ -0,0 +1,23 @@
+import { nothing } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '../../../../../core/components/index.js';
+export interface UmbMediaPickerTableColumnNameValue {
+    name: string;
+    ancestorPath?: string;
+    /** When set, the name renders as a button that invokes this on click (e.g. to open a folder). */
+    navigate?: () => void;
+}
+export declare class UmbMediaPickerTableColumnNameElement extends UmbLitElement implements UmbTableColumnLayoutElement {
+    #private;
+    column: UmbTableColumn;
+    item: UmbTableItem;
+    value: UmbMediaPickerTableColumnNameValue;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbMediaPickerTableColumnNameElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-media-picker-table-column-name': UmbMediaPickerTableColumnNameElement;
+    }
+}

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-table-column-name.element.js

@@ -0,0 +1,68 @@
+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 { css, customElement, html, nothing, property } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbTextStyles } from '../../../../../core/style/index.js';
+let UmbMediaPickerTableColumnNameElement = class UmbMediaPickerTableColumnNameElement extends UmbLitElement {
+    #onClick(event) {
+        event.stopPropagation();
+        this.value?.navigate?.();
+    }
+    render() {
+        if (!this.value)
+            return nothing;
+        return html `
+			${this.value.navigate
+            ? html `<uui-button look="default" compact label=${this.value.name} @click=${this.#onClick}
+						>${this.value.name}</uui-button
+					>`
+            : html `<span class="name">${this.value.name}</span>`}
+			${this.value.ancestorPath ? html `<span class="ancestor-path">${this.value.ancestorPath}</span>` : nothing}
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: block;
+			}
+
+			uui-button {
+				--uui-button-padding-left-factor: 0;
+				text-align: left;
+				margin-bottom: -9px;
+			}
+
+			.name {
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.ancestor-path {
+				display: block;
+				font-size: 0.8em;
+				opacity: 0.6;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				/* Truncate from the start so the deepest (most disambiguating) ancestor stays visible. */
+				direction: rtl;
+				text-align: left;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbMediaPickerTableColumnNameElement.prototype, "value", void 0);
+UmbMediaPickerTableColumnNameElement = __decorate([
+    customElement('umb-media-picker-table-column-name')
+], UmbMediaPickerTableColumnNameElement);
+export { UmbMediaPickerTableColumnNameElement };
+export default UmbMediaPickerTableColumnNameElement;

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

@@ -340,6 +340,10 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
     #allowNavigateToMedia(item) {
         return this.#folderTypeUniques.has(item.mediaType.unique) || item.hasChildren;
     }
+    #getAncestorPath(item) {
+        const ancestors = 'ancestors' in item ? item.ancestors : undefined;
+        return ancestors?.length ? ancestors.map((a) => a.name || '(Untitled)').join(' / ') : '';
+    }
     // TODO: move to search manager in context
     #onSearchFromChange(e) {
         const checked = e.target.checked;
@@ -398,19 +402,23 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 		`;
     }
     #renderBody() {
-        return html `${this.#renderToolbar()}
+        return html ` ${this.#renderToolbar()}
+			${this._searchQuery ? this.#renderSearchResult() : this.#renderCurrentChildren()}
+
 			<umb-dropzone-media
 				id="dropzone"
 				multiple
 				@change=${this.#onDropzoneChange}
 				.parentUnique=${this._currentMediaEntity.unique}
-				.noAccess=${this._noAccess}></umb-dropzone-media>
-			${this._searchQuery ? this.#renderSearchResult() : this.#renderCurrentChildren()} `;
+				.noAccess=${this._noAccess}></umb-dropzone-media>`;
+    }
+    #renderEmptyState() {
+        return html ` <umb-empty-media-state @browse=${() => this._dropzone.browse()}> </umb-empty-media-state> `;
     }
     #renderSearchResult() {
         return html `
 			${!this._searchResult.length && !this._searching
-            ? html `<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`
+            ? this.#renderEmptyState()
             : this._currentView === 'table'
                 ? this.#renderTable(this._searchResult)
                 : html `<div id="media-grid">
@@ -421,7 +429,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
     #renderCurrentChildren() {
         return html `
 			${!this._currentChildren.length
-            ? html `<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`
+            ? this.#renderEmptyState()
             : html `${this._currentView === 'table'
                 ? this.#renderTable(this._currentChildren)
                 : html `<div id="media-grid">
@@ -469,7 +477,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 					look="outline"
 					color="default"
 					.disabled=${this._noAccess}></uui-button>
-				<uui-button compact popovertarget="media-picker-view-popover" label="View">
+				<uui-button compact popovertarget="media-picker-view-popover" label=${this.localize.term('general_view')}>
 					<umb-icon name=${this._currentView === 'cards' ? 'icon-grid' : 'icon-table'}></umb-icon>
 				</uui-button>
 				<uui-popover-container id="media-picker-view-popover" placement="bottom-end">
@@ -520,6 +528,11 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
             // When not in selection mode, navigable items open on click (matching card behaviour).
             // Mark them as non-selectable so the row doesn't intercept the click for selection.
             const selectableInTable = this._isSelectionMode ? selectable : !canNavigate && selectable;
+            const nameColumnValue = {
+                name: item.name,
+                ancestorPath: this.#getAncestorPath(item) || undefined,
+                navigate: canNavigate && !this._isSelectionMode ? () => this.#onOpen(item) : undefined,
+            };
             return {
                 id: item.unique,
                 icon: item.mediaType.icon,
@@ -527,18 +540,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
                 data: [
                     {
                         columnAlias: 'name',
-                        value: canNavigate && !this._isSelectionMode
-                            ? html `<uui-button
-										look="default"
-										compact
-										label=${item.name}
-										@click=${(e) => {
-                                e.stopPropagation();
-                                this.#onOpen(item);
-                            }}
-										>${item.name}</uui-button
-									>`
-                            : html `<span class="table-name">${item.name}</span>`,
+                        value: nameColumnValue,
                     },
                     {
                         columnAlias: 'createDate',
@@ -565,6 +567,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
             {
                 name: this.localize.term('general_name'),
                 alias: 'name',
+                elementName: 'umb-media-picker-table-column-name',
             },
             {
                 name: this.localize.term('content_createDate'),
@@ -650,6 +653,10 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				max-width: 100%;
 			}
 
+			umb-empty-media-state {
+				padding: var(--uui-size-layout-1);
+			}
+
 			.not-allowed {
 				cursor: not-allowed;
 				opacity: 0.5;
@@ -659,13 +666,6 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				margin-top: var(--uui-size-layout-1);
 			}
 
-			.table-name {
-				flex: 1;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-
 			#view-dropdown {
 				padding: var(--uui-size-space-3);
 				--uui-button-content-align: left;

package/dist-cms/packages/media/media/property-editors/image-cropper/value-summary/value-summary.element.d.ts

@@ -1,8 +1,8 @@
+import type { UmbImageCropperPropertyEditorValue } from '../../../components/index.js';
 import { nothing } from '../../../../../../external/lit/index.js';
 import { UmbValueSummaryElementBase } from '../../../../../core/value-summary/index.js';
-import type { UmbImageCropperPropertyEditorValue } from '../../../components/index.js';
 export declare class UmbImageCropperPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<UmbImageCropperPropertyEditorValue> {
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 export { UmbImageCropperPropertyEditorValueSummaryElement as element };
 declare global {

package/dist-cms/packages/media/media/property-editors/image-crops/property-editor-ui-image-crops.element.js

@@ -92,10 +92,12 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 			<uui-form>
 				<form @submit=${this.#onSubmit}>
 					<div class="input">
-						<uui-label for="label">Label</uui-label>
+						<uui-label for="label">
+							<umb-localize key="general_label"></umb-localize>
+						</uui-label>
 						<uui-input
 							@input=${this.#onLabelInput}
-							label="Label"
+							label=${this.localize.term('general_label')}
 							id="label"
 							name="label"
 							type="text"
@@ -103,9 +105,11 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 							.value=${initial?.label ?? ''}></uui-input>
 					</div>
 					<div class="input">
-						<uui-label for="alias">Alias</uui-label>
+						<uui-label for="alias">
+							<umb-localize key="general_alias"></umb-localize>
+						</uui-label>
 						<uui-input
-							label="Alias"
+							label=${this.localize.term('general_alias')}
 							id="alias"
 							name="alias"
 							type="text"
@@ -114,9 +118,11 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 							.value=${initial?.alias ?? ''}></uui-input>
 					</div>
 					<div class="input">
-						<uui-label for="width">Width</uui-label>
+						<uui-label for="width">
+							<umb-localize key="general_width"></umb-localize>
+						</uui-label>
 						<uui-input
-							label="Width"
+							label=${this.localize.term('general_width')}
 							id="width"
 							name="width"
 							type="number"
@@ -128,9 +134,11 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 						</uui-input>
 					</div>
 					<div class="input">
-						<uui-label for="height">Height</uui-label>
+						<uui-label for="height">
+							<umb-localize key="general_height"></umb-localize>
+						</uui-label>
 						<uui-input
-							label="Height"
+							label=${this.localize.term('general_height')}
 							id="height"
 							name="height"
 							type="number"
@@ -143,8 +151,13 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 					</div>
 					<div class="action-wrapper">
 						${this.editCropAlias
-            ? html `<uui-button @click=${this.#onEditCancel}>Cancel</uui-button>
-									<uui-button look="secondary" type="submit" label=${this.localize.term('general_edit')}></uui-button>`
+            ? html `<uui-button
+										@click=${this.#onEditCancel}
+										label=${this.localize.term('general_cancel')}></uui-button>
+									<uui-button
+										look="secondary"
+										type="submit"
+										label=${this.localize.term('general_update')}></uui-button>`
             : html `<uui-button
 									look="secondary"
 									type="submit"

package/dist-cms/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.d.ts

@@ -40,6 +40,6 @@ export declare class UmbPropertyEditorUIMediaPickerElement extends UmbPropertyEd
 export { UmbPropertyEditorUIMediaPickerElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        ['umb-property-editor-ui-media-picker']: UmbPropertyEditorUIMediaPickerElement;
+        'umb-property-editor-ui-media-picker': UmbPropertyEditorUIMediaPickerElement;
     }
 }

package/dist-cms/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.js

@@ -56,7 +56,7 @@ let UmbPropertyEditorUIMediaPickerElement = class UmbPropertyEditorUIMediaPicker
         });
         this.observe(this.#interactionMemoryManager.memoriesForPropertyEditor, (interactionMemories) => {
             this._interactionMemories = interactionMemories ?? [];
-        });
+        }, null);
     }
     firstUpdated() {
         this.addFormControlElement(this.shadowRoot.querySelector('umb-input-rich-media'));

package/dist-cms/packages/media/media/property-editors/media-picker/value-summary/value-summary.element.d.ts

@@ -1,8 +1,8 @@
+import type { UmbMediaItemModel } from '../../../types.js';
 import { nothing } from '../../../../../../external/lit/index.js';
 import { UmbValueSummaryElementBase } from '../../../../../core/value-summary/index.js';
-import type { UmbMediaItemModel } from '../../../types.js';
 export declare class UmbMediaPickerPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<Array<UmbMediaItemModel>> {
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist-cms/packages/media/media/property-editors/media-picker/value-summary/value-summary.resolver.d.ts

@@ -1,7 +1,7 @@
-import type { UmbValueSummaryResolveResult, UmbValueSummaryResolver } from '../../../../../core/value-summary/index.js';
-import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
 import type { UmbMediaPickerValueModel } from '../../types.js';
 import type { UmbMediaItemModel } from '../../../types.js';
+import type { UmbValueSummaryResolveResult, UmbValueSummaryResolver } from '../../../../../core/value-summary/index.js';
+import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
 export declare class UmbMediaPickerValueSummaryResolver extends UmbControllerBase implements UmbValueSummaryResolver<UmbMediaPickerValueModel | undefined, Array<UmbMediaItemModel>> {
     #private;
     resolveValues(values: ReadonlyArray<UmbMediaPickerValueModel | undefined>): Promise<UmbValueSummaryResolveResult<Array<UmbMediaItemModel>>>;

package/dist-cms/packages/media/media/property-editors/media-picker/value-summary/value-summary.resolver.js

@@ -1,6 +1,6 @@
+import { UmbMediaItemRepository } from '../../../repository/index.js';
 import { UmbControllerBase } from '../../../../../../libs/class-api/index.js';
 import { createObservablePart } from '../../../../../../libs/observable-api/index.js';
-import { UmbMediaItemRepository } from '../../../repository/index.js';
 export class UmbMediaPickerValueSummaryResolver extends UmbControllerBase {
     #repo = new UmbMediaItemRepository(this);
     async resolveValues(values) {