Bugfix: Correct static file values

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

@@ -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-entries/block-grid-entries.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/context/block-grid-manager.context.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/property-editors/block-grid-editor/manifests.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/property-editor-ui-block-grid.element.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

src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts

@@ -3,37 +3,69 @@
 import type { UmbInputStaticFileElement } from '@umbraco-cms/backoffice/static-file';
 
 import '@umbraco-cms/backoffice/static-file';
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import {
 	UmbPropertyValueChangeEvent,
 	type UmbPropertyEditorConfigCollection,
 } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
+import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-property-editor-ui-block-grid-layout-stylesheet')
 export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
-	private _value: Array<string> = [];
+	#pickableFilter = (item: any) => item.unique.endsWith('css');
+	#singleItemMode = false;
+	// TODO: get rid of UmbServerFilePathUniqueSerializer in v.15 [NL]
+	#serverFilePathUniqueSerializer = new UmbServerFilePathUniqueSerializer();
 
-	@property({ type: Array })
-	public set value(value: Array<string>) {
-		this._value = value || [];
+	@state()
+	private _value?: string | Array<string>;
+
+	@property({ attribute: false })
+	public set value(value: string | Array<string> | undefined) {
+		if (Array.isArray(value)) {
+			this._value = value.map((unique) => this.#serverFilePathUniqueSerializer.toUnique(unique));
+		} else if (value) {
+			this._value = this.#serverFilePathUniqueSerializer.toUnique(value);
+		} else {
+			this._value = undefined;
+		}
 	}
-	public get value(): Array<string> {
-		return this._value;
+	public get value(): string | Array<string> | undefined {
+		if (Array.isArray(this._value)) {
+			return this._value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique) ?? '');
+		} else if (this._value) {
+			return this.#serverFilePathUniqueSerializer.toServerPath(this._value) ?? '';
+		} else {
+			return undefined;
+		}
 	}
 
-	private _pickableFilter = (item: any) => item.unique.endsWith('css');
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		this.#singleItemMode = config?.getValueByAlias<boolean>('singleItemMode') ?? false;
+		const validationLimit = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
 
-	@property({ attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
+		this._limitMin = validationLimit?.min ?? 0;
+		this._limitMax = this.#singleItemMode ? 1 : validationLimit?.max ?? Infinity;
+	}
+
+	@state()
+	private _limitMin: number = 0;
+	@state()
+	private _limitMax: number = Infinity;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputStaticFileElement).selection;
+		if (this.#singleItemMode) {
+			this._value = (event.target as UmbInputStaticFileElement).selection[0];
+		} else {
+			this._value = (event.target as UmbInputStaticFileElement).selection;
+		}
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
@@ -42,10 +74,10 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 		return html`
 			<umb-input-static-file
 				@change=${this._onChange}
-				.pickableFilter=${this._pickableFilter}
-				.selection=${this._value}
-				.min=${0}
-				.max=${1}></umb-input-static-file>
+				.pickableFilter=${this.#pickableFilter}
+				.selection=${this._value ? (Array.isArray(this._value) ? this._value : [this._value]) : []}
+				.min=${this._limitMin}
+				.max=${this._limitMax}></umb-input-static-file>
 			<br />
 			<a href="/umbraco/backoffice/assets/css/umbraco-blockgridlayout.css">Link to default layout stylesheet</a>
 		`;

src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts

@@ -8,14 +8,6 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
 	override render() {
 		return html`
 			<uui-box headline="Advanced">
-				<umb-property
-					label="Custom view"
-					alias="view"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
-				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
 				<umb-property
 					label="Overlay size"
 					alias="editorSize"
@@ -41,7 +33,13 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
 				<umb-property
 					label="Thumbnail"
 					alias="thumbnail"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
+					.config=${[
+						{
+							alias: 'singleItemMode',
+							value: true,
+						},
+					]}></umb-property>
 			</uui-box>
 		`;
 	}

src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts

@@ -12,14 +12,6 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 					label="Label"
 					alias="label"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
-				<!--<umb-property
-					label="Custom view"
-					alias="view"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
-				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>-->
 				<umb-property
 					label="Overlay size"
 					alias="editorSize"
@@ -67,9 +59,15 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 					alias="iconColor"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
 				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+					label="Thumbnail"
+					alias="thumbnail"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
+					.config=${[
+						{
+							alias: 'singleItemMode',
+							value: true,
+						},
+					]}></umb-property>
 			</uui-box>
 			<uui-box headline="Advanced">
 				<umb-property

src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts

@@ -63,9 +63,15 @@ export class UmbBlockRteTypeWorkspaceViewSettingsElement extends UmbLitElement i
 					alias="iconColor"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
 				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+					label="Thumbnail"
+					alias="thumbnail"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
+					.config=${[
+						{
+							alias: 'singleItemMode',
+							value: true,
+						},
+					]}></umb-property>
 			</uui-box>
 		`;
 	}