@umbraco-cms/backoffice 15.1.2 → 15.2.0

package/dist-cms/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT, UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../../constants.js';
+import { UMB_DOCUMENT_PUBLISHING_WORKSPACE_CONTEXT } from '../../../publishing/index.js';
 import { TimeOptions } from './utils.js';
 import { css, customElement, html, ifDefined, nothing, state } from '../../../../../../external/lit/index.js';
 import { DocumentVariantStateModel } from '../../../../../../external/backend-api/index.js';
@@ -13,6 +14,9 @@ import { UmbModalRouteRegistrationController } from '../../../../../core/router/
 import { UMB_MODAL_MANAGER_CONTEXT } from '../../../../../core/modal/index.js';
 import { UMB_WORKSPACE_MODAL } from '../../../../../core/workspace/index.js';
 import { UMB_TEMPLATE_PICKER_MODAL, UmbTemplateItemRepository } from '../../../../../templating/templates/index.js';
+import { createExtensionApiByAlias } from '../../../../../core/extension-registry/index.js';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../../../../core/section/index.js';
+import { UMB_SETTINGS_SECTION_ALIAS } from '../../../../../settings/index.js';
 // import of local components
 import './document-workspace-view-info-links.element.js';
 import './document-workspace-view-info-history.element.js';
@@ -20,6 +24,7 @@ import './document-workspace-view-info-reference.element.js';
 let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
     #workspaceContext;
     #templateRepository;
+    #documentPublishingWorkspaceContext;
     constructor() {
         super();
         this._documentUnique = '';
@@ -27,6 +32,8 @@ let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElem
         this._documentTypeUnique = '';
         // Template
         this._templateUnique = '';
+        this._variantsWithPendingChanges = [];
+        this._hasSettingsAccess = false;
         this.#templateRepository = new UmbTemplateItemRepository(this);
         new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
             .addAdditionalPath(':entityType')
@@ -46,6 +53,20 @@ let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElem
                 this._variant = currentVariant;
             });
         });
+        this.consumeContext(UMB_DOCUMENT_PUBLISHING_WORKSPACE_CONTEXT, (instance) => {
+            this.#documentPublishingWorkspaceContext = instance;
+            this.#observePendingChanges();
+        });
+        createExtensionApiByAlias(this, UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS, [
+            {
+                config: {
+                    match: UMB_SETTINGS_SECTION_ALIAS,
+                },
+                onChange: (permitted) => {
+                    this._hasSettingsAccess = permitted;
+                },
+            },
+        ]);
     }
     #observeContent() {
         if (!this.#workspaceContext)
@@ -68,6 +89,14 @@ let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElem
             this._templateName = data[0].name;
         }, '_templateUnique');
     }
+    #observePendingChanges() {
+        this.observe(this.#documentPublishingWorkspaceContext?.publishedPendingChanges.variantsWithChanges, (variants) => {
+            this._variantsWithPendingChanges = variants || [];
+        }, '_observePendingChanges');
+    }
+    #hasPendingChanges(variant) {
+        return this._variantsWithPendingChanges.some((x) => x.variantId.compare(variant));
+    }
     #renderStateTag() {
         switch (this._variant?.state) {
             case DocumentVariantStateModel.DRAFT:
@@ -76,18 +105,17 @@ let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElem
 						${this.localize.term('content_unpublished')}
 					</uui-tag>
 				`;
+            // TODO: The pending changes state can be removed once the management Api removes this state
+            // We should also make our own state model for this
             case DocumentVariantStateModel.PUBLISHED:
+            case DocumentVariantStateModel.PUBLISHED_PENDING_CHANGES: {
+                const term = this.#hasPendingChanges(this._variant) ? 'content_publishedPendingChanges' : 'content_published';
                 return html `
-					<uui-tag color="positive" look="primary" label=${this.localize.term('content_published')}>
-						${this.localize.term('content_published')}
-					</uui-tag>
-				`;
-            case DocumentVariantStateModel.PUBLISHED_PENDING_CHANGES:
-                return html `
-					<uui-tag color="positive" look="primary" label=${this.localize.term('content_publishedPendingChanges')}>
-						${this.localize.term('content_publishedPendingChanges')}
+					<uui-tag color="positive" look="primary" label=${this.localize.term(term)}>
+						${this.localize.term(term)}
 					</uui-tag>
 				`;
+            }
             default:
                 return html `
 					<uui-tag look="primary" label=${this.localize.term('content_notCreated')}>
@@ -114,17 +142,15 @@ let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElem
     #renderGeneralSection() {
         const editDocumentTypePath = this._routeBuilder?.({ entityType: 'document-type' }) ?? '';
         return html `
-			<div class="general-item">
-				<strong><umb-localize key="content_publishStatus">Publication Status</umb-localize></strong>
-				<span>${this.#renderStateTag()}</span>
-			</div>
+			<div class="general-item"><span>${this.#renderStateTag()}</span></div>
 			${this.#renderCreateDate()}
 
 			<div class="general-item">
 				<strong><umb-localize key="content_documentType">Document Type</umb-localize></strong>
 				<uui-ref-node-document-type
 					standalone
-					href=${editDocumentTypePath + 'edit/' + this._documentTypeUnique}
+					href=${ifDefined(this._hasSettingsAccess ? editDocumentTypePath + 'edit/' + this._documentTypeUnique : undefined)}
+					?readonly=${!this._hasSettingsAccess}
 					name=${ifDefined(this.localize.string(this._documentTypeName ?? ''))}>
 					<umb-icon slot="icon" name=${ifDefined(this._documentTypeIcon)}></umb-icon>
 				</uui-ref-node-document-type>
@@ -148,7 +174,8 @@ let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElem
 							<uui-ref-node
 								standalone
 								name=${ifDefined(this._templateName)}
-								href=${editTemplatePath + 'edit/' + this._templateUnique}>
+								href=${ifDefined(this._hasSettingsAccess ? editTemplatePath + 'edit/' + this._templateUnique : undefined)}
+								?readonly=${!this._hasSettingsAccess}>
 								<uui-icon slot="icon" name="icon-document-html"></uui-icon>
 								<uui-action-bar slot="actions">
 									<uui-button
@@ -237,6 +264,11 @@ let UmbDocumentWorkspaceViewInfoElement = class UmbDocumentWorkspaceViewInfoElem
 			.variant-state > span {
 				color: var(--uui-color-divider-emphasis);
 			}
+
+			uui-ref-node-document-type[readonly] {
+				padding-top: 7px;
+				padding-bottom: 7px;
+			}
 		`,
     ]; }
 };
@@ -264,6 +296,12 @@ __decorate([
 __decorate([
     state()
 ], UmbDocumentWorkspaceViewInfoElement.prototype, "_variant", void 0);
+__decorate([
+    state()
+], UmbDocumentWorkspaceViewInfoElement.prototype, "_variantsWithPendingChanges", void 0);
+__decorate([
+    state()
+], UmbDocumentWorkspaceViewInfoElement.prototype, "_hasSettingsAccess", void 0);
 __decorate([
     state()
 ], UmbDocumentWorkspaceViewInfoElement.prototype, "_routeBuilder", void 0);

package/dist-cms/packages/documents/section/manifests.js

@@ -1,5 +1,6 @@
 import { UMB_CONTENT_SECTION_ALIAS } from '../../core/content/index.js';
 import { UMB_DOCUMENT_ROOT_ENTITY_TYPE, UMB_CONTENT_MENU_ALIAS } from '../documents/index.js';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../core/section/index.js';
 export const manifests = [
     {
         type: 'section',
@@ -12,7 +13,7 @@ export const manifests = [
         },
         conditions: [
             {
-                alias: 'Umb.Condition.SectionUserPermission',
+                alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
                 match: UMB_CONTENT_SECTION_ALIAS,
             },
         ],

package/dist-cms/packages/extension-types/index.d.ts

@@ -18,9 +18,11 @@ import '../block/block-list/index.js';
 import '../block/block-rte/index.js';
 import '../block/block-type/index.js';
 import '../block/block/index.js';
+import '../clipboard/index.js';
 import '../code-editor/index.js';
 import '../core/collection/index.js';
 import '../core/components/index.js';
+import '../core/const/index.js';
 import '../core/content-type/index.js';
 import '../core/content/index.js';
 import '../core/culture/index.js';

package/dist-cms/packages/health-check/manifests.js

@@ -1,3 +1,4 @@
+import { UMB_SETTINGS_SECTION_ALIAS } from '../settings/index.js';
 export const manifests = [
     {
         type: 'dashboard',
@@ -13,7 +14,7 @@ export const manifests = [
         conditions: [
             {
                 alias: 'Umb.Condition.SectionAlias',
-                match: 'Umb.Section.Settings',
+                match: UMB_SETTINGS_SECTION_ALIAS,
             },
         ],
     },

package/dist-cms/packages/language/app-language-select/app-language-select.element.js

@@ -77,22 +77,16 @@ let UmbAppLanguageSelectElement = class UmbAppLanguageSelectElement extends UmbL
             this.#observeLanguages();
         }
     }
-    #onLabelClick(event) {
-        const menuItem = event.target;
-        const unique = menuItem.dataset.unique;
-        if (!unique)
-            throw new Error('Missing unique on menu item');
+    #chooseLanguage(unique) {
         this.#appLanguageContext?.setLanguage(unique);
         this._isOpen = false;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         this._popoverElement?.hidePopover();
     }
     render() {
         return html `${this.#renderTrigger()} ${this.#renderContent()}`;
     }
     #renderTrigger() {
-        return html `<button id="toggle" popovertarget="dropdown-popover">
+        return html `<button id="toggle" data-mark="action:open" popovertarget="dropdown-popover">
 			<span
 				>${this._appLanguage?.name}
 				${this._appLanguageIsReadOnly ? this.#renderReadOnlyTag(this._appLanguage?.unique) : nothing}</span
@@ -101,14 +95,17 @@ let UmbAppLanguageSelectElement = class UmbAppLanguageSelectElement extends UmbL
 		</button>`;
     }
     #renderContent() {
-        return html ` <uui-popover-container id="dropdown-popover" @beforetoggle=${this.#onPopoverToggle}>
+        return html ` <uui-popover-container
+			id="dropdown-popover"
+			data-mark="app-language-menu"
+			@beforetoggle=${this.#onPopoverToggle}>
 			<umb-popover-layout>
 				${repeat(this._languages, (language) => language.unique, (language) => html `
 						<uui-menu-item
 							label=${ifDefined(language.name)}
-							@click-label=${this.#onLabelClick}
-							data-unique=${ifDefined(language.unique)}
-							?active=${language.unique === this._appLanguage?.unique}>
+							data-mark="${language.entityType}:${language.unique}"
+							?active=${language.unique === this._appLanguage?.unique}
+							@click-label=${() => this.#chooseLanguage(language.unique)}>
 							${this.#isLanguageReadOnly(language.unique) ? this.#renderReadOnlyTag(language.unique) : nothing}
 						</uui-menu-item>
 					`)}

package/dist-cms/packages/language/workspace/language/language-workspace.context.d.ts

@@ -1,13 +1,10 @@
 import { UmbLanguageDetailRepository } from '../../repository/index.js';
 import type { UmbLanguageDetailModel } from '../../types.js';
-import { type UmbSubmittableWorkspaceContext, type UmbRoutableWorkspaceContext, UmbEntityDetailWorkspaceContextBase } from '../../../core/workspace/index.js';
+import { type UmbSubmittableWorkspaceContext, type UmbRoutableWorkspaceContext, UmbEntityNamedDetailWorkspaceContextBase } from '../../../core/workspace/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
-export declare class UmbLanguageWorkspaceContext extends UmbEntityDetailWorkspaceContextBase<UmbLanguageDetailModel, UmbLanguageDetailRepository> implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext {
+export declare class UmbLanguageWorkspaceContext extends UmbEntityNamedDetailWorkspaceContextBase<UmbLanguageDetailModel, UmbLanguageDetailRepository> implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext {
     readonly repository: UmbLanguageDetailRepository;
-    readonly name: import("rxjs").Observable<string | undefined>;
     constructor(host: UmbControllerHost);
-    setName(name: string): void;
-    getName(): string | undefined;
     setCulture(unique: string): void;
     setMandatory(isMandatory: boolean): void;
     setDefault(isDefault: boolean): void;

package/dist-cms/packages/language/workspace/language/language-workspace.context.js

@@ -3,8 +3,8 @@ import { UMB_LANGUAGE_DETAIL_REPOSITORY_ALIAS } from '../../constants.js';
 import { UMB_LANGUAGE_ENTITY_TYPE, UMB_LANGUAGE_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UmbLanguageWorkspaceEditorElement } from './language-workspace-editor.element.js';
 import { UMB_LANGUAGE_WORKSPACE_ALIAS } from './constants.js';
-import { UmbWorkspaceIsNewRedirectController, UmbEntityDetailWorkspaceContextBase, UmbWorkspaceIsNewRedirectControllerAlias, } from '../../../core/workspace/index.js';
-export class UmbLanguageWorkspaceContext extends UmbEntityDetailWorkspaceContextBase {
+import { UmbWorkspaceIsNewRedirectController, UmbWorkspaceIsNewRedirectControllerAlias, UmbEntityNamedDetailWorkspaceContextBase, } from '../../../core/workspace/index.js';
+export class UmbLanguageWorkspaceContext extends UmbEntityNamedDetailWorkspaceContextBase {
     constructor(host) {
         super(host, {
             workspaceAlias: UMB_LANGUAGE_WORKSPACE_ALIAS,
@@ -12,7 +12,6 @@ export class UmbLanguageWorkspaceContext extends UmbEntityDetailWorkspaceContext
             detailRepositoryAlias: UMB_LANGUAGE_DETAIL_REPOSITORY_ALIAS,
         });
         this.repository = new UmbLanguageDetailRepository(this);
-        this.name = this._data.createObservablePartOfCurrent((data) => data?.name);
         this.routes.setRoutes([
             {
                 path: 'create',
@@ -32,12 +31,6 @@ export class UmbLanguageWorkspaceContext extends UmbEntityDetailWorkspaceContext
             },
         ]);
     }
-    setName(name) {
-        this._data.updateCurrent({ name });
-    }
-    getName() {
-        return this._data.getCurrent()?.name;
-    }
     setCulture(unique) {
         this._data.updateCurrent({ unique });
     }

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

@@ -68,13 +68,13 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
         return html `
 			<uui-card-media
 				name=${ifDefined(item.name)}
+				data-mark="${item.entityType}:${item.unique}"
 				selectable
 				?select-only=${this._selection.length > 0}
 				?selected=${this.#isSelected(item)}
 				href=${this.#getEditUrl(item)}
 				@selected=${() => this.#onSelect(item)}
-				@deselected=${() => this.#onDeselect(item)}
-				class="media-item">
+				@deselected=${() => this.#onDeselect(item)}>
 				<umb-imaging-thumbnail
 					unique=${item.unique}
 					alt=${ifDefined(item.name)}

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

@@ -78,7 +78,6 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         const top = clamp(y / height, 0, 1);
         this.#coordsToFactor(x, y);
         const focalPoint = { left, top };
-        console.log('setFocalPoint', focalPoint);
         this.dispatchEvent(new UmbFocalPointChangeEvent(focalPoint));
     }
     #setFocalPointStyle(left, top) {

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

@@ -14,19 +14,21 @@ import './image-cropper.element.js';
 import './image-cropper-focus-setter.element.js';
 import './image-cropper-preview.element.js';
 import './image-cropper-field.element.js';
+const DefaultFocalPoint = { left: 0.5, top: 0.5 };
+const DefaultValue = {
+    temporaryFileId: null,
+    src: '',
+    crops: [],
+    focalPoint: DefaultFocalPoint,
+};
 let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbLitElement {
     #manager;
     constructor() {
         super();
-        this.value = {
-            temporaryFileId: null,
-            src: '',
-            crops: [],
-            focalPoint: { left: 0.5, top: 0.5 },
-        };
+        this.value = DefaultValue;
         this.crops = [];
         this.#onRemove = () => {
-            this.value = assignToFrozenObject(this.value, { src: '', temporaryFileId: null });
+            this.value = assignToFrozenObject(this.value, DefaultValue);
             if (this.fileUnique) {
                 this.#manager?.removeOne(this.fileUnique);
             }
@@ -88,10 +90,13 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbL
     #onChange(e) {
         const value = e.target.value;
         if (!value) {
-            this.value = { src: '', crops: [], focalPoint: { left: 0.5, top: 0.5 }, temporaryFileId: null };
+            this.value = DefaultValue;
             this.dispatchEvent(new UmbChangeEvent());
             return;
         }
+        if (this.value && this.value.temporaryFileId) {
+            value.temporaryFileId = this.value.temporaryFileId;
+        }
         this.value = value;
         this.dispatchEvent(new UmbChangeEvent());
     }

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

@@ -10,7 +10,7 @@ import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
-import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '../../../../core/sorter/index.js';
 import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
 import { UmbFormControlMixin } from '../../../../core/validation/index.js';
 import '../../../imaging/index.js';
@@ -94,8 +94,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
             identifier: 'Umb.SorterIdentifier.InputMedia',
             itemSelector: 'uui-card-media',
             containerSelector: '.container',
-            /** TODO: This component probably needs some grid-like logic for resolve placement... [LI] */
-            resolvePlacement: () => false,
+            resolvePlacement: UmbSorterResolvePlacementAsGrid,
             onChange: ({ model }) => {
                 this.selection = model;
                 this.#sortCards(model);
@@ -193,6 +192,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
         return html `
 			<uui-card-media
 				name=${ifDefined(item.name === null ? undefined : item.name)}
+				data-mark="${item.entityType}:${item.unique}"
 				href="${ifDefined(href)}"
 				?readonly=${this.readonly}>
 				<umb-imaging-thumbnail

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

@@ -2,7 +2,6 @@ import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbVariantId } from '../../../../core/variant/index.js';
 import '../../../imaging/index.js';
-declare const elementName = "umb-input-rich-media";
 declare const UmbInputRichMediaElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
 export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_base {
     #private;
@@ -65,6 +64,6 @@ export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_b
 export default UmbInputRichMediaElement;
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbInputRichMediaElement;
+        'umb-input-rich-media': UmbInputRichMediaElement;
     }
 }

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

@@ -12,10 +12,9 @@ import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbId } from '../../../../core/id/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
-import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '../../../../core/sorter/index.js';
 import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
 import '../../../imaging/index.js';
-const elementName = 'umb-input-rich-media';
 let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
     #sorter;
     #sortCards(model) {
@@ -46,16 +45,16 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
     }
     #focalPointEnabled;
     set alias(value) {
-        this.#modalRouter.setUniquePathValue('propertyAlias', value);
+        //this.#modalRouter.setUniquePathValue('propertyAlias', value);
     }
     get alias() {
-        return this.#modalRouter.getUniquePathValue('propertyAlias');
+        return undefined; //this.#modalRouter.getUniquePathValue('propertyAlias');
     }
     set variantId(value) {
-        this.#modalRouter.setUniquePathValue('variantId', value?.toString());
+        //this.#modalRouter.setUniquePathValue('variantId', value?.toString());
     }
     get variantId() {
-        return this.#modalRouter.getUniquePathValue('variantId');
+        return undefined; //this.#modalRouter.getUniquePathValue('variantId');
     }
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -77,7 +76,6 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
     }
     #readonly;
     #itemRepository;
-    #modalRouter;
     #modalManager;
     constructor() {
         super();
@@ -91,9 +89,8 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
             identifier: 'Umb.SorterIdentifier.InputRichMedia',
             itemSelector: 'uui-card-media',
             containerSelector: '.container',
-            // TODO: This component probably needs some grid-like logic for resolve placement... [LI]
-            // TODO: You can also use verticalDirection? [NL]
-            resolvePlacement: () => false,
+            //resolvePlacement: (args) => args.pointerX < args.relatedRect.left + args.relatedRect.width * 0.5,
+            resolvePlacement: UmbSorterResolvePlacementAsGrid,
             onChange: ({ model }) => {
                 this.#items = model;
                 this.#sortCards(model);
@@ -144,9 +141,8 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
             this.#modalManager = instance;
         });
-        this.#modalRouter = new UmbModalRouteRegistrationController(this, UMB_IMAGE_CROPPER_EDITOR_MODAL)
+        new UmbModalRouteRegistrationController(this, UMB_IMAGE_CROPPER_EDITOR_MODAL)
             .addAdditionalPath(':key')
-            .addUniquePaths(['propertyAlias', 'variantId'])
             .onSetup((params) => {
             const key = params.key;
             if (!key)
@@ -406,9 +402,11 @@ __decorate([
 ], UmbInputRichMediaElement.prototype, "focalPointEnabled", null);
 __decorate([
     property()
+    /** @deprecated will be removed in v17 */
 ], UmbInputRichMediaElement.prototype, "alias", null);
 __decorate([
     property()
+    /** @deprecated will be removed in v17 */
 ], UmbInputRichMediaElement.prototype, "variantId", null);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -420,7 +418,7 @@ __decorate([
     state()
 ], UmbInputRichMediaElement.prototype, "_routeBuilder", void 0);
 UmbInputRichMediaElement = __decorate([
-    customElement(elementName)
+    customElement('umb-input-rich-media')
 ], UmbInputRichMediaElement);
 export { UmbInputRichMediaElement };
 export default UmbInputRichMediaElement;

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

@@ -245,6 +245,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
 			<uui-card-media
 				class=${ifDefined(disabled ? 'not-allowed' : undefined)}
 				.name=${item.name}
+				data-mark="${item.entityType}:${item.unique}"
 				@open=${() => this.#onOpen(item)}
 				@selected=${() => this.#onSelected(item)}
 				@deselected=${() => this.#onDeselected(item)}

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

@@ -12,7 +12,9 @@ export type UmbCrop = {
 export declare class UmbPropertyEditorUIImageCropsElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
     private _labelInput;
-    value: UmbCrop[];
+    private _value;
+    set value(value: Array<UmbCrop>);
+    get value(): Array<UmbCrop>;
     editCropAlias: string;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

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

@@ -9,17 +9,44 @@ import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
 import { generateAlias } from '../../../../core/utils/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
 /**
  * @element umb-property-editor-ui-image-crops
  */
 let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsElement extends UmbLitElement {
     constructor() {
         super(...arguments);
-        this.value = [];
+        this._value = [];
         this.editCropAlias = '';
         this.#oldInputValue = '';
+        this.#sorter = new UmbSorterController(this, {
+            getUniqueOfElement: (element) => {
+                const unique = element.dataset['alias'];
+                return unique;
+            },
+            getUniqueOfModel: (modelEntry) => {
+                return modelEntry.alias;
+            },
+            identifier: 'Umb.SorterIdentifier.ImageCrops',
+            itemSelector: '.crop',
+            containerSelector: '.crops',
+            onChange: ({ model }) => {
+                const oldValue = this._value;
+                this._value = model;
+                this.requestUpdate('_value', oldValue);
+                this.dispatchEvent(new UmbPropertyValueChangeEvent());
+            },
+        });
+    }
+    set value(value) {
+        this._value = value ?? [];
+        this.#sorter.setModel(this.value);
+    }
+    get value() {
+        return this._value;
     }
     #oldInputValue;
+    #sorter;
     #onRemove(alias) {
         this.value = [...this.value.filter((item) => item.alias !== alias)];
         this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -137,7 +164,7 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 			</uui-form>
 			<div class="crops">
 				${repeat(this.value, (item) => item.alias, (item) => html `
-						<div class="crop">
+						<div class="crop" data-alias="${item.alias}">
 							<span class="crop-drag">+</span>
 							<span><strong>${item.label}</strong> <em>(${item.alias})</em></span>
 							<span class="crop-size">(${item.width} x ${item.height}px)</span>
@@ -215,8 +242,11 @@ __decorate([
     query('#label')
 ], UmbPropertyEditorUIImageCropsElement.prototype, "_labelInput", void 0);
 __decorate([
-    property({ attribute: false })
-], UmbPropertyEditorUIImageCropsElement.prototype, "value", void 0);
+    state()
+], UmbPropertyEditorUIImageCropsElement.prototype, "_value", void 0);
+__decorate([
+    property({ type: Array })
+], UmbPropertyEditorUIImageCropsElement.prototype, "value", null);
 __decorate([
     state()
 ], UmbPropertyEditorUIImageCropsElement.prototype, "editCropAlias", void 0);

package/dist-cms/packages/media/media/recycle-bin/tree/media-recycle-bin-tree.repository.js

@@ -12,7 +12,7 @@ export class UmbMediaRecycleBinTreeRepository extends UmbTreeRepositoryBase {
         const data = {
             unique: null,
             entityType: UMB_MEDIA_RECYCLE_BIN_ROOT_ENTITY_TYPE,
-            name: 'Recycle Bin',
+            name: '#treeHeaders_contentRecycleBin',
             icon: 'icon-trash',
             hasChildren,
             isContainer: false,

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

@@ -67,5 +67,6 @@ const mapper = (item) => {
         }),
         name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
         isFolder: false,
+        createDate: item.createDate,
     };
 };

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

@@ -5,6 +5,10 @@ export declare class UmbMediaItemRepository extends UmbItemRepositoryBase<UmbMed
     #private;
     constructor(host: UmbControllerHost);
     /**
+     * @param root0
+     * @param root0.query
+     * @param root0.skip
+     * @param root0.take
      * @deprecated - The search method will be removed in v17. Use the
      * Use the UmbMediaSearchProvider instead.
      * Get it from:

package/dist-cms/packages/media/media/repository/item/media-item.repository.js

@@ -8,6 +8,10 @@ export class UmbMediaItemRepository extends UmbItemRepositoryBase {
         this.#dataSource = new UmbMediaItemServerDataSource(this);
     }
     /**
+     * @param root0
+     * @param root0.query
+     * @param root0.skip
+     * @param root0.take
      * @deprecated - The search method will be removed in v17. Use the
      * Use the UmbMediaSearchProvider instead.
      * Get it from:

package/dist-cms/packages/media/media/repository/validation/media-validation.repository.d.ts

@@ -2,8 +2,9 @@ import type { UmbMediaDetailModel } from '../../types.js';
 import type { UmbVariantId } from '../../../../core/variant/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 import { UmbRepositoryBase } from '../../../../core/repository/index.js';
+import type { UmbContentValidationRepository } from '../../../../core/content/index.js';
 type DetailModelType = UmbMediaDetailModel;
-export declare class UmbMediaValidationRepository extends UmbRepositoryBase {
+export declare class UmbMediaValidationRepository extends UmbRepositoryBase implements UmbContentValidationRepository<DetailModelType> {
     #private;
     constructor(host: UmbControllerHost);
     /**