@umbraco-cms/backoffice 14.0.0-rc4 → 14.0.0

package/dist-cms/mocks/data/media-type/media-type.data.js

@@ -86,5 +86,7 @@ export const data = [
         isFolder: false,
         hasChildren: false,
         collection: { id: 'dt-collectionView' },
+        isDeletable: false,
+        aliasCanBeChanged: false,
     },
 ];

package/dist-cms/mocks/data/media-type/media-type.db.js

@@ -44,6 +44,8 @@ const createMockMediaTypeFolderMapper = (request) => {
         isFolder: true,
         hasChildren: false,
         collection: null,
+        isDeletable: false,
+        aliasCanBeChanged: false,
     };
 };
 const createMockMediaTypeMapper = (request) => {
@@ -65,6 +67,8 @@ const createMockMediaTypeMapper = (request) => {
         isFolder: false,
         hasChildren: false,
         collection: null,
+        isDeletable: false,
+        aliasCanBeChanged: false,
     };
 };
 const mediaTypeDetailMapper = (item) => {
@@ -83,6 +87,8 @@ const mediaTypeDetailMapper = (item) => {
         allowedMediaTypes: item.allowedMediaTypes,
         compositions: item.compositions,
         collection: item.collection,
+        isDeletable: item.isDeletable,
+        aliasCanBeChanged: item.aliasCanBeChanged,
     };
 };
 const mediaTypeTreeItemMapper = (item) => {
@@ -93,6 +99,7 @@ const mediaTypeTreeItemMapper = (item) => {
         parent: item.parent,
         isFolder: item.isFolder,
         icon: item.icon,
+        isDeletable: item.isDeletable,
     };
 };
 const mediaTypeItemMapper = (item) => {

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

@@ -1,19 +1,18 @@
 import type { UmbBlockDataType, UmbBlockLayoutBaseModel } from '../types.js';
-import { UMB_BLOCK_WORKSPACE_MODAL } from '../workspace/block-workspace.modal-token.js';
+import type { UmbBlockWorkspaceData } from '../workspace/block-workspace.modal-token.js';
 import type { UmbBlockDataObjectModel, UmbBlockManagerContext } from './block-manager.context.js';
+import { type Observable, UmbArrayState, UmbBasicState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import type { UmbBlockTypeBaseModel } from '../../block-type/index.js';
 import type { UmbContextToken } from '../../../../libs/context-api/index.js';
-import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
-import { type Observable, UmbArrayState, UmbBasicState } from '../../../../libs/observable-api/index.js';
-import { type UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '../../../core/modal/index.js';
+import type { UmbModalRouteBuilder } from '../../../core/router/index.js';
 export declare abstract class UmbBlockEntriesContext<BlockManagerContextTokenType extends UmbContextToken<BlockManagerContextType, BlockManagerContextType>, BlockManagerContextType extends UmbBlockManagerContext<BlockType, BlockLayoutType>, BlockType extends UmbBlockTypeBaseModel, BlockLayoutType extends UmbBlockLayoutBaseModel> extends UmbContextBase<UmbBlockEntriesContext<BlockManagerContextTokenType, BlockManagerContextType, BlockType, BlockLayoutType>> {
-    #private;
     _manager?: BlockManagerContextType;
     _retrieveManager: Promise<BlockManagerContextType>;
-    _workspaceModal: UmbModalRouteRegistrationController;
     protected _catalogueRouteBuilderState: UmbBasicState<UmbModalRouteBuilder | undefined>;
     readonly catalogueRouteBuilder: Observable<UmbModalRouteBuilder | undefined>;
+    protected _workspacePath: UmbStringState<undefined>;
     workspacePath: Observable<string | undefined>;
     abstract readonly canCreate: Observable<boolean>;
     protected _layoutEntries: UmbArrayState<BlockLayoutType>;
@@ -28,7 +27,7 @@ export declare abstract class UmbBlockEntriesContext<BlockManagerContextTokenTyp
     setOneLayout(layoutData: BlockLayoutType): UmbArrayState<BlockLayoutType>;
     abstract getPathForCreateBlock(index: number): string | undefined;
     abstract getPathForClipboard(index: number): string | undefined;
-    abstract create(contentElementTypeKey: string, layoutEntry?: Omit<BlockLayoutType, 'contentUdi'>, modalData?: typeof UMB_BLOCK_WORKSPACE_MODAL.DATA): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;
-    abstract insert(layoutEntry: BlockLayoutType, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, modalData: typeof UMB_BLOCK_WORKSPACE_MODAL.DATA): Promise<boolean>;
+    abstract create(contentElementTypeKey: string, layoutEntry?: Omit<BlockLayoutType, 'contentUdi'>, modalData?: UmbBlockWorkspaceData): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;
+    abstract insert(layoutEntry: BlockLayoutType, content: UmbBlockDataType, settings: UmbBlockDataType | undefined, modalData: UmbBlockWorkspaceData): Promise<boolean>;
     delete(contentUdi: string): Promise<void>;
 }

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

@@ -1,16 +1,13 @@
-import { UMB_BLOCK_WORKSPACE_MODAL } from '../workspace/block-workspace.modal-token.js';
 import { UMB_BLOCK_ENTRIES_CONTEXT } from './block-entries.context-token.js';
-import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbArrayState, UmbBasicState, UmbStringState } from '../../../../libs/observable-api/index.js';
-import { UmbModalRouteRegistrationController } from '../../../core/modal/index.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
 export class UmbBlockEntriesContext extends UmbContextBase {
-    #workspacePath;
     constructor(host, blockManagerContextToken) {
         super(host, UMB_BLOCK_ENTRIES_CONTEXT.toString());
         this._catalogueRouteBuilderState = new UmbBasicState(undefined);
         this.catalogueRouteBuilder = this._catalogueRouteBuilderState.asObservable();
-        this.#workspacePath = new UmbStringState(undefined);
-        this.workspacePath = this.#workspacePath.asObservable();
+        this._workspacePath = new UmbStringState(undefined);
+        this.workspacePath = this._workspacePath.asObservable();
         this._layoutEntries = new UmbArrayState([], (x) => x.contentUdi);
         this.layoutEntries = this._layoutEntries.asObservable();
         this.layoutEntriesLength = this._layoutEntries.asObservablePart((x) => x.length);
@@ -18,24 +15,7 @@ export class UmbBlockEntriesContext extends UmbContextBase {
         this._retrieveManager = this.consumeContext(blockManagerContextToken, (blockGridManager) => {
             this._manager = blockGridManager;
             this._gotBlockManager();
-            this.observe(this._manager.propertyAlias, (alias) => {
-                this._workspaceModal.setUniquePathValue('propertyAlias', alias);
-            }, 'observePropertyAlias');
-            this.observe(this._manager.variantId, (variantId) => {
-                // TODO: This might not be the property variant ID, but the content variant ID. Check up on what makes most sense?
-                this._workspaceModal.setUniquePathValue('variantId', variantId?.toString());
-            }, 'observePropertyVariantId');
         }).asPromise();
-        this._workspaceModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_WORKSPACE_MODAL)
-            .addUniquePaths(['propertyAlias', 'variantId'])
-            .addAdditionalPath('block')
-            .onSetup(() => {
-            return { data: { entityType: 'block', preset: {} }, modal: { size: 'medium' } };
-        })
-            .observeRouteBuilder((routeBuilder) => {
-            const newPath = routeBuilder({});
-            this.#workspacePath.setValue(newPath);
-        });
     }
     async getManager() {
         await this._retrieveManager;

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

@@ -21,12 +21,10 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
     setIndex(index: number | undefined): void;
     readonly createBeforePath: Observable<string | undefined>;
     readonly createAfterPath: Observable<string | undefined>;
+    readonly contentElementType: Observable<UmbContentTypeModel | undefined>;
     readonly contentElementTypeName: Observable<string | undefined>;
     readonly contentElementTypeAlias: Observable<string | undefined>;
-    readonly label: Observable<string>;
-    readonly workspacePath: Observable<string | undefined>;
-    readonly workspaceEditContentPath: Observable<string>;
-    readonly workspaceEditSettingsPath: Observable<string>;
+    readonly contentElementTypeIcon: Observable<string | undefined>;
     _blockType: UmbObjectState<BlockType | undefined>;
     readonly blockType: Observable<BlockType | undefined>;
     readonly contentElementTypeKey: Observable<string | undefined>;
@@ -38,6 +36,10 @@ export declare abstract class UmbBlockEntryContext<BlockManagerContextTokenType
      */
     readonly contentUdi: Observable<string | undefined>;
     readonly unique: Observable<string | undefined>;
+    readonly label: Observable<string>;
+    readonly workspacePath: Observable<string | undefined>;
+    readonly workspaceEditContentPath: Observable<string>;
+    readonly workspaceEditSettingsPath: Observable<string>;
     readonly content: Observable<UmbBlockDataType | undefined>;
     readonly contentTypeKey: Observable<string | undefined>;
     readonly settings: Observable<UmbBlockDataType | undefined>;

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

@@ -1,5 +1,5 @@
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
-import { UmbNumberState, UmbObjectState, UmbStringState, observeMultiple, } from '../../../../libs/observable-api/index.js';
+import { UmbNumberState, UmbObjectState, UmbStringState, mergeObservables, observeMultiple, } from '../../../../libs/observable-api/index.js';
 import { encodeFilePath } from '../../../core/utils/index.js';
 import { umbConfirmModal } from '../../../core/modal/index.js';
 export class UmbBlockEntryContext extends UmbContextBase {
@@ -29,9 +29,7 @@ export class UmbBlockEntryContext extends UmbContextBase {
     }
     #createBeforePath;
     #createAfterPath;
-    #contentElementTypeName;
-    #contentElementTypeAlias;
-    // TODO: index state + observable?
+    #contentElementType;
     #label;
     #generateWorkspaceEditContentPath;
     #generateWorkspaceEditSettingsPath;
@@ -65,19 +63,11 @@ export class UmbBlockEntryContext extends UmbContextBase {
         this.createBeforePath = this.#createBeforePath.asObservable();
         this.#createAfterPath = new UmbStringState(undefined);
         this.createAfterPath = this.#createAfterPath.asObservable();
-        this.#contentElementTypeName = new UmbStringState(undefined);
-        this.contentElementTypeName = this.#contentElementTypeName.asObservable();
-        this.#contentElementTypeAlias = new UmbStringState(undefined);
-        this.contentElementTypeAlias = this.#contentElementTypeAlias.asObservable();
-        // TODO: index state + observable?
-        this.#label = new UmbStringState('');
-        this.label = this.#label.asObservable();
-        this.#generateWorkspaceEditContentPath = (path) => path ? path + 'edit/' + encodeFilePath(this.getContentUdi() ?? '') + '/view/content' : '';
-        this.#generateWorkspaceEditSettingsPath = (path) => path ? path + 'edit/' + encodeFilePath(this.getContentUdi() ?? '') + '/view/settings' : '';
-        this.#workspacePath = new UmbStringState(undefined);
-        this.workspacePath = this.#workspacePath.asObservable();
-        this.workspaceEditContentPath = this.#workspacePath.asObservablePart(this.#generateWorkspaceEditContentPath);
-        this.workspaceEditSettingsPath = this.#workspacePath.asObservablePart(this.#generateWorkspaceEditSettingsPath);
+        this.#contentElementType = new UmbObjectState(undefined);
+        this.contentElementType = this.#contentElementType.asObservable();
+        this.contentElementTypeName = this.#contentElementType.asObservablePart((x) => x?.name);
+        this.contentElementTypeAlias = this.#contentElementType.asObservablePart((x) => x?.alias);
+        this.contentElementTypeIcon = this.#contentElementType.asObservablePart((x) => x?.icon);
         this._blockType = new UmbObjectState(undefined);
         this.blockType = this._blockType.asObservable();
         this.contentElementTypeKey = this._blockType.asObservablePart((x) => x?.contentElementTypeKey);
@@ -89,6 +79,14 @@ export class UmbBlockEntryContext extends UmbContextBase {
          */
         this.contentUdi = this._layout.asObservablePart((x) => x?.contentUdi);
         this.unique = this._layout.asObservablePart((x) => x?.contentUdi);
+        this.#label = new UmbStringState('');
+        this.label = this.#label.asObservable();
+        this.#generateWorkspaceEditContentPath = (path, contentUdi) => path && contentUdi ? path + 'edit/' + encodeFilePath(contentUdi) + '/view/content' : '';
+        this.#generateWorkspaceEditSettingsPath = (path, contentUdi) => path && contentUdi ? path + 'edit/' + encodeFilePath(contentUdi) + '/view/settings' : '';
+        this.#workspacePath = new UmbStringState(undefined);
+        this.workspacePath = this.#workspacePath.asObservable();
+        this.workspaceEditContentPath = mergeObservables([this.contentUdi, this.workspacePath], ([contentUdi, path]) => this.#generateWorkspaceEditContentPath(path, contentUdi));
+        this.workspaceEditSettingsPath = mergeObservables([this.contentUdi, this.workspacePath], ([contentUdi, path]) => this.#generateWorkspaceEditSettingsPath(path, contentUdi));
         this.#content = new UmbObjectState(undefined);
         this.content = this.#content.asObservable();
         this.contentTypeKey = this.#content.asObservablePart((x) => x?.contentTypeKey);
@@ -209,8 +207,9 @@ export class UmbBlockEntryContext extends UmbContextBase {
             return;
         // observe blockType:
         this.observe(this._manager.contentTypeOf(contentTypeKey), (contentType) => {
-            this.#contentElementTypeAlias.setValue(contentType?.alias);
-            this.#contentElementTypeName.setValue(contentType?.name);
+            //this.#contentElementTypeAlias.setValue(contentType?.alias);
+            //this.#contentElementTypeName.setValue(contentType?.name);
+            this.#contentElementType.setValue(contentType);
             this._gotContentType(contentType);
         }, 'observeContentElementType');
     }
@@ -248,10 +247,10 @@ export class UmbBlockEntryContext extends UmbContextBase {
     // Public methods:
     //activate
     edit() {
-        window.location.href = this.#generateWorkspaceEditContentPath(this.#workspacePath.value);
+        window.location.href = this.#generateWorkspaceEditContentPath(this.#workspacePath.value, this.getContentUdi());
     }
     editSettings() {
-        window.location.href = this.#generateWorkspaceEditSettingsPath(this.#workspacePath.value);
+        window.location.href = this.#generateWorkspaceEditSettingsPath(this.#workspacePath.value, this.getContentUdi());
     }
     async requestDelete() {
         const blockName = this.getLabel();

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

@@ -26,6 +26,7 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     readonly contents: import("rxjs/internal/Observable").Observable<UmbBlockDataType[]>;
     readonly settings: import("rxjs/internal/Observable").Observable<UmbBlockDataType[]>;
     setEditorConfiguration(configs: UmbPropertyEditorConfigCollection): void;
+    getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined;
     setBlockTypes(blockTypes: Array<BlockType>): void;
     getBlockTypes(): BlockType[];
     setLayouts(layouts: Array<BlockLayoutType>): void;
@@ -41,13 +42,13 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     settingsOf(udi: string): import("rxjs/internal/Observable").Observable<UmbBlockDataType | undefined>;
     getBlockTypeOf(contentTypeKey: string): BlockType | undefined;
     getContentOf(contentUdi: string): UmbBlockDataType | undefined;
-    setOneLayout(layoutData: BlockLayoutType): void;
+    setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData): void;
     setOneContent(contentData: UmbBlockDataType): void;
     setOneSettings(settingsData: UmbBlockDataType): void;
     removeOneContent(contentUdi: string): void;
     removeOneSettings(settingsUdi: string): void;
     abstract create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>, modalData?: UmbBlockWorkspaceData): UmbBlockDataObjectModel<BlockLayoutType> | undefined;
-    protected createBlockData<ModalDataType extends UmbBlockWorkspaceData>(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>): {
+    protected createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>): {
         layout: BlockLayoutType;
         content: {
             udi: string;

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

@@ -31,6 +31,9 @@ export class UmbBlockManagerContext extends UmbContextBase {
     setEditorConfiguration(configs) {
         this._editorConfiguration.setValue(configs);
     }
+    getEditorConfiguration() {
+        return this._editorConfiguration.getValue();
+    }
     setBlockTypes(blockTypes) {
         this.#blockTypes.setValue(blockTypes);
     }
@@ -124,7 +127,7 @@ export class UmbBlockManagerContext extends UmbContextBase {
     getContentOf(contentUdi) {
         return this.#contents.value.find((x) => x.udi === contentUdi);
     }
-    setOneLayout(layoutData) {
+    setOneLayout(layoutData, modalData) {
         this._layouts.appendOne(layoutData);
     }
     setOneContent(contentData) {

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.js

@@ -6,7 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js';
 import { css, html, customElement, state, repeat, nothing } from '../../../../../external/lit/index.js';
-import { UMB_MODAL_CONTEXT, UmbModalBaseElement, UmbModalRouteRegistrationController, } from '../../../../core/modal/index.js';
+import { UMB_MODAL_CONTEXT, UmbModalBaseElement } from '../../../../core/modal/index.js';
+import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 // TODO: This is across packages, how should we go about getting just a single element from another package? like here we just need the umb-block-type-card element
 import '../../../block-type/index.js';
 let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends UmbModalBaseElement {

package/dist-cms/packages/block/block/types.d.ts

@@ -20,6 +20,7 @@ export interface UmbBlockViewUrlsPropType {
 }
 export interface UmbBlockViewPropsType<BlockLayoutType extends UmbBlockLayoutBaseModel> {
     label?: string;
+    icon?: string;
     contentUdi: string;
     layout?: BlockLayoutType;
     content?: UmbBlockDataType;

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

@@ -53,7 +53,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
                 else {
                     // TODO: Revert the layout, content & settings data to the original state.
                     if (this.#initialLayout) {
-                        this.#blockManager?.setOneLayout(this.#initialLayout);
+                        this.#blockManager?.setOneLayout(this.#initialLayout, this.#modalContext?.data);
                     }
                     if (this.#initialContent) {
                         this.#blockManager?.setOneContent(this.#initialContent);
@@ -183,7 +183,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     #establishLiveSync() {
         this.observe(this.layout, (layoutData) => {
             if (layoutData) {
-                this.#blockManager?.setOneLayout(layoutData);
+                this.#blockManager?.setOneLayout(layoutData, this.#modalContext?.data);
             }
         });
         this.observe(this.content.data, (contentData) => {
@@ -246,7 +246,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             }
             else {
                 // Update data:
-                this.#blockManager.setOneLayout(layoutData);
+                this.#blockManager.setOneLayout(layoutData, this.#modalContext.data);
                 if (contentData) {
                     this.#blockManager.setOneContent(contentData);
                 }

package/dist-cms/packages/block/block-grid/components/block-grid-areas-container/block-grid-areas-container.element.js

@@ -4,7 +4,7 @@ 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_GRID_MANAGER_CONTEXT } from '../../context/block-grid-manager.context.js';
+import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../context/block-grid-manager.context-token.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../index.js';
 import { css, customElement, html, repeat, state } from '../../../../../external/lit/index.js';

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.d.ts

@@ -1,9 +1,10 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import '../block-grid-entry/index.js';
+declare const UmbBlockGridEntriesElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<FormDataEntryValue | FormData | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-block-grid-entries
  */
-export declare class UmbBlockGridEntriesElement extends UmbLitElement {
+export declare class UmbBlockGridEntriesElement extends UmbBlockGridEntriesElement_base {
     #private;
     set areaKey(value: string | null | undefined);
     get areaKey(): string | null | undefined;

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.js

@@ -11,6 +11,7 @@ import { html, customElement, state, repeat, css, property, nothing } from '../.
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import '../block-grid-entry/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UmbFormControlMixin, UmbFormControlValidator, } from '../../../../core/validation/index.js';
 /**
  * Notice this utility method is not really shareable with others as it also takes areas into account. [NL]
  */
@@ -80,12 +81,13 @@ const SORTER_CONFIG = {
 /**
  * @element umb-block-grid-entries
  */
-let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbLitElement {
+let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElement) {
     //
     // TODO: Make sure Sorter callbacks handles columnSpan when retrieving a new entry.
     //
     #sorter;
     #context;
+    #controlValidator;
     set areaKey(value) {
         this._areaKey = value;
         this.#context.setAreaKey(value ?? null);
@@ -132,7 +134,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbLit
             this.#sorter.setModel(layoutEntries);
             this._layoutEntries = layoutEntries;
             //this.requestUpdate('layoutEntries', oldValue);
-        });
+        }, null);
         this.observe(this.#context.amountOfAllowedBlockTypes, (length) => {
             this._canCreate = length > 0;
             if (length === 1) {
@@ -143,7 +145,10 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbLit
             else {
                 this.removeUmbControllerByAlias('observeSingleBlockTypeName');
             }
-        });
+        }, null);
+        this.observe(this.#context.rangeLimits, (rangeLimits) => {
+            this.#setupRangeValidation(rangeLimits);
+        }, null);
         this.#context.getManager().then((manager) => {
             this.observe(manager.layoutStylesheet, (stylesheet) => {
                 if (this._styleElement && this._styleElement.href === stylesheet)
@@ -153,6 +158,33 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbLit
                 this._styleElement.setAttribute('href', stylesheet);
             }, 'observeStylesheet');
         });
+        this.#controlValidator = new UmbFormControlValidator(this, this /*, this.#dataPath*/);
+    }
+    #rangeUnderflowValidator;
+    #rangeOverflowValidator;
+    async #setupRangeValidation(rangeLimit) {
+        if (this.#rangeUnderflowValidator) {
+            this.removeValidator(this.#rangeUnderflowValidator);
+            this.#rangeUnderflowValidator = undefined;
+        }
+        if (rangeLimit?.min !== 0) {
+            this.#rangeUnderflowValidator = this.addValidator('rangeUnderflow', () => {
+                return this.localize.term('validation_entriesShort', rangeLimit.min, (rangeLimit.min ?? 0) - this._layoutEntries.length);
+            }, () => {
+                return this._layoutEntries.length < (rangeLimit?.min ?? 0);
+            });
+        }
+        if (this.#rangeOverflowValidator) {
+            this.removeValidator(this.#rangeOverflowValidator);
+            this.#rangeOverflowValidator = undefined;
+        }
+        if (rangeLimit?.max !== Infinity) {
+            this.#rangeOverflowValidator = this.addValidator('rangeOverflow', () => {
+                return this.localize.term('validation_entriesExceed', rangeLimit.max, this._layoutEntries.length - (rangeLimit.max ?? this._layoutEntries.length));
+            }, () => {
+                return (this._layoutEntries.length ?? 0) > (rangeLimit?.max ?? Infinity);
+            });
+        }
     }
     // TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type. [NL]
     render() {
@@ -166,6 +198,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbLit
 							.layout=${layoutEntry}>
 						</umb-block-grid-entry>`)}
 			</div>
+			<uui-form-validation-message .for=${this}></uui-form-validation-message>
 			${this._canCreate ? this.#renderCreateButton() : nothing}
 		`;
     }

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.d.ts

@@ -24,6 +24,7 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     _createBeforePath?: string;
     _createAfterPath?: string;
     _label: string;
+    _icon?: string;
     _workspaceEditContentPath?: string;
     _workspaceEditSettingsPath?: string;
     _inlineEditingMode?: boolean;

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.js

@@ -91,6 +91,10 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             this.#updateBlockViewProps({ label });
             this._label = label;
         });
+        this.observe(this.#context.contentElementTypeIcon, (icon) => {
+            this.#updateBlockViewProps({ icon });
+            this._icon = icon;
+        });
         this.observe(this.#context.inlineEditingMode, (mode) => {
             this._inlineEditingMode = mode;
         });
@@ -315,6 +319,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_label", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_icon", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_workspaceEditContentPath", void 0);

package/dist-cms/packages/block/block-grid/context/block-grid-entries.context.d.ts

@@ -2,12 +2,14 @@ import type { UmbBlockDataType } from '../../block/index.js';
 import { UmbBlockEntriesContext } from '../../block/index.js';
 import { type UmbBlockGridWorkspaceData } from '../index.js';
 import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js';
-import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from './block-grid-manager.context.js';
+import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from './block-grid-manager.context-token.js';
 import type { UmbBlockGridScalableContainerContext } from './block-grid-scale-manager/block-grid-scale-manager.controller.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbNumberRangeValueType } from '../../../core/models/index.js';
 export declare class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<typeof UMB_BLOCK_GRID_MANAGER_CONTEXT, typeof UMB_BLOCK_GRID_MANAGER_CONTEXT.TYPE, UmbBlockGridTypeModel, UmbBlockGridLayoutModel> implements UmbBlockGridScalableContainerContext {
     #private;
     readonly layoutColumns: import("rxjs/internal/Observable").Observable<number | undefined>;
+    readonly rangeLimits: import("rxjs/internal/Observable").Observable<UmbNumberRangeValueType | undefined>;
     readonly allowedBlockTypes: import("rxjs/internal/Observable").Observable<UmbBlockGridTypeModel[]>;
     readonly amountOfAllowedBlockTypes: import("rxjs/internal/Observable").Observable<number>;
     readonly canCreate: import("rxjs/internal/Observable").Observable<boolean>;