@umbraco-cms/backoffice 16.3.4 → 17.0.0-rc1

package/dist-cms/external/dompurify/package.json

@@ -6,6 +6,6 @@
         "build": "vite build"
     },
     "dependencies": {
-        "dompurify": "^3.2.5"
+        "dompurify": "^3.2.7"
     }
 }

package/dist-cms/external/lit/package.json

@@ -6,6 +6,6 @@
         "build": "vite build"
     },
     "dependencies": {
-        "lit": "^3.3.0"
+        "lit": "^3.3.1"
     }
 }

package/dist-cms/external/luxon/index.d.ts

@@ -0,0 +1 @@
+export * from 'luxon';

package/dist-cms/external/luxon/index.js

@@ -0,0 +1 @@
+export * from 'luxon';

package/dist-cms/external/luxon/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "@umbraco-backoffice/external-luxon",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "vite build"
+    },
+    "dependencies": {
+        "luxon": "^3.7.2"
+    },
+    "devDependencies": {
+        "@types/luxon": "^3.7.1"
+    }
+}

package/dist-cms/external/luxon/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import { rmSync } from 'fs';
+import { getDefaultConfig } from '../../vite-config-base.js';
+const dist = '../../../dist-cms/external/luxon';
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+export default defineConfig({
+    ...getDefaultConfig({
+        dist,
+        base: '/umbraco/backoffice/external/luxon',
+        entry: {
+            index: './index.ts',
+        },
+    }),
+});

package/dist-cms/external/marked/package.json

@@ -6,6 +6,6 @@
         "build": "vite build"
     },
     "dependencies": {
-        "marked": "^15.0.9"
+        "marked": "^16.3.0"
     }
 }

package/dist-cms/external/monaco-editor/package.json

@@ -6,6 +6,6 @@
         "build": "vite build"
     },
     "dependencies": {
-        "monaco-editor": "^0.52.2"
+        "monaco-editor": "^0.54.0"
     }
 }

package/dist-cms/external/monaco-editor/vite.config.js

@@ -6,7 +6,7 @@ const distAssets = '../../../dist-cms';
 // delete the unbundled dist folder
 rmSync(dist, { recursive: true, force: true });
 // copy fonts
-cpSync('../../../node_modules/monaco-editor/min/vs/base/browser/ui/codicons', `${distAssets}/assets/fonts`, {
+cpSync('../../../node_modules/monaco-editor/esm/vs/base/browser/ui/codicons', `${distAssets}/assets/fonts`, {
     recursive: true,
 });
 export default defineConfig({

package/dist-cms/external/uui/package.json

@@ -6,7 +6,7 @@
         "build": "vite build"
     },
     "dependencies": {
-        "@umbraco-ui/uui": "^1.15.0",
-        "@umbraco-ui/uui-css": "^1.15.0"
+        "@umbraco-ui/uui": "^1.16.0",
+        "@umbraco-ui/uui-css": "^1.16.0"
     }
 }

package/dist-cms/libs/context-api/consume/context-request.event.d.ts

@@ -1,9 +1,4 @@
 export declare const UMB_CONTEXT_REQUEST_EVENT_TYPE = "umb:context-request";
-/**
- * @deprecated use UMB_CONTEXT_REQUEST_EVENT_TYPE
- * This will be removed in Umbraco 17
- */
-export declare const UMB_CONTENT_REQUEST_EVENT_TYPE = "umb:context-request";
 export declare const UMB_DEBUG_CONTEXT_EVENT_TYPE = "umb:debug-contexts";
 export type UmbContextCallback<T> = (instance: T | undefined) => void;
 /**

package/dist-cms/libs/context-api/consume/context-request.event.js

@@ -1,9 +1,4 @@
 export const UMB_CONTEXT_REQUEST_EVENT_TYPE = 'umb:context-request';
-/**
- * @deprecated use UMB_CONTEXT_REQUEST_EVENT_TYPE
- * This will be removed in Umbraco 17
- */
-export const UMB_CONTENT_REQUEST_EVENT_TYPE = UMB_CONTEXT_REQUEST_EVENT_TYPE;
 export const UMB_DEBUG_CONTEXT_EVENT_TYPE = 'umb:debug-contexts';
 /**
  * @class UmbContextRequestEventImplementation

package/dist-cms/libs/context-api/provide/context-boundary.js

@@ -36,7 +36,6 @@ export class UmbContextBoundary {
      * @memberof UmbContextBoundary
      */
     hostConnected() {
-        //this.hostElement.addEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, this.#handleContextRequest);
         this.#eventTarget.dispatchEvent(new UmbContextProvideEventImplementation(this.#contextAlias));
     }
     /**

package/dist-cms/libs/extension-api/functions/create-extension-api.function.d.ts

@@ -1,11 +1,13 @@
-import type { UmbApi } from '../models/api.interface.js';
+import type { ApiLoaderProperty } from '../types/utils.js';
 import type { ManifestApi, ManifestElementAndApi } from '../types/base.types.js';
+import type { UmbApi } from '../models/api.interface.js';
 import type { UmbApiConstructorArgumentsMethodType } from './types.js';
 import type { UmbControllerHost } from '../../controller-api/index.js';
 /**
  * @param {UmbControllerHost} host - The controller host for this controller to be appended to
  * @param {ManifestApi} manifest - The manifest of the extension
  * @param {Array | UmbApiConstructorArgumentsMethodType} constructorArgs - The constructor arguments to pass to the API class
+ * @param {ApiLoaderProperty} fallbackApi - A fallback API loader property to use if the manifest does not have one
  * @returns {Promise<UmbApi | undefined>} - The API class instance
  */
-export declare function createExtensionApi<ApiType extends UmbApi = UmbApi>(host: UmbControllerHost, manifest: ManifestApi<ApiType> | ManifestElementAndApi<any, ApiType>, constructorArgs?: Array<unknown> | UmbApiConstructorArgumentsMethodType<ManifestApi<ApiType> | ManifestElementAndApi<any, ApiType>>): Promise<ApiType | undefined>;
+export declare function createExtensionApi<ApiType extends UmbApi = UmbApi>(host: UmbControllerHost, manifest: ManifestApi<ApiType> | ManifestElementAndApi<any, ApiType>, constructorArgs?: Array<unknown> | UmbApiConstructorArgumentsMethodType<ManifestApi<ApiType> | ManifestElementAndApi<any, ApiType>>, fallbackApi?: ApiLoaderProperty<ApiType>): Promise<ApiType | undefined>;

package/dist-cms/libs/extension-api/functions/create-extension-api.function.js

@@ -3,29 +3,20 @@ import { loadManifestApi } from './load-manifest-api.function.js';
  * @param {UmbControllerHost} host - The controller host for this controller to be appended to
  * @param {ManifestApi} manifest - The manifest of the extension
  * @param {Array | UmbApiConstructorArgumentsMethodType} constructorArgs - The constructor arguments to pass to the API class
+ * @param {ApiLoaderProperty} fallbackApi - A fallback API loader property to use if the manifest does not have one
  * @returns {Promise<UmbApi | undefined>} - The API class instance
  */
-export async function createExtensionApi(host, manifest, constructorArgs) {
-    if (manifest.api) {
-        const apiConstructor = await loadManifestApi(manifest.api);
-        if (apiConstructor) {
-            const additionalArgs = (typeof constructorArgs === 'function' ? constructorArgs(manifest) : constructorArgs) ?? [];
-            return new apiConstructor(host, ...additionalArgs);
-        }
-        else {
-            console.error(`-- Extension of alias "${manifest.alias}" did not succeed instantiate a API class via the extension manifest property 'api', using either a 'api' or 'default' export`, manifest);
-        }
+export async function createExtensionApi(host, manifest, constructorArgs, fallbackApi) {
+    const apiPropValue = manifest.api ?? manifest.js ?? fallbackApi;
+    if (!apiPropValue) {
+        console.error(`-- Extension of alias "${manifest.alias}" did not succeed creating an API class instance, missing a JavaScript file via the 'api' or 'js' property, using either an 'api' or 'default' export.`, manifest);
+        return undefined;
     }
-    if (manifest.js) {
-        const apiConstructor2 = await loadManifestApi(manifest.js);
-        if (apiConstructor2) {
-            const additionalArgs = (typeof constructorArgs === 'function' ? constructorArgs(manifest) : constructorArgs) ?? [];
-            return new apiConstructor2(host, ...additionalArgs);
-        }
-        else {
-            console.error(`-- Extension of alias "${manifest.alias}" did not succeed instantiate a API class via the extension manifest property 'js', using either a 'api' or 'default' export`, manifest);
-        }
+    const apiConstructor = await loadManifestApi(apiPropValue);
+    if (apiConstructor) {
+        const additionalArgs = (typeof constructorArgs === 'function' ? constructorArgs(manifest) : constructorArgs) ?? [];
+        return new apiConstructor(host, ...additionalArgs);
     }
-    console.error(`-- Extension of alias "${manifest.alias}" did not succeed creating an api class instance, missing a JavaScript file via the 'api' or 'js' property.`, manifest);
+    console.error(`-- Extension of alias "${manifest.alias}" did not succeed instantiating an API class instance via the extension manifest 'api' or 'js' property, using either an 'api' or 'default' export.`, manifest);
     return undefined;
 }

package/dist-cms/libs/localization-api/localization.controller.d.ts

@@ -43,6 +43,15 @@ export declare class UmbLocalizationController<LocalizationSetType extends UmbLo
      * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.
      * @param {...any} args - the arguments to parse for this localization entry.
      * @returns {string} - the translated term as a string.
+     * @example
+     * Retrieving a term without any arguments:
+     * ```ts
+     * this.localize.term('area_term');
+     * ```
+     * Retrieving a term with arguments:
+     * ```ts
+     * this.localize.term('general_greeting', ['John']);
+     * ```
      */
     term<K extends keyof LocalizationSetType>(key: K, ...args: FunctionParams<LocalizationSetType[K]>): string;
     /**
@@ -89,9 +98,9 @@ export declare class UmbLocalizationController<LocalizationSetType extends UmbLo
      * Translates a string containing one or more terms. The terms should be prefixed with a `#` character.
      * If the term is found in the localization set, it will be replaced with the localized term.
      * If the term is not found, the original term will be returned.
-     * @param {string | null | undefined} text The text to translate.
+     * @param {string | undefined} text The text to translate.
      * @param {...any} args The arguments to parse for this localization entry.
      * @returns {string} The translated text.
      */
-    string(text: string | null | undefined, ...args: any): string;
+    string(text: string | undefined, ...args: any): string;
 }

package/dist-cms/libs/localization-api/localization.controller.js

@@ -79,6 +79,15 @@ export class UmbLocalizationController {
      * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.
      * @param {...any} args - the arguments to parse for this localization entry.
      * @returns {string} - the translated term as a string.
+     * @example
+     * Retrieving a term without any arguments:
+     * ```ts
+     * this.localize.term('area_term');
+     * ```
+     * Retrieving a term with arguments:
+     * ```ts
+     * this.localize.term('general_greeting', ['John']);
+     * ```
      */
     term(key, ...args) {
         if (!this.#usedKeys.includes(key)) {
@@ -191,12 +200,11 @@ export class UmbLocalizationController {
     list(values, options) {
         return new Intl.ListFormat(this.lang(), options).format(values);
     }
-    // TODO: for V.16 we should set type to be string | undefined. [NL]
     /**
      * Translates a string containing one or more terms. The terms should be prefixed with a `#` character.
      * If the term is found in the localization set, it will be replaced with the localized term.
      * If the term is not found, the original term will be returned.
-     * @param {string | null | undefined} text The text to translate.
+     * @param {string | undefined} text The text to translate.
      * @param {...any} args The arguments to parse for this localization entry.
      * @returns {string} The translated text.
      */

package/dist-cms/libs/observable-api/states/array-state.d.ts

@@ -192,5 +192,22 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
      * myState.updateOne(2, {value: 'updated-bar'});
      */
     updateOne(unique: U, entry: Partial<T>): this;
+    /**
+     * @function prepend
+     * @param {T[]} entries - A array of new data to be added in this Subject.
+     * @returns {UmbArrayState<T>} Reference to it self.
+     * @description - Prepend some new data to this Subject, if it compares to existing data it will replace it.
+     * @example <caption>Example prepend some data.</caption>
+     * const data = [
+     * 	{ key: 1, value: 'foo'},
+     * 	{ key: 2, value: 'bar'}
+     * ];
+     * const myState = new UmbArrayState(data);
+     * myState.prepend([
+     * 	{ key: 0, value: 'another-bla'},
+     * 	{ key: 1, value: 'replaced-foo'},
+     * ]);
+     */
+    prepend(entries: T[]): this;
     destroy(): void;
 }

package/dist-cms/libs/observable-api/states/array-state.js

@@ -1,4 +1,5 @@
 import { partialUpdateFrozenArray } from '../utils/partial-update-frozen-array.function.js';
+import { prependToUniqueArray } from '../utils/prepend-to-unique-array.function.js';
 import { pushAtToUniqueArray } from '../utils/push-at-to-unique-array.function.js';
 import { pushToUniqueArray } from '../utils/push-to-unique-array.function.js';
 import { replaceInUniqueArray } from '../utils/replace-in-unique-array.function.js';
@@ -308,6 +309,35 @@ export class UmbArrayState extends UmbDeepState {
         this.setValue(partialUpdateFrozenArray(this.getValue(), entry, (x) => unique === this.getUniqueMethod(x)));
         return this;
     }
+    /**
+     * @function prepend
+     * @param {T[]} entries - A array of new data to be added in this Subject.
+     * @returns {UmbArrayState<T>} Reference to it self.
+     * @description - Prepend some new data to this Subject, if it compares to existing data it will replace it.
+     * @example <caption>Example prepend some data.</caption>
+     * const data = [
+     * 	{ key: 1, value: 'foo'},
+     * 	{ key: 2, value: 'bar'}
+     * ];
+     * const myState = new UmbArrayState(data);
+     * myState.prepend([
+     * 	{ key: 0, value: 'another-bla'},
+     * 	{ key: 1, value: 'replaced-foo'},
+     * ]);
+     */
+    prepend(entries) {
+        if (this.getUniqueMethod) {
+            const next = [...this.getValue()];
+            entries.forEach((entry) => {
+                prependToUniqueArray(next, entry, this.getUniqueMethod);
+            });
+            this.setValue(next);
+        }
+        else {
+            this.setValue([...entries, ...this.getValue()]);
+        }
+        return this;
+    }
     destroy() {
         super.destroy();
         this.#sortMethod = undefined;

package/dist-cms/libs/observable-api/utils/prepend-to-unique-array.function.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @function prependToUniqueArray
+ * @param {T[]} data - An array of objects.
+ * @param {T} entry - The object to insert or replace with.
+ * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @description - Prepend or replaces an item of an Array.
+ * @returns {T[]} - The new array with the entry prepended or replaced.
+ * @example <caption>Example prepend new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>
+ * const entry = {key: 'myKey', value: 'myValue'};
+ * const newDataSet = prependToUniqueArray([], entry, x => x.key === key);
+ * myState.setValue(newDataSet);
+ */
+export declare function prependToUniqueArray<T>(data: T[], entry: T, getUniqueMethod: (entry: T) => unknown): T[];

package/dist-cms/libs/observable-api/utils/prepend-to-unique-array.function.js

@@ -0,0 +1,23 @@
+/**
+ * @function prependToUniqueArray
+ * @param {T[]} data - An array of objects.
+ * @param {T} entry - The object to insert or replace with.
+ * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @description - Prepend or replaces an item of an Array.
+ * @returns {T[]} - The new array with the entry prepended or replaced.
+ * @example <caption>Example prepend new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>
+ * const entry = {key: 'myKey', value: 'myValue'};
+ * const newDataSet = prependToUniqueArray([], entry, x => x.key === key);
+ * myState.setValue(newDataSet);
+ */
+export function prependToUniqueArray(data, entry, getUniqueMethod) {
+    const unique = getUniqueMethod(entry);
+    const indexToReplace = data.findIndex((x) => getUniqueMethod(x) === unique);
+    if (indexToReplace !== -1) {
+        data[indexToReplace] = entry;
+    }
+    else {
+        data.unshift(entry);
+    }
+    return data;
+}

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

@@ -107,13 +107,6 @@ export declare abstract class UmbBlockManagerContext<BlockType extends UmbBlockT
     setOneSettingsProperty(key: string, propertyAlias: string, value: unknown): void;
     contentProperty(key: string, propertyAlias: string): void;
     settingsProperty(key: string, propertyAlias: string): void;
-    /**
-     * @deprecated Use `createWithPresets` instead. Which is Async. Will be removed in v.17
-     * @param contentElementTypeKey
-     * @param partialLayoutEntry
-     * @param originData
-     */
-    abstract create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, originData?: BlockOriginDataType): never;
     abstract createWithPresets(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, originData?: BlockOriginDataType): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;
     createBlockSettingsData(contentElementTypeKey: string): Promise<{
         key: string;

package/dist-cms/packages/block/block/validation/index.d.ts

@@ -1,4 +1,2 @@
-export * from './block-element-values-validation-path-translator.controller.js';
-export * from './block-element-data-validation-path-translator.controller.js';
 export * from './data-path-element-data-query.function.js';
 export * from './block-editor-validation-property-path-translator-base.api.js';

package/dist-cms/packages/block/block/validation/index.js

@@ -1,4 +1,2 @@
-export * from './block-element-values-validation-path-translator.controller.js';
-export * from './block-element-data-validation-path-translator.controller.js';
 export * from './data-path-element-data-query.function.js';
 export * from './block-editor-validation-property-path-translator-base.api.js';

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

@@ -15,10 +15,7 @@ let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extend
         this._headline = '';
         this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (context) => {
             if (context) {
-                this.observe(observeMultiple([
-                    context.isNew,
-                    context.content.structure.ownerContentTypeObservablePart((contentType) => contentType?.name),
-                ]), ([isNew, name]) => {
+                this.observe(observeMultiple([context.isNew, context.name]), ([isNew, name]) => {
                     this._headline =
                         this.localize.term(isNew ? 'general_add' : 'general_edit') + ' ' + this.localize.string(name);
                 }, 'observeOwnerContentElementTypeName');

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

@@ -1,4 +1,4 @@
-import { UMB_BLOCK_ENTRIES_CONTEXT, UMB_BLOCK_ENTRY_CONTEXT, UMB_BLOCK_MANAGER_CONTEXT } from '../context/index.js';
+import { UMB_BLOCK_ENTRIES_CONTEXT, UMB_BLOCK_MANAGER_CONTEXT } from '../context/index.js';
 import { UmbBlockWorkspaceEditorElement } from './block-workspace-editor.element.js';
 import { UmbBlockElementManager } from './block-element-manager.js';
 import { UMB_BLOCK_WORKSPACE_VIEW_CONTENT, UMB_BLOCK_WORKSPACE_VIEW_SETTINGS } from './constants.js';
@@ -7,6 +7,7 @@ import { UmbBooleanState, UmbClassState, UmbObjectState, UmbStringState, observe
 import { UMB_DISCARD_CHANGES_MODAL, UMB_MODAL_CONTEXT, UMB_MODAL_MANAGER_CONTEXT } from '../../../core/modal/index.js';
 import { decodeFilePath, UmbReadOnlyVariantGuardManager } from '../../../core/utils/index.js';
 import { UmbVariantId } from '../../../core/variant/index.js';
+import { UmbUfmVirtualRenderController } from '../../../ufm/index.js';
 export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase {
     //
     #blockManager;
@@ -27,6 +28,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
     #initialSettings;
     #layout;
     #name;
+    #labelRender;
     #variantId;
     #exposed;
     constructor(host, workspaceArgs) {
@@ -41,6 +43,7 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         this.settings = new UmbBlockElementManager(this, 'settingsData', UMB_BLOCK_WORKSPACE_VIEW_SETTINGS);
         this.#name = new UmbStringState(undefined);
         this.name = this.#name.asObservable();
+        this.#labelRender = new UmbUfmVirtualRenderController(this);
         this.#variantId = new UmbClassState(undefined);
         this.variantId = this.#variantId.asObservable();
         this.#exposed = new UmbBooleanState(undefined);
@@ -120,13 +123,13 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
             this.#blockEntries = context;
         }).asPromise({ preventTimeout: true });
-        this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
-            this.#name.setValue(context?.getName());
-        });
         this.observe(this.variantId, (variantId) => {
             this.content.setVariantId(variantId);
             this.settings.setVariantId(variantId);
-        });
+        }, null);
+        this.observe(observeMultiple([this.content.values, this.settings.values]), async ([contentValues]) => {
+            this.#renderLabel(contentValues);
+        }, 'observeContentForLabelRender');
         this.routes.setRoutes([
             {
                 path: 'create/:elementTypeKey',
@@ -196,17 +199,39 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             }
         }, 'observeIsReadOnly');
         this.observe(this.content.contentTypeId, (contentTypeId) => {
-            this.observe(contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined, (blockType) => {
-                if (!blockType?.editorSize)
-                    return;
-                const editorConfig = manager.getEditorConfiguration();
-                const useInlineEditing = editorConfig?.find((x) => x.alias === 'useInlineEditingAsDefault')?.value;
-                if (!useInlineEditing) {
-                    this.setEditorSize(blockType.editorSize);
+            this.observe(contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined, async (blockType) => {
+                if (blockType?.editorSize) {
+                    const editorConfig = manager.getEditorConfiguration();
+                    const useInlineEditing = editorConfig?.find((x) => x.alias === 'useInlineEditingAsDefault')?.value;
+                    if (!useInlineEditing) {
+                        this.setEditorSize(blockType.editorSize);
+                    }
                 }
+                await this.content.structure.whenLoaded();
+                this.#gotLabel(blockType?.label ?? this.content.structure.getOwnerContentTypeName());
             }, 'observeBlockType');
         }, 'observeContentTypeId');
     }
+    #gotLabel(label) {
+        if (label) {
+            this.#labelRender.markdown = label;
+            this.#renderLabel(this.content.getValues());
+        }
+    }
+    async #renderLabel(contentValues) {
+        const valueObject = {};
+        if (contentValues) {
+            for (const property of contentValues) {
+                valueObject[property.alias] = property.value;
+            }
+        }
+        this.#labelRender.value = valueObject;
+        // Await one animation frame:
+        await new Promise((resolve) => requestAnimationFrame(() => resolve(true)));
+        const result = this.#labelRender.toString();
+        this.#name.setValue(result);
+        this.view.setTitle(result);
+    }
     #allowNavigateAway;
     #onWillNavigate;
     /**

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

@@ -26,10 +26,8 @@ export declare class UmbBlockGridManagerContext<BlockLayoutType extends UmbBlock
     /**
      * @param contentElementTypeKey
      * @param partialLayoutEntry
-     * @param _originData
-     * @deprecated Use createWithPresets instead. Will be removed in v.17.
+     * @param originData
      */
-    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, _originData?: UmbBlockGridWorkspaceOriginData): never;
     createWithPresets(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, originData?: UmbBlockGridWorkspaceOriginData): Promise<{
         layout: UmbBlockGridLayoutModel;
         content: {

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

@@ -70,19 +70,8 @@ export class UmbBlockGridManagerContext extends UmbBlockManagerContext {
     /**
      * @param contentElementTypeKey
      * @param partialLayoutEntry
-     * @param _originData
-     * @deprecated Use createWithPresets instead. Will be removed in v.17.
+     * @param originData
      */
-    create(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    contentElementTypeKey, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    partialLayoutEntry, 
-    // This property is used by some implementations, but not used in this. Do not remove. [NL]
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _originData) {
-        throw new Error('Method deparecated use createWithPresets');
-    }
     async createWithPresets(contentElementTypeKey, partialLayoutEntry, 
     // This property is used by some implementations, but not used in this.
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -50,7 +50,7 @@ let UmbBlockGridAreaConfigEntryElement = class UmbBlockGridAreaConfigEntryElemen
     #renderBlock() {
         return this._key
             ? html `
-					<span>${this._alias}</span>
+					<span class="alias">${this._alias}</span>
 					<uui-action-bar>
 						<uui-button label="edit" compact href=${this.workspacePath + 'edit/' + this._key}>
 							<uui-icon name="icon-edit"></uui-icon>
@@ -85,14 +85,18 @@ let UmbBlockGridAreaConfigEntryElement = class UmbBlockGridAreaConfigEntryElemen
 				background-color: var(--uui-color-disabled-standalone);
 			}
 
+			:host([drag-placeholder]) {
+				opacity: 0.2;
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);
 				right: var(--uui-size-2);
 			}
 
-			:host([drag-placeholder]) {
-				opacity: 0.2;
+			.alias {
+				padding: var(--uui-size-space-4);
 			}
 		`,
     ]; }

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

@@ -99,10 +99,8 @@ export class UmbBlockGridAreaTypeWorkspaceContext extends UmbSubmittableWorkspac
     getName() {
         return this.#data.getValue()?.alias;
     }
-    // TODO: [v15] ignoring unused name parameter to avoid breaking changes
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setName(name) {
-        throw new Error('You cannot set a name of a area-type.');
+        throw new Error(`You cannot set a name of an area-type to "${name}".`);
     }
     /**
      * @function propertyValueByAlias

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

@@ -42,7 +42,7 @@ let UmbBlockGridAreaTypeWorkspaceViewSettingsElement = class UmbBlockGridAreaTyp
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
 			</uui-box>
 			<uui-box headline=${'Validation'}>
-				<umb-property-layout label=${'rangeAllowed'}>
+				<umb-property-layout label=${this.localize.term('blockEditor_rangeAllowed')}>
 					<umb-input-number-range
 						slot="editor"
 						.minValue=${this._minValue}
@@ -52,7 +52,7 @@ let UmbBlockGridAreaTypeWorkspaceViewSettingsElement = class UmbBlockGridAreaTyp
 				</umb-property-layout>
 
 				<umb-property
-					label=${'specifiedAllowance'}
+					label=${this.localize.term('blockEditor_specifiedAllowance')}
 					alias="specifiedAllowance"
 					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreaTypePermission"></umb-property>
 			</uui-box>

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

@@ -5,6 +5,7 @@ import '../../../../ufm/index.js';
 export declare class UmbBlockGridBlockElement extends UmbLitElement {
     label?: string;
     icon?: string;
+    index?: number;
     config?: UmbBlockEditorCustomViewConfiguration;
     unpublished?: boolean;
     content?: UmbBlockDataType;

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

@@ -9,7 +9,7 @@ import { css, customElement, html, property, when } from '../../../../../externa
 import '../../../../ufm/index.js';
 let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElement {
     render() {
-        const blockValue = { ...this.content, $settings: this.settings };
+        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
 			<umb-ref-grid-block
 				standalone
@@ -51,6 +51,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: false })
 ], UmbBlockGridBlockElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], UmbBlockGridBlockElement.prototype, "index", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbBlockGridBlockElement.prototype, "config", void 0);

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

@@ -6,6 +6,7 @@ export declare class UmbBlockGridBlockInlineElement extends UmbLitElement {
     config?: UmbBlockEditorCustomViewConfiguration;
     label?: string;
     icon?: string;
+    index?: number;
     unpublished?: boolean;
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;