@umbraco-cms/backoffice 14.2.0 → 14.3.0

package/dist-cms/packages/block/block/workspace/block-workspace-editor.element.js

@@ -4,14 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_BLOCK_WORKSPACE_CONTEXT } from './index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
-import { customElement, css, html, property } from '../../../../external/lit/index.js';
+import { customElement, css, html, property, state, nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { observeMultiple } from '../../../../libs/observable-api/index.js';
 let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extends UmbLitElement {
+    constructor() {
+        super();
+        this._headline = '';
+        this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
+            this.observe(observeMultiple([
+                context.isNew,
+                context.content.structure.ownerContentTypePart((contentType) => contentType?.name),
+            ]), ([isNew, name]) => {
+                this._headline = this.localize.term(isNew ? 'general_add' : 'general_edit') + ' ' + name;
+            }, 'observeOwnerContentElementTypeName');
+        });
+    }
     render() {
         return this.workspaceAlias
-            ? html ` <umb-workspace-editor alias=${this.workspaceAlias} headline=${'BLOCK EDITOR'}> </umb-workspace-editor> `
-            : '';
+            ? html ` <umb-workspace-editor alias=${this.workspaceAlias} headline=${this._headline}> </umb-workspace-editor> `
+            : nothing;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -27,6 +41,9 @@ let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extend
 __decorate([
     property({ type: String, attribute: false })
 ], UmbBlockWorkspaceEditorElement.prototype, "workspaceAlias", void 0);
+__decorate([
+    state()
+], UmbBlockWorkspaceEditorElement.prototype, "_headline", void 0);
 UmbBlockWorkspaceEditorElement = __decorate([
     customElement('umb-block-workspace-editor')
 ], UmbBlockWorkspaceEditorElement);

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

@@ -3,6 +3,8 @@ import { UmbBlockElementManager } from './block-element-manager.js';
 import { UmbSubmittableWorkspaceContextBase, type UmbRoutableWorkspaceContext } from '../../../core/workspace/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 import type { ManifestWorkspace } from '../../../core/extension-registry/index.js';
+import { UmbReadOnlyVariantStateManager } from '../../../core/utils/index.js';
+import type { UmbVariantId } from '../../../core/variant/index.js';
 export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings';
 export declare class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel> extends UmbSubmittableWorkspaceContextBase<LayoutDataType> implements UmbRoutableWorkspaceContext {
     #private;
@@ -13,18 +15,40 @@ export declare class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLay
     readonly content: UmbBlockElementManager;
     readonly settings: UmbBlockElementManager;
     readonly name: import("rxjs/internal/Observable").Observable<string | undefined>;
+    readonly variantId: import("rxjs/internal/Observable").Observable<UmbVariantId | undefined>;
+    readonly readOnlyState: UmbReadOnlyVariantStateManager;
     constructor(host: UmbControllerHost, workspaceArgs: {
         manifest: ManifestWorkspace;
     });
     protected resetState(): void;
     load(unique: string): Promise<void>;
     create(contentElementTypeId: string): Promise<void>;
+    /**
+     * Establishes live synchronization of the block's layout, content, and settings data.
+     * This method observes local changes in the layout, content, and settings data and pushes those updates to the block manager.
+     * This method is used in live editing mode to ensure that changes made to the block's data are immediately reflected
+     * in the backoffice UI.
+     */
+    establishLiveSync(): void;
     getData(): LayoutDataType | undefined;
     getUnique(): string;
     getEntityType(): string;
     getName(): string;
+    /**
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias - The alias of the property to get the value of.
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>} - The value of the property.
+     * @description Get an Observable for the value of this property.
+     */
     propertyValueByAlias<propertyAliasType extends keyof LayoutDataType>(propertyAlias: propertyAliasType): Promise<import("rxjs/internal/Observable").Observable<LayoutDataType[propertyAliasType]>>;
     getPropertyValue<propertyAliasType extends keyof LayoutDataType>(propertyAlias: propertyAliasType): LayoutDataType[propertyAliasType];
+    /**
+     * @function setPropertyValue
+     * @param {string} alias - The alias of the property to set the value of.
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
+     */
     setPropertyValue(alias: string, value: unknown): Promise<void>;
     submit(): Promise<void>;
     destroy(): void;

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

@@ -1,10 +1,11 @@
 import { UmbBlockWorkspaceEditorElement } from './block-workspace-editor.element.js';
 import { UmbBlockElementManager } from './block-element-manager.js';
 import { UmbSubmittableWorkspaceContextBase, UmbWorkspaceIsNewRedirectController, } from '../../../core/workspace/index.js';
-import { UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UmbClassState, UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
 import { UMB_MODAL_CONTEXT } from '../../../core/modal/index.js';
-import { decodeFilePath } from '../../../core/utils/index.js';
+import { decodeFilePath, UmbReadOnlyVariantStateManager } from '../../../core/utils/index.js';
 import { UMB_BLOCK_ENTRIES_CONTEXT, UMB_BLOCK_MANAGER_CONTEXT, } from '../index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../core/property/index.js';
 export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase {
     //
     #blockManager;
@@ -13,15 +14,15 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     #retrieveBlockEntries;
     #modalContext;
     #retrieveModalContext;
-    #editorConfigPromise;
     #entityType;
     #liveEditingMode;
     #initialLayout;
     #initialContent;
     #initialSettings;
     #layout;
-    // TODO: Get the name of the contentElementType..
+    // TODO: Get the name from the content element type. Or even better get the Label, but that has to be re-actively updated.
     #label;
+    #variantId;
     constructor(host, workspaceArgs) {
         super(host, workspaceArgs.manifest.alias);
         // Just for context token safety:
@@ -30,11 +31,14 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         this.layout = this.#layout.asObservable();
         this.unique = this.#layout.asObservablePart((x) => x?.contentUdi);
         this.contentUdi = this.#layout.asObservablePart((x) => x?.contentUdi);
-        this.content = new UmbBlockElementManager(this);
-        this.settings = new UmbBlockElementManager(this);
-        // TODO: Get the name of the contentElementType..
+        this.content = new UmbBlockElementManager(this, 'contentData');
+        this.settings = new UmbBlockElementManager(this, 'settingsData');
+        // TODO: Get the name from the content element type. Or even better get the Label, but that has to be re-actively updated.
         this.#label = new UmbStringState(undefined);
         this.name = this.#label.asObservable();
+        this.#variantId = new UmbClassState(undefined);
+        this.variantId = this.#variantId.asObservable();
+        this.readOnlyState = new UmbReadOnlyVariantStateManager(this);
         this.#modalRejected = () => {
             if (this.#liveEditingMode) {
                 // Revert
@@ -47,7 +51,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
                     }
                 }
                 else {
-                    // TODO: Revert the layout, content & settings data to the original state.
+                    // Revert the layout, content & settings data to the original state: [NL]
                     if (this.#initialLayout) {
                         this.#blockManager?.setOneLayout(this.#initialLayout, this.#modalContext?.data);
                     }
@@ -62,22 +66,47 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         };
         const manifest = workspaceArgs.manifest;
         this.#entityType = manifest.meta?.entityType;
+        this.addValidationContext(this.content.validation);
+        this.addValidationContext(this.settings.validation);
         this.#retrieveModalContext = this.consumeContext(UMB_MODAL_CONTEXT, (context) => {
             this.#modalContext = context;
             context.onSubmit().catch(this.#modalRejected);
         }).asPromise();
         this.#retrieveBlockManager = this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (context) => {
             this.#blockManager = context;
-            this.#editorConfigPromise = this.observe(context.editorConfiguration, (editorConfigs) => {
-                if (editorConfigs) {
-                    const value = editorConfigs.getValueByAlias('useLiveEditing');
-                    this.#liveEditingMode = value;
-                }
-            }, 'observeEditorConfig').asPromise();
+            this.observe(context.liveEditingMode, (liveEditingMode) => {
+                this.#liveEditingMode = liveEditingMode;
+            }, 'observeLiveEditingMode');
         }).asPromise();
         this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
             this.#blockEntries = context;
         }).asPromise();
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
+            this.observe(context.variantId, (variantId) => {
+                this.#variantId.setValue(variantId);
+            });
+            // If the current property is readonly all inner block content should also be readonly.
+            this.observe(context.isReadOnly, (isReadOnly) => {
+                const unique = 'UMB_PROPERTY_CONTEXT';
+                const variantId = this.#variantId.getValue();
+                if (variantId === undefined)
+                    return;
+                if (isReadOnly) {
+                    const state = {
+                        unique,
+                        variantId,
+                        message: '',
+                    };
+                    this.readOnlyState?.addState(state);
+                }
+                else {
+                    this.readOnlyState?.removeState(unique);
+                }
+            });
+        });
+        this.observe(this.variantId, (variantId) => {
+            this.content.setVariantId(variantId);
+        });
         this.routes.setRoutes([
             {
                 path: 'create/:elementTypeKey',
@@ -114,7 +143,6 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     async load(unique) {
         await this.#retrieveBlockManager;
         await this.#retrieveBlockEntries;
-        await this.#editorConfigPromise;
         if (!this.#blockManager || !this.#blockEntries) {
             throw new Error('Block manager not found');
         }
@@ -124,7 +152,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         }, 'observeLayoutInitially');
         this.#observeBlockData(unique);
         if (this.#liveEditingMode) {
-            this.#establishLiveSync();
+            this.establishLiveSync();
         }
     }
     async create(contentElementTypeId) {
@@ -140,7 +168,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         }
         // TODO: Missing some way to append more layout data... this could be part of modal data, (or context api?)
         this.setIsNew(true);
-        const blockCreated = await this.#blockEntries.create(contentElementTypeId, {}, this.#modalContext.data);
+        const blockCreated = await this.#blockEntries.create(contentElementTypeId, {}, this.#modalContext.data.originData);
         if (!blockCreated) {
             throw new Error('Block Entries could not create block');
         }
@@ -154,13 +182,13 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         }
         else {
             // Insert already, cause we are in live editing mode:
-            const blockInserted = await this.#blockEntries.insert(blockCreated.layout, blockCreated.content, blockCreated.settings, this.#modalContext.data);
+            const blockInserted = await this.#blockEntries.insert(blockCreated.layout, blockCreated.content, blockCreated.settings, this.#modalContext.data.originData);
             if (!blockInserted) {
                 throw new Error('Block Entries could not insert block');
             }
             const unique = blockCreated.layout.contentUdi;
             this.#observeBlockData(unique);
-            this.#establishLiveSync();
+            this.establishLiveSync();
         }
     }
     #observeBlockData(unique) {
@@ -199,7 +227,13 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             }
         }, 'observeLayout');
     }
-    #establishLiveSync() {
+    /**
+     * Establishes live synchronization of the block's layout, content, and settings data.
+     * This method observes local changes in the layout, content, and settings data and pushes those updates to the block manager.
+     * This method is used in live editing mode to ensure that changes made to the block's data are immediately reflected
+     * in the backoffice UI.
+     */
+    establishLiveSync() {
         this.observe(this.layout, (layoutData) => {
             if (layoutData) {
                 this.#blockManager?.setOneLayout(layoutData, this.#modalContext?.data);
@@ -228,7 +262,12 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     getName() {
         return 'block name content element type here...';
     }
-    // NOTICE currently the property methods are for layout, but this could be seen as wrong, we might need to dedicate a data manager for the layout as well.
+    /**
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias - The alias of the property to get the value of.
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>} - The value of the property.
+     * @description Get an Observable for the value of this property.
+     */
     async propertyValueByAlias(propertyAlias) {
         return this.#layout.asObservablePart((layout) => layout?.[propertyAlias]);
     }
@@ -236,6 +275,13 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         // TODO: Should be using Content, then we need a toggle or another method for getting settings.
         return this.#layout.getValue()?.[propertyAlias];
     }
+    /**
+     * @function setPropertyValue
+     * @param {string} alias - The alias of the property to set the value of.
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
+     */
     async setPropertyValue(alias, value) {
         const currentData = this.#layout.value;
         if (currentData) {
@@ -252,14 +298,14 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         if (!this.#liveEditingMode) {
             if (this.getIsNew() === true) {
                 // Insert (This means the layout entry will be inserted at the desired location):
-                const blockInserted = await this.#blockEntries.insert(layoutData, contentData, settingsData, this.#modalContext.data);
+                const blockInserted = await this.#blockEntries.insert(layoutData, contentData, settingsData, this.#modalContext.data.originData);
                 if (!blockInserted) {
                     throw new Error('Block Entries could not insert block');
                 }
             }
             else {
                 // Update data:
-                this.#blockManager.setOneLayout(layoutData, this.#modalContext.data);
+                this.#blockManager.setOneLayout(layoutData, this.#modalContext.data.originData);
                 if (contentData) {
                     this.#blockManager.setOneContent(contentData);
                 }

package/dist-cms/packages/block/block/workspace/block-workspace.modal-token.d.ts

@@ -1,6 +1,9 @@
 import type { UmbWorkspaceModalData, UmbWorkspaceModalValue } from '../../../core/modal/index.js';
 import { UmbModalToken } from '../../../core/modal/index.js';
-export interface UmbBlockWorkspaceData<OriginDataType = unknown> extends UmbWorkspaceModalData {
+export interface UmbBlockWorkspaceOriginData {
+}
+export interface UmbBlockWorkspaceData<OriginDataType extends UmbBlockWorkspaceOriginData = UmbBlockWorkspaceOriginData> extends UmbWorkspaceModalData {
     originData: OriginDataType;
+    baseDataPath: string;
 }
 export declare const UMB_BLOCK_WORKSPACE_MODAL: UmbModalToken<Omit<UmbWorkspaceModalData, "entityType">, UmbWorkspaceModalValue>;

package/dist-cms/packages/block/block/workspace/block-workspace.modal-token.js

@@ -4,5 +4,5 @@ export const UMB_BLOCK_WORKSPACE_MODAL = new UmbModalToken('Umb.Modal.Workspace'
         type: 'sidebar',
         size: 'large',
     },
-    data: { entityType: 'block', preset: {}, originData: {} },
+    data: { entityType: 'block', preset: {}, originData: {}, baseDataPath: undefined },
 });

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js

@@ -33,7 +33,7 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#blockWorkspace = workspaceContext;
             this.#tabsStructureHelper.setStructureManager(workspaceContext.content.structure);
-            workspaceContext.content.createPropertyDatasetContext(this);
+            workspaceContext.content.setup(this);
             this._observeRootGroups();
         });
     }
@@ -94,11 +94,7 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
             ? html `<umb-block-workspace-view-edit-tab
 						.managerName=${'content'}
 						.hideSingleGroup=${true}
-						.ownerTabId=${this._activeTabId && this.#tabsStructureHelper.isOwnerChildContainer(this._activeTabId)
-                ? this._activeTabId
-                : null}
-						.noTabName=${this._hasRootGroups && this._activeTabName === null}
-						.tabName=${this._activeTabName ?? undefined}>
+						.containerId=${this._activeTabId}>
 					</umb-block-workspace-view-edit-tab>`
             : ''}
 		`;
@@ -110,6 +106,8 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
 				display: block;
 				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);
+
+				padding: calc(var(--uui-size-layout-1));
 			}
 		`,
     ]; }

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.d.ts

@@ -8,6 +8,8 @@ export declare class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitEl
     get containerId(): string | null | undefined;
     set containerId(value: string | null | undefined);
     _propertyStructure: Array<UmbPropertyTypeModel>;
+    _dataPaths?: Array<string>;
+    private _ownerEntityType?;
     constructor();
     render(): unknown;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.js

@@ -8,7 +8,7 @@ import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token
 import { css, html, customElement, property, state, repeat } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { UmbContentTypePropertyStructureHelper } from '../../../../../core/content-type/index.js';
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../../core/lit-element/index.js';
 let UmbBlockWorkspaceViewEditPropertiesElement = class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
     #managerName;
     #blockWorkspace;
@@ -32,6 +32,7 @@ let UmbBlockWorkspaceViewEditPropertiesElement = class UmbBlockWorkspaceViewEdit
         this._propertyStructure = [];
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#blockWorkspace = workspaceContext;
+            this._ownerEntityType = this.#blockWorkspace.getEntityType();
             this.#setStructureManager();
         });
     }
@@ -41,18 +42,29 @@ let UmbBlockWorkspaceViewEditPropertiesElement = class UmbBlockWorkspaceViewEdit
         this.#propertyStructureHelper.setStructureManager(this.#blockWorkspace[this.#managerName].structure);
         this.observe(this.#propertyStructureHelper.propertyStructure, (propertyStructure) => {
             this._propertyStructure = propertyStructure;
+            this.#generatePropertyDataPath();
         }, 'observePropertyStructure');
     }
+    #generatePropertyDataPath() {
+        if (!this._propertyStructure)
+            return;
+        this._dataPaths = this._propertyStructure.map((property) => `$.${property.alias}`);
+    }
     render() {
-        return repeat(this._propertyStructure, (property) => property.alias, (property) => html `<umb-property-type-based-property .property=${property}></umb-property-type-based-property> `);
+        return repeat(this._propertyStructure, (property) => property.alias, (property, index) => html `<umb-property-type-based-property
+					class="property"
+					data-path=${this._dataPaths[index]}
+					.ownerEntityType=${this._ownerEntityType}
+					.property=${property}
+					${umbDestroyOnDisconnect()}></umb-property-type-based-property>`);
     }
     static { this.styles = [
         UmbTextStyles,
         css `
-			umb-property-type-based-property {
+			.property {
 				border-bottom: 1px solid var(--uui-color-divider);
 			}
-			umb-property-type-based-property:last-child {
+			.property:last-child {
 				border-bottom: 0;
 			}
 		`,
@@ -67,6 +79,12 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockWorkspaceViewEditPropertiesElement.prototype, "_propertyStructure", void 0);
+__decorate([
+    state()
+], UmbBlockWorkspaceViewEditPropertiesElement.prototype, "_dataPaths", void 0);
+__decorate([
+    state()
+], UmbBlockWorkspaceViewEditPropertiesElement.prototype, "_ownerEntityType", void 0);
 UmbBlockWorkspaceViewEditPropertiesElement = __decorate([
     customElement('umb-block-workspace-view-edit-properties')
 ], UmbBlockWorkspaceViewEditPropertiesElement);

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.d.ts

@@ -18,6 +18,7 @@ export declare class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
     _hasProperties: boolean;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
+    renderGroup(group: UmbPropertyTypeContainerModel): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbBlockWorkspaceViewEditTabElement;

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.js

@@ -62,12 +62,17 @@ let UmbBlockWorkspaceViewEditTabElement = class UmbBlockWorkspaceViewEditTabElem
 						class="properties"
 						.containerId=${this._containerId}></umb-block-workspace-view-edit-properties>`
             : ''}
-			${repeat(this._groups, (group) => group.id, (group) => html ` <uui-box .headline=${group.name || ''}
-						><umb-block-workspace-view-edit-properties
-							.managerName=${this.#managerName}
-							class="properties"
-							.containerId=${group.id}></umb-block-workspace-view-edit-properties
-					></uui-box>`)}
+			${this.hideSingleGroup && this._groups.length === 1
+            ? this.renderGroup(this._groups[0])
+            : repeat(this._groups, (group) => group.id, (group) => html ` <uui-box .headline=${group.name}>${this.renderGroup(group)}</uui-box>`)}
+		`;
+    }
+    renderGroup(group) {
+        return html `
+			<umb-block-workspace-view-edit-properties
+				.managerName=${this.#managerName}
+				class="properties"
+				.containerId=${group.id}></umb-block-workspace-view-edit-properties>
 		`;
     }
     static { this.styles = [

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.js

@@ -46,8 +46,8 @@ let UmbBlockWorkspaceViewEditElement = class UmbBlockWorkspaceViewEditElement ex
             return;
         const dataManager = this.#blockWorkspace[this.#managerName];
         this.#tabsStructureHelper.setStructureManager(dataManager.structure);
-        // Create Data Set:
-        dataManager.createPropertyDatasetContext(this);
+        // Create Data Set & setup Validation Context:
+        dataManager.setup(this);
         this.observe(this.#blockWorkspace[this.#managerName].structure.hasRootContainers('Group'), (hasRootGroups) => {
             this._hasRootGroups = hasRootGroups;
             this._createRoutes();

package/dist-cms/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.d.ts

@@ -25,8 +25,21 @@ export declare class UmbBlockGridAreaTypeWorkspaceContext extends UmbSubmittable
     getEntityType(): string;
     getName(): string | undefined;
     setName(name: string | undefined): void;
+    /**
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
+     * @description Get an Observable for the value of this property.
+     */
     propertyValueByAlias<ReturnType = unknown>(propertyAlias: keyof UmbBlockGridTypeAreaType): Promise<import("rxjs/internal/Observable").Observable<ReturnType>>;
     getPropertyValue<ReturnType = unknown>(propertyAlias: keyof UmbBlockGridTypeAreaType): ReturnType;
+    /**
+     * @function setPropertyValue
+     * @param {string} alias
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
+     */
     setPropertyValue(alias: string, value: unknown): Promise<void>;
     submit(): Promise<void>;
     destroy(): void;

package/dist-cms/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.js

@@ -98,12 +98,25 @@ export class UmbBlockGridAreaTypeWorkspaceContext extends UmbSubmittableWorkspac
     setName(name) {
         throw new Error('You cannot set a name of a area-type.');
     }
+    /**
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
+     * @description Get an Observable for the value of this property.
+     */
     async propertyValueByAlias(propertyAlias) {
         return this.#data.asObservablePart((data) => data?.[propertyAlias]);
     }
     getPropertyValue(propertyAlias) {
         return this.#data.getValue()?.[propertyAlias];
     }
+    /**
+     * @function setPropertyValue
+     * @param {string} alias
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
+     */
     async setPropertyValue(alias, value) {
         const currentData = this.#data.value;
         if (currentData) {

package/dist-cms/packages/block/block-grid/components/block-grid-area-config-entry/workspace/views/settings.element.d.ts

@@ -1,6 +1,10 @@
 import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
 import type { UmbWorkspaceViewElement } from '../../../../../../core/extension-registry/index.js';
 export declare class UmbBlockGridAreaTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
+    #private;
+    _minValue?: number;
+    _maxValue?: number;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

package/dist-cms/packages/block/block-grid/components/block-grid-area-config-entry/workspace/views/settings.element.js

@@ -4,15 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, html, customElement } from '../../../../../../../external/lit/index.js';
+import { css, html, customElement, state } from '../../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../../core/style/index.js';
 import { UmbLitElement } from '../../../../../../core/lit-element/index.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../../../core/property/index.js';
 let UmbBlockGridAreaTypeWorkspaceViewSettingsElement = class UmbBlockGridAreaTypeWorkspaceViewSettingsElement extends UmbLitElement {
     // TODO: Add Localizations...
     // TODO: Validation to prevent spaces and weird characters in alias:
-    // TODO: Add create button label field:
-    // TODO: Turn minAllowed and maxAllowed into one range property/input...
-    // TODO: Add validation permission field:
+    #dataset;
+    constructor() {
+        super();
+        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
+            this.#dataset = context;
+            this.observe(await this.#dataset.propertyValueByAlias('minAllowed'), (min) => {
+                this._minValue = min ?? 0;
+            });
+            this.observe(await this.#dataset.propertyValueByAlias('maxAllowed'), (max) => {
+                this._maxValue = max ?? Infinity;
+            });
+        });
+    }
+    #onAllowedRangeChange = (e) => {
+        this.#dataset?.setPropertyValue('minAllowed', e.target.minValue);
+        this.#dataset?.setPropertyValue('maxAllowed', e.target.maxValue);
+    };
     render() {
         return html `
 			<uui-box headline=${'Identification'}>
@@ -27,14 +42,14 @@ let UmbBlockGridAreaTypeWorkspaceViewSettingsElement = class UmbBlockGridAreaTyp
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
 			</uui-box>
 			<uui-box headline=${'Validation'}>
-				<umb-property
-					label=${'minAllowed'}
-					alias="minAllowed"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
-				<umb-property
-					label=${'maxAllowed'}
-					alias="maxAllowed"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+				<umb-property-layout label=${'rangeAllowed'}>
+					<umb-input-number-range
+						slot="editor"
+						.minValue=${this._minValue}
+						.maxValue=${this._maxValue}
+						@change=${this.#onAllowedRangeChange}>
+					</umb-input-number-range>
+				</umb-property-layout>
 
 				<umb-property
 					label=${'specifiedAllowance'}
@@ -64,6 +79,12 @@ let UmbBlockGridAreaTypeWorkspaceViewSettingsElement = class UmbBlockGridAreaTyp
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbBlockGridAreaTypeWorkspaceViewSettingsElement.prototype, "_minValue", void 0);
+__decorate([
+    state()
+], UmbBlockGridAreaTypeWorkspaceViewSettingsElement.prototype, "_maxValue", void 0);
 UmbBlockGridAreaTypeWorkspaceViewSettingsElement = __decorate([
     customElement('umb-block-grid-area-type-workspace-view')
 ], UmbBlockGridAreaTypeWorkspaceViewSettingsElement);

package/dist-cms/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.d.ts

@@ -6,6 +6,7 @@ import { UmbVariantId } from '../../../../core/variant/index.js';
 import type { Observable } from '../../../../../external/rxjs/index.js';
 export declare class UmbBlockGridInlinePropertyDatasetContext extends UmbControllerBase implements UmbPropertyDatasetContext {
     #private;
+    readOnly: Observable<boolean>;
     getVariantId(): UmbVariantId;
     getEntityType(): string;
     getUnique(): string | undefined;
@@ -13,14 +14,24 @@ export declare class UmbBlockGridInlinePropertyDatasetContext extends UmbControl
     readonly name: Observable<string | undefined>;
     constructor(host: UmbControllerHost, entryContext: UmbBlockGridEntryContext);
     /**
-     * TODO: Write proper JSDocs here.
-     * @param propertyAlias
+     * @function propertyValueByAlias
+     * @param {string} propertyAlias
+     * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
+     * @description Get an Observable for the value of this property.
      */
     propertyValueByAlias<ReturnType = unknown>(propertyAlias: string): Promise<Observable<ReturnType | undefined>>;
     /**
-     * TODO: Write proper JSDocs here.
-     * @param propertyAlias
-     * @param value
+     * @function setPropertyValue
+     * @param {string} propertyAlias
+     * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+     * @returns {Promise<void>}
+     * @description Set the value of this property.
      */
     setPropertyValue(propertyAlias: string, value: unknown): Promise<void>;
+    /**
+     * Gets the read-only state of the current variant culture.
+     * @returns {*}  {boolean}
+     * @memberof UmbBlockGridInlinePropertyDatasetContext
+     */
+    getReadOnly(): boolean;
 }