Merge branch 'main' into v14/chore/check-paths-in-dist-cms

Author: iOvergaard

package-lock.json

@@ -139,7 +139,8 @@
 		"./src/packages/webhook",
 		"./src/packages/health-check",
 		"./src/packages/tags",
-		"./src/packages/templating"
+		"./src/packages/templating",
+		"./src/packages/property-editors"
 	],
 	"scripts": {
 		"backoffice:test:e2e": "npx playwright test",
@@ -179,7 +180,7 @@
 		"test:dev": "web-test-runner --config ./web-test-runner.dev.config.mjs",
 		"test:dev-watch": "web-test-runner --watch --config ./web-test-runner.dev.config.mjs",
 		"test:watch": "web-test-runner --watch",
-		"test": "web-test-runner --coverage",
+		"test": "web-test-runner",
 		"wc-analyze:vscode": "wca **/*.element.ts --format vscode --outFile dist-cms/vscode-html-custom-data.json",
 		"wc-analyze": "wca **/*.element.ts --outFile dist-cms/custom-elements.json",
 		"generate:tsconfig": "node ./devops/tsconfig/index.js",
@@ -215,7 +216,7 @@
 		"@hey-api/openapi-ts": "^0.48.1",
 		"@mdx-js/react": "^3.0.0",
 		"@open-wc/testing": "^4.0.0",
-		"@playwright/test": "^1.41.1",
+		"@playwright/test": "^1.45.1",
 		"@rollup/plugin-commonjs": "^25.0.7",
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",

package.json

@@ -12,7 +12,8 @@ import '../block-grid-entries/index.js';
 @customElement('umb-block-grid-areas-container')
 export class UmbBlockGridAreasContainerElement extends UmbLitElement {
 	//
-	#styleElement?: HTMLLinkElement;
+	@state()
+	_styleElement?: HTMLLinkElement;
 
 	@state()
 	_areas?: Array<UmbBlockGridTypeAreaType> = [];
@@ -44,9 +45,11 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
 			this.observe(
 				manager.layoutStylesheet,
 				(stylesheet) => {
-					this.#styleElement = document.createElement('link');
-					this.#styleElement.setAttribute('rel', 'stylesheet');
-					this.#styleElement.setAttribute('href', stylesheet);
+					// Do not re-render stylesheet if its the same href.
+					if (!stylesheet || this._styleElement?.href === stylesheet) return;
+					this._styleElement = document.createElement('link');
+					this._styleElement.rel = 'stylesheet';
+					this._styleElement.href = stylesheet;
 				},
 				'observeStylesheet',
 			);
@@ -55,7 +58,7 @@ export class UmbBlockGridAreasContainerElement extends UmbLitElement {
 
 	override render() {
 		return this._areas && this._areas.length > 0
-			? html` ${this.#styleElement}
+			? html` ${this._styleElement}
 					<div
 						class="umb-block-grid__area-container"
 						style="--umb-block-grid--area-grid-columns: ${this._areaGridColumns}">

src/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.ts

@@ -1,12 +1,9 @@
-import { UmbBlockGridEntriesContext } from '../../context/block-grid-entries.context.js';
-import type { UmbBlockGridEntryElement } from '../block-grid-entry/index.js';
 import {
 	getAccumulatedValueOfIndex,
 	getInterpolatedIndexOfPositionInWeightMap,
 	isWithinRect,
 } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
 import { html, customElement, state, repeat, css, property, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import '../block-grid-entry/index.js';
@@ -17,6 +14,9 @@ import {
 	type UmbFormControlValidatorConfig,
 } from '@umbraco-cms/backoffice/validation';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
+import { UmbBlockGridEntriesContext } from '../../context/block-grid-entries.context.js';
+import type { UmbBlockGridEntryElement } from '../block-grid-entry/index.js';
+import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
 
 /**
  * Notice this utility method is not really shareable with others as it also takes areas into account. [NL]
@@ -209,10 +209,10 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 			this.observe(
 				manager.layoutStylesheet,
 				(stylesheet) => {
-					if (this._styleElement && this._styleElement.href === stylesheet) return;
+					if (!stylesheet || this._styleElement?.href === stylesheet) return;
 					this._styleElement = document.createElement('link');
-					this._styleElement.setAttribute('rel', 'stylesheet');
-					this._styleElement.setAttribute('href', stylesheet);
+					this._styleElement.rel = 'stylesheet';
+					this._styleElement.href = stylesheet;
 				},
 				'observeStylesheet',
 			);

src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

@@ -1,6 +1,10 @@
 import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js';
 import type { UmbBlockGridWorkspaceData } from '../index.js';
 import { UmbArrayState, appendToFrozenArray, pushAtToUniqueArray } from '@umbraco-cms/backoffice/observable-api';
+import { removeInitialSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { type UmbBlockDataType, UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
 
@@ -13,24 +17,49 @@ export class UmbBlockGridManagerContext<
 	BlockLayoutType extends UmbBlockGridLayoutModel = UmbBlockGridLayoutModel,
 > extends UmbBlockManagerContext<UmbBlockGridTypeModel, UmbBlockGridLayoutModel> {
 	//
+	#initAppUrl: Promise<void>;
+	#appUrl?: string;
 	#blockGroups = new UmbArrayState(<Array<UmbBlockTypeGroup>>[], (x) => x.key);
 	public readonly blockGroups = this.#blockGroups.asObservable();
 
-	layoutStylesheet = this._editorConfiguration.asObservablePart(
-		(x) => (x?.getValueByAlias('layoutStylesheet') as string) ?? UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET,
-	);
+	layoutStylesheet = this._editorConfiguration.asObservablePart((x) => {
+		if (!x) return undefined;
+		const layoutStylesheet = x.getValueByAlias<string>('layoutStylesheet');
+		if (!layoutStylesheet) return UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET;
+
+		if (layoutStylesheet) {
+			// Cause we await initAppUrl in setting the _editorConfiguration, we can trust the appUrl begin here.
+			return this.#appUrl! + removeInitialSlashFromPath(transformServerPathToClientPath(layoutStylesheet));
+		}
+		return undefined;
+	});
 	gridColumns = this._editorConfiguration.asObservablePart((x) => {
 		const value = x?.getValueByAlias('gridColumns') as string | undefined;
 		return parseInt(value && value !== '' ? value : '12');
 	});
 
+	override setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) {
+		this.#initAppUrl.then(() => {
+			// we await initAppUrl, So the appUrl begin here is available when retrieving the layoutStylesheet.
+			this._editorConfiguration.setValue(configs);
+		});
+	}
+
 	setBlockGroups(blockGroups: Array<UmbBlockTypeGroup>) {
 		this.#blockGroups.setValue(blockGroups);
 	}
 	getBlockGroups() {
 		return this.#blockGroups.value;
 	}
 
+	constructor(host: UmbControllerHost) {
+		super(host);
+
+		this.#initAppUrl = this.getContext(UMB_APP_CONTEXT).then((appContext) => {
+			this.#appUrl = appContext.getServerUrl() + appContext.getBackofficePath();
+		});
+	}
+
 	create(
 		contentElementTypeKey: string,
 		partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>,

src/packages/block/block-grid/context/block-grid-manager.context.ts

@@ -55,6 +55,12 @@ export const manifests: Array<ManifestTypes> = [
 						label: 'Layout Stylesheet',
 						description: 'Override default stylesheet for backoffice layout.',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridLayoutStylesheet',
+						config: [
+							{
+								alias: 'singleItemMode',
+								value: true,
+							},
+						],
 					},
 				],
 			},

src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts

@@ -1,16 +1,16 @@
-import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
-import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { html, customElement, property, state, css, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
-import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
 import '../../components/block-grid-entries/index.js';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
+import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
+import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
 
 /**
  * @element umb-property-editor-ui-block-grid