Merge branch 'v15/dev' into v15/bugfix/intermittent-issue-rendering-granular-permissions-for-user-group

src/Umbraco.Web.UI.Client/src/apps/app/app-logo.element.ts

@@ -1,4 +1,4 @@
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
+import { UMB_APP_CONTEXT } from './app.context.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 

src/Umbraco.Web.UI.Client/src/packages/core/router/route.context.ts

@@ -37,6 +37,13 @@ export class UmbRouteContext extends UmbContextBase<UmbRouteContext> {
 		});
 	}
 
+	getBasePath() {
+		return this.#basePath.getValue();
+	}
+	getActivePath() {
+		return this.getBasePath() + '/' + this.#activeLocalPath;
+	}
+
 	public registerModal(registration: UmbModalRouteRegistration) {
 		this.#modalRegistrations.push(registration);
 		this.#createNewUrlBuilder(registration);

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -3,7 +3,7 @@ import { createExtensionElement, UmbExtensionsManifestInitializer } from '@umbra
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { ManifestWorkspaceView } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_VIEW_PATH_PATTERN, type ManifestWorkspaceView } from '@umbraco-cms/backoffice/workspace';
 import type { UmbRoute, UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent } from '@umbraco-cms/backoffice/router';
 
 /**
@@ -62,7 +62,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 		if (this._workspaceViews.length > 0) {
 			newRoutes = this._workspaceViews.map((manifest) => {
 				return {
-					path: `view/${manifest.meta.pathname}`,
+					path: UMB_WORKSPACE_VIEW_PATH_PATTERN.generateLocal({ viewPathname: manifest.meta.pathname }),
 					component: () => createExtensionElement(manifest),
 					setup: (component) => {
 						if (component) {

src/Umbraco.Web.UI.Client/src/packages/core/workspace/paths.ts

@@ -5,3 +5,8 @@ export const UMB_WORKSPACE_PATH_PATTERN = new UmbPathPattern<
 	{ entityType: string },
 	typeof UMB_SECTION_PATH_PATTERN.ABSOLUTE_PARAMS
 >('workspace/:entityType', UMB_SECTION_PATH_PATTERN);
+
+export const UMB_WORKSPACE_VIEW_PATH_PATTERN = new UmbPathPattern<
+	{ viewPathname: string },
+	typeof UMB_WORKSPACE_PATH_PATTERN.ABSOLUTE_PARAMS
+>('view/:viewPathname', UMB_WORKSPACE_PATH_PATTERN);

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -198,7 +198,7 @@ export class UmbInputDocumentTypeElement extends UmbFormControlMixin<string | un
 		if (!item.unique) return;
 		const href = this._editPath + UMB_EDIT_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN.generateLocal({ unique: item.unique });
 		return html`
-			<uui-ref-node-document-type name=${this.localize.string(item.name)} href=${href}>
+			<uui-ref-node-document-type id=${item.unique} name=${this.localize.string(item.name)} href=${href}>
 				${this.#renderIcon(item)}
 				<uui-action-bar slot="actions">
 					<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops/property-editor-ui-image-crops.element.ts

@@ -4,6 +4,7 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/propert
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import { generateAlias } from '@umbraco-cms/backoffice/utils';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 export type UmbCrop = {
 	label: string;
@@ -20,14 +21,42 @@ export class UmbPropertyEditorUIImageCropsElement extends UmbLitElement implemen
 	@query('#label')
 	private _labelInput!: HTMLInputElement;
 
-	@property({ attribute: false })
-	value: UmbCrop[] = [];
+	@state()
+	private _value: Array<UmbCrop> = [];
+
+	@property({ type: Array })
+	public set value(value: Array<UmbCrop>) {
+		this._value = value ?? [];
+		this.#sorter.setModel(this.value);
+	}
+	public get value(): Array<UmbCrop> {
+		return this._value;
+	}
 
 	@state()
 	editCropAlias = '';
 
 	#oldInputValue = '';
 
+	#sorter = new UmbSorterController(this, {
+		getUniqueOfElement: (element: HTMLElement) => {
+			const unique = element.dataset["alias"];
+			return unique;
+		},
+		getUniqueOfModel: (modelEntry: UmbCrop) => {
+			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());
+		},
+	});
+
 	#onRemove(alias: string) {
 		this.value = [...this.value.filter((item) => item.alias !== alias)];
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -163,7 +192,7 @@ export class UmbPropertyEditorUIImageCropsElement extends UmbLitElement implemen
 					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>