@umbraco-cms/backoffice 16.3.3 → 16.4.0-rc

package/dist-cms/libs/observable-api/utils/replace-in-unique-array.function.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @function replaceInUniqueArray
+ * @param {T[]} data - An array of objects.
+ * @param {T} entry - The object to replace with.
+ * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @description - Replaces an item of an Array.
+ * @example <caption>Example replace an entry of an Array. Where the key is unique and the item will only be replaced if matched with existing.</caption>
+ * const data = [{key: 'myKey', value:'initialValue'}];
+ * const entry = {key: 'myKey', value: 'replacedValue'};
+ * const newDataSet = replaceInUniqueArray(data, entry, x => x.key === key);
+ */
+export declare function replaceInUniqueArray<T>(data: T[], entry: T, getUniqueMethod: (entry: T) => unknown): T[];

package/dist-cms/libs/observable-api/utils/replace-in-unique-array.function.js

@@ -0,0 +1,19 @@
+/**
+ * @function replaceInUniqueArray
+ * @param {T[]} data - An array of objects.
+ * @param {T} entry - The object to replace with.
+ * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @description - Replaces an item of an Array.
+ * @example <caption>Example replace an entry of an Array. Where the key is unique and the item will only be replaced if matched with existing.</caption>
+ * const data = [{key: 'myKey', value:'initialValue'}];
+ * const entry = {key: 'myKey', value: 'replacedValue'};
+ * const newDataSet = replaceInUniqueArray(data, entry, x => x.key === key);
+ */
+export function replaceInUniqueArray(data, entry, getUniqueMethod) {
+    const unique = getUniqueMethod(entry);
+    const indexToReplace = data.findIndex((x) => getUniqueMethod(x) === unique);
+    if (indexToReplace !== -1) {
+        data[indexToReplace] = entry;
+    }
+    return data;
+}

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/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js

@@ -16,13 +16,11 @@ import { UmbLitElement } from '../../../../../core/lit-element/index.js';
  * A specific view for editing content in a block workspace placed inline within a block view/element.
  */
 let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement {
-    //@state()
-    //private _activeTabName?: string | null | undefined;
     #blockWorkspace;
     #tabsStructureHelper;
     constructor() {
         super();
-        //private _hasRootProperties = false;
+        // private _hasRootProperties = false;
         this._hasRootGroups = false;
         this.#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
         this.#tabsStructureHelper.setIsRoot(true);
@@ -49,20 +47,18 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
     #checkDefaultTabName() {
         if (!this._tabs || !this.#blockWorkspace)
             return;
-        // Find the default tab to grab:
+        // Find the default tab to grab
         if (this._activeTabKey === undefined) {
             if (this._hasRootGroups) {
-                //this._activeTabName = null;
                 this._activeTabKey = null;
             }
             else if (this._tabs.length > 0) {
-                //this._activeTabName = this._tabs[0].name;
-                this._activeTabKey = this._tabs[0].key;
+                const tab = this._tabs[0];
+                this._activeTabKey = tab.ownerId ?? tab.ids[0];
             }
         }
     }
-    #setTabName(tabName, tabKey) {
-        //this._activeTabName = tabName;
+    #setTabKey(tabKey) {
         this._activeTabKey = tabKey;
     }
     render() {
@@ -70,22 +66,21 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
             return;
         return html `
 			${this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups)
-            ? html ` <uui-tab-group slot="header">
+            ? html `<uui-tab-group slot="header">
 						${this._hasRootGroups && this._tabs.length > 0
-                ? html `
-									<uui-tab
-										label="Content"
-										.active=${null === this._activeTabKey}
-										@click=${() => this.#setTabName(null, null)}
-										>Content</uui-tab
-									>
-								`
+                ? html `<uui-tab
+									label=${this.localize.term('general_generic')}
+									.active=${this._activeTabKey === null}
+									@click=${() => this.#setTabKey(null)}
+									>Content</uui-tab
+								>`
                 : nothing}
 						${repeat(this._tabs, (tab) => tab.name, (tab) => {
+                const tabKey = tab.ownerId ?? tab.ids[0];
                 return html `<uui-tab
-									label=${tab.name ?? 'Unnamed'}
-									.active=${tab.key === this._activeTabKey}
-									@click=${() => this.#setTabName(tab.name, tab.key)}
+									label=${this.localize.string(tab.name ?? '#general_unnamed')}
+									.active=${this._activeTabKey === tabKey}
+									@click=${() => this.#setTabKey(tabKey)}
 									>${tab.name}</uui-tab
 								>`;
             })}

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/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;

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

@@ -108,7 +108,7 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 		`;
     }
     #renderBlockInfo() {
-        const blockValue = { ...this.content, $settings: this.settings };
+        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
 			<span id="content">
 				<span id="icon">
@@ -292,6 +292,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: false })
 ], UmbBlockGridBlockInlineElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], UmbBlockGridBlockInlineElement.prototype, "index", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbBlockGridBlockInlineElement.prototype, "unpublished", void 0);

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

@@ -254,11 +254,11 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         return html `
 			${this._styleElement}
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
-				${repeat(this._layoutEntries, (x) => x.contentKey, (layoutEntry, index) => html `<umb-block-grid-entry
+				${repeat(this._layoutEntries, (layout, index) => `${index}_${layout.contentKey}`, (layout, index) => html `<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
 							index=${index}
-							.contentKey=${layoutEntry.contentKey}
-							.layout=${layoutEntry}>
+							.contentKey=${layout.contentKey}
+							.layout=${layout}>
 						</umb-block-grid-entry>`)}
 			</div>
 			${this._canCreate ? this.#renderCreateButtonGroup() : nothing}

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

@@ -151,7 +151,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         this.observe(this.#context.blockType, (blockType) => {
             this.#updateBlockViewProps({ blockType });
         }, null);
-        // TODO: Implement index.
+        this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
         this.observe(this.#context.label, (label) => {
             this.#updateBlockViewProps({ label });
             this._label = label;
@@ -307,6 +307,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 			class="umb-block-grid__block--view"
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
@@ -318,6 +319,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 			class="umb-block-grid__block--view"
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}

package/dist-cms/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.js

@@ -30,7 +30,7 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
                 .map((item) => {
                 const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique);
                 if (blockType) {
-                    return { type: blockType, name: item.name };
+                    return { type: blockType, name: item.name, icon: item.icon };
                 }
                 return undefined;
             })
@@ -141,6 +141,7 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
     }
     #renderBlockGroups(area) {
         return repeat(this._blockGroups, (group) => group.key, (group) => html `<uui-combobox-list-option .value=${group.key} ?selected=${area.groupKey === group.key}>
+					<umb-icon name="icon-folder"></umb-icon>
 					${group.name}
 				</uui-combobox-list-option>`);
     }
@@ -148,6 +149,7 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
         return repeat(this._blockTypesWithElementName, (block) => block.type.contentElementTypeKey, (block) => html `<uui-combobox-list-option
 					.value=${block.type.contentElementTypeKey}
 					?selected=${area.elementTypeKey === block.type.contentElementTypeKey}>
+					<umb-icon name=${block.icon}></umb-icon>
 					${block.name}
 				</uui-combobox-list-option>`);
     }
@@ -182,7 +184,14 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
 			}
 
 			uui-combobox strong {
-				padding: 0 var(--uui-size-space-1);
+				padding: var(--uui-size-space-2);
+			}
+
+			uui-combobox-list-option {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+				padding: var(--uui-size-2);
 			}
 		`,
     ]; }

package/dist-cms/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.js

@@ -126,6 +126,12 @@ let UmbPropertyEditorUIBlockGridAreasConfigElement = class UmbPropertyEditorUIBl
     }
     static { this.styles = [
         css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-2);
+			}
+
 			.umb-block-grid__area {
 				cursor: move;
 			}

package/dist-cms/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.js

@@ -116,7 +116,7 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
         const groupName = this.#blockGroups?.find((group) => group.key === groupKey)?.name ?? '';
         await umbConfirmModal(this, {
             headline: '#blockEditor_confirmDeleteBlockGroupTitle',
-            content: this.localize.term('#blockEditor_confirmDeleteBlockGroupMessage', [groupName]),
+            content: this.localize.term('blockEditor_confirmDeleteBlockGroupMessage', [groupName]),
             color: 'danger',
             confirmLabel: '#general_delete',
         });
@@ -155,34 +155,38 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
     }
     #renderGroupInput(groupKey, groupName) {
         return html `<div class="group-handle">
+			<uui-icon name="icon-grip"></uui-icon>
 			<uui-input
-				auto-width
 				label="Group"
 				.value=${groupName ?? ''}
 				@change=${(e) => this.#onGroupNameChange(e, groupKey)}>
-				<uui-button compact slot="append" label="delete" @click=${() => this.#deleteGroup(groupKey)}>
-					<uui-icon name="icon-trash"></uui-icon>
-				</uui-button>
 			</uui-input>
+			<uui-button
+				compact
+				label=${this.localize.term('general_delete')}
+				look="outline"
+				@click=${() => this.#deleteGroup(groupKey)}>
+				<uui-icon name="icon-trash"></uui-icon>
+			</uui-button>
 		</div>`;
     }
     static { this.styles = [
         UmbTextStyles,
         css `
-			uui-input:not(:hover, :focus) {
-				border: 1px solid transparent;
-			}
-			uui-input:not(:hover, :focus) uui-button {
-				opacity: 0;
-			}
-
 			.group-handle {
-				padding: var(--uui-size-1);
+				display: flex;
+				align-items: center;
+				padding: var(--uui-size-3) var(--uui-size-1);
 				margin-top: var(--uui-size-6);
 				margin-bottom: var(--uui-size-4);
+				gap: var(--uui-size-1);
 				cursor: grab;
 			}
 
+			.group-handle:active {
+				cursor: grabbing;
+			}
+
 			.group-handle:hover {
 				background-color: var(--uui-color-divider);
 				border-radius: var(--uui-border-radius);
@@ -191,6 +195,10 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
 			.group:has([drag-placeholder]) {
 				opacity: 0.2;
 			}
+
+			uui-input {
+				flex: 1;
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.js

@@ -14,7 +14,7 @@ let UmbBlockGridTypeWorkspaceViewAreasElement = class UmbBlockGridTypeWorkspaceV
         this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
             this.observe(await context?.propertyValueByAlias('gridColumns'), (value) => {
                 const dataTypeGridColumns = value ? parseInt(value, 10) : 12;
-                this._areaColumnsConfigurationObject = [{ alias: 'placeholder', value: dataTypeGridColumns }];
+                this._areaColumnsConfigurationObject = [{ alias: 'placeholder', value: dataTypeGridColumns }, { alias: 'min', value: 1 }];
                 this._areaConfigConfigurationObject = [{ alias: 'defaultAreaGridColumns', value: dataTypeGridColumns }];
             }, 'observeGridColumns');
         }).passContextAliasMatches();

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

@@ -9,10 +9,10 @@ import '../unsupported-list-block/index.js';
  */
 export declare class UmbBlockListEntryElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
-    get index(): number | undefined;
     set index(value: number | undefined);
-    get contentKey(): string | undefined;
+    get index(): number | undefined;
     set contentKey(value: string | undefined);
+    get contentKey(): string | undefined;
     private _contentKey?;
     private _contentTypeAlias?;
     private _contentTypeName?;

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

@@ -21,15 +21,11 @@ import '../unsupported-list-block/index.js';
  * @element umb-block-list-entry
  */
 let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElement {
-    //
-    get index() {
-        return this.#context.getIndex();
-    }
     set index(value) {
         this.#context.setIndex(value);
     }
-    get contentKey() {
-        return this._contentKey;
+    get index() {
+        return this.#context.getIndex();
     }
     set contentKey(value) {
         if (!value)
@@ -41,6 +37,9 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
             this._blockViewProps.contentInvalid = hasMessages;
         }, 'observeMessagesForContent');
     }
+    get contentKey() {
+        return this._contentKey;
+    }
     #context;
     #updateBlockViewProps(incoming) {
         this._blockViewProps = { ...this._blockViewProps, ...incoming };
@@ -111,7 +110,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         this.observe(this.#context.blockType, (blockType) => {
             this.#updateBlockViewProps({ blockType });
         }, null);
-        // TODO: Implement index.
+        this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
         this.observe(this.#context.label, (label) => {
             this.#updateBlockViewProps({ label });
             this._label = label;
@@ -227,6 +226,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         return html `<umb-ref-list-block
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
@@ -237,6 +237,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         return html `<umb-inline-list-block
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}

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

@@ -8,6 +8,7 @@ export declare class UmbInlineListBlockElement extends UmbLitElement {
     #private;
     label?: string;
     icon?: string;
+    index?: number;
     unpublished?: boolean;
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;

package/dist-cms/packages/block/block-list/components/inline-list-block/inline-list-block.element.js

@@ -97,7 +97,7 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 		`;
     }
     #renderBlockInfo() {
-        const blockValue = { ...this.content, $settings: this.settings };
+        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
 			<span id="content">
 				<span id="icon">
@@ -228,10 +228,6 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 				padding-left: var(--uui-size-2, 6px);
 			}
 
-			#name {
-				font-weight: 700;
-			}
-
 			uui-tag {
 				margin-left: 0.5em;
 				margin-bottom: -0.3em;
@@ -261,6 +257,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: false })
 ], UmbInlineListBlockElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], UmbInlineListBlockElement.prototype, "index", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInlineListBlockElement.prototype, "unpublished", void 0);

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

@@ -5,6 +5,7 @@ import type { UmbBlockEditorCustomViewConfiguration } from '../../../block-custo
 export declare class UmbRefListBlockElement extends UmbLitElement {
     label?: string;
     icon?: string;
+    index?: number;
     unpublished?: boolean;
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;

package/dist-cms/packages/block/block-list/components/ref-list-block/ref-list-block.element.js

@@ -9,7 +9,7 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import '../../../../ufm/index.js';
 let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement {
     render() {
-        const blockValue = { ...this.content, $settings: this.settings };
+        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
 			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
@@ -44,6 +44,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: false })
 ], UmbRefListBlockElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], UmbRefListBlockElement.prototype, "index", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbRefListBlockElement.prototype, "unpublished", void 0);