@umbraco-cms/backoffice 18.3.0-rc2 → 19.0.0-beta1

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

@@ -8,9 +8,9 @@ import { UmbBlockListEntryContext } from '../../context/block-list-entry.context
 import { UMB_BLOCK_LIST } from '../../constants.js';
 import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
 import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
-import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
+import { stringOrStringArrayContains, UmbDeprecation } from '../../../../core/utils/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
-import { renderHiddenUfm } from '../../../../ufm/index.js';
+import { renderHiddenUfm, renderUfm } from '../../../../ufm/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../external/uui/index.js';
 import '../ref-list-block/index.js';
@@ -27,10 +27,44 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
     get index() {
         return this.#context.getIndex();
     }
+    /**
+     * Set the layout entry for this block.
+     */
+    set layout(value) {
+        if (!value)
+            return;
+        const key = value.key;
+        const contentKey = value.contentKey;
+        if (key && key !== this._key) {
+            this._key = key;
+            this.#context.setKey(key);
+        }
+        if (contentKey && contentKey !== this._contentKey) {
+            this._contentKey = contentKey;
+            new UmbObserveValidationStateController(this, `$.contentData[${UmbDataPathBlockElementDataQuery({ key: contentKey })}]`, (hasMessages) => {
+                this._contentInvalid = hasMessages;
+                this._blockViewProps.contentInvalid = hasMessages;
+            }, 'observeMessagesForContent');
+        }
+    }
+    get key() {
+        return this._key;
+    }
+    /**
+     * @deprecated Use the `layout` property instead. Will be removed in Umbraco 20.
+     */
     set contentKey(value) {
         if (!value)
             return;
+        new UmbDeprecation({
+            deprecated: 'umb-block-list-entry.contentKey property',
+            solution: 'Use the `layout` property instead.',
+            removeInVersion: '20.0.0',
+        }).warn();
         this._contentKey = value;
+        if (!this._key) {
+            this.#context.setKey(value);
+        }
         this.#context.setContentKey(value);
         new UmbObserveValidationStateController(this, `$.contentData[${UmbDataPathBlockElementDataQuery({ key: value })}]`, (hasMessages) => {
             this._contentInvalid = hasMessages;
@@ -41,10 +75,6 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         return this._contentKey;
     }
     #context;
-    #updateBlockViewProps(incoming) {
-        this._blockViewProps = { ...this._blockViewProps, ...incoming };
-        this.requestUpdate('_blockViewProps');
-    }
     constructor() {
         super();
         this.#context = new UmbBlockListEntryContext(this);
@@ -54,11 +84,14 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
             contentKey: undefined,
             config: { showContentEdit: false, showSettingsEdit: false },
         }; // Set to undefined cause it will be set before we render.
+        this._isExternalContent = false;
         this._isReadOnly = false;
         this.#expose = () => {
             this.#context.expose();
         };
         this.#onUfmResolved = (event) => {
+            if (this._externalContentName)
+                return;
             this.#context.setName(event.detail.text);
         };
         this.#extensionSlotFilterMethod = (manifest) => {
@@ -111,16 +144,16 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         }, null);
         this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
         this.observe(this.#context.label, (label) => {
-            this.#updateBlockViewProps({ label });
             this._label = label;
+            this.#updateBlockLabel();
         }, null);
         this.observe(this.#context.contentElementTypeIcon, (icon) => {
             this.#updateBlockViewProps({ icon });
             this._icon = icon;
         }, null);
-        this.observe(this.#context.hasExpose, (exposed) => {
-            this.#updateBlockViewProps({ unpublished: !exposed });
-            this._exposed = exposed;
+        this.observe(this.#context.isExposed, (isExposed) => {
+            this.#updateBlockViewProps({ unpublished: !isExposed });
+            this._exposed = isExposed;
         }, null);
         this.observe(this.#context.unsupported, (unsupported) => {
             if (unsupported === undefined)
@@ -133,6 +166,10 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
         this.observe(this.#context.isSortMode, (isSortMode) => (this._isSortMode = isSortMode), null);
         this.observe(this.#context.name, (name) => (this._name = name), null);
+        this.observe(this.#context.isExternalContent, (isExternalContent) => {
+            this._isExternalContent = isExternalContent;
+        }, null);
+        this.#observeExternalContentName();
         // Data props:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -167,6 +204,23 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
             this.#updateBlockViewProps({ settings });
         }, null);
     }
+    #updateBlockViewProps(incoming) {
+        this._blockViewProps = { ...this._blockViewProps, ...incoming };
+        this.requestUpdate('_blockViewProps');
+    }
+    #updateBlockLabel() {
+        this.#updateBlockViewProps({ label: this._externalContentName ?? this._label });
+    }
+    #observeExternalContentName() {
+        this.observe(this.#context.externalContentName, (name) => {
+            this._externalContentName = name;
+            // The Element's name is its identity, so it takes over as the block's name/label instead of the block type's UFM label template.
+            if (name) {
+                this.#context.setName(name);
+            }
+            this.#updateBlockLabel();
+        }, null);
+    }
     connectedCallback() {
         super.connectedCallback();
         // element styling:
@@ -197,17 +251,14 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         };
     }
     #renderUfm() {
-        return html `
-			<umb-ufm-render
-				slot="name"
-				inline
-				.markdown=${this._label}
-				.value=${this.#blockValue}
-				@umb-ufm-resolved=${this.#onUfmResolved}>
-			</umb-ufm-render>
-		`;
+        if (this._externalContentName) {
+            return html `<span slot="name">${this._externalContentName}</span>`;
+        }
+        return renderUfm(this._label, this.#blockValue, this.#onUfmResolved, 'name');
     }
     #renderHiddenUfm() {
+        if (this._externalContentName)
+            return nothing;
         return renderHiddenUfm(this._label, this.#blockValue, this.#onUfmResolved);
     }
     #renderRefBlock() {
@@ -246,7 +297,8 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 				.config=${this._blockViewProps.config}
 				.content=${this._blockViewProps.content}
 				.settings=${this._blockViewProps.settings}
-				${umbDestroyOnDisconnect()}></umb-unsupported-list-block>
+				${umbDestroyOnDisconnect()}>
+			</umb-unsupported-list-block>
 		`;
     }
     #renderBuiltinBlockView;
@@ -254,6 +306,9 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
         return when(this.contentKey && (this._contentTypeAlias || this._unsupported), () => html `
 				<div class="umb-block-list__block">
 					${when(this._isSortMode, () => this.#renderRefBlock(), () => html `
+							<umb-entity-frame>
+								${when(this._isExternalContent, () => html `<uui-icon name="link"></uui-icon>`)} ${this._name}
+							</umb-entity-frame>
 							<umb-extension-slot
 								single
 								type="blockEditorCustomView"
@@ -264,9 +319,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 							</umb-extension-slot>
 						`)}
 					${this.#renderActionBar()}
-					${!this._showContentEdit && this._contentInvalid
-            ? html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-            : nothing}
+					${when(!this._showContentEdit && this._contentInvalid, () => html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`)}
 				</div>
 			`);
     }
@@ -275,7 +328,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
             return nothing;
         if (!this._showActions)
             return nothing;
-        return html `<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_LIST}></umb-block-action-list>`;
+        return html `<umb-block-action-list id="actions" .blockEditor=${UMB_BLOCK_LIST}></umb-block-action-list>`;
     }
     render() {
         return this.#renderBlock();
@@ -369,6 +422,21 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 				transition: opacity 50ms 16ms;
 				opacity: 0;
 			}
+
+			:host([is-reference]) .umb-block-list__block {
+				--umb-entity-frame-color: var(--umb-color-reference);
+				--umb-entity-frame-contrast-color: var(--umb-color-reference-contrast);
+			}
+
+			.umb-block-list__block {
+				--umb-entity-frame-opacity: 0;
+				--umb-entity-frame-color: var(--uui-color-interactive-emphasis);
+
+				&:hover,
+				&:focus-within {
+					--umb-entity-frame-opacity: 1;
+				}
+			}
 		`,
     ]; }
 };
@@ -408,6 +476,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockListEntryElement.prototype, "_isSortMode", void 0);
+__decorate([
+    state()
+], UmbBlockListEntryElement.prototype, "_name", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'content-invalid', reflect: true })
 ], UmbBlockListEntryElement.prototype, "_contentInvalid", void 0);
@@ -417,9 +488,15 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockListEntryElement.prototype, "_blockViewProps", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-reference', reflect: true })
+], UmbBlockListEntryElement.prototype, "_isExternalContent", void 0);
 __decorate([
     state()
 ], UmbBlockListEntryElement.prototype, "_isReadOnly", void 0);
+__decorate([
+    state()
+], UmbBlockListEntryElement.prototype, "_externalContentName", void 0);
 UmbBlockListEntryElement = __decorate([
     customElement('umb-block-list-entry')
 ], UmbBlockListEntryElement);

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

@@ -1,18 +1,14 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbBlockDataType } from '../../../block/index.js';
+import '../../../block/components/block-state-tag/block-state-tag.element.js';
 import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
+declare const UmbInlineListBlockElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../block/index.js").UmbBlockRefNameSlotElement> & typeof UmbLitElement;
 /**
  * @element umb-inline-list-block
  * @slot name - Content rendered as the block's primary label. The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
  */
-export declare class UmbInlineListBlockElement extends UmbLitElement {
+export declare class UmbInlineListBlockElement extends UmbInlineListBlockElement_base {
     #private;
-    /**
-     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
-     */
-    set label(value: string | undefined);
-    get label(): string | undefined;
-    private _label?;
     icon?: string;
     index?: number;
     unpublished?: boolean;
@@ -23,10 +19,9 @@ export declare class UmbInlineListBlockElement extends UmbLitElement {
     private _isOpen;
     private _ownerContentTypeName?;
     private _variantName?;
-    private _hasNameSlotContent;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
 }
 export default UmbInlineListBlockElement;
 declare global {

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

@@ -5,56 +5,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/index.js';
-import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
-import { UmbBlockInsertedEvent, UMB_BLOCK_MANAGER_CONTEXT, UMB_BLOCK_WORKSPACE_ALIAS, } from '../../../block/index.js';
+import { css, customElement, html, property, state, when } from '../../../../../external/lit/index.js';
+import { UmbBlockInsertedEvent, UmbBlockRefNameSlotMixin, UMB_BLOCK_MANAGER_CONTEXT, UMB_BLOCK_WORKSPACE_ALIAS, } from '../../../block/index.js';
 import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
 import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '../../../../../libs/extension-api/index.js';
-import { UmbDeprecation } from '../../../../core/utils/index.js';
 import { UmbLanguageItemRepository } from '../../../../language/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbContextBoundary } from '../../../../../libs/context-api/index.js';
 import { UMB_VIEW_CONTEXT } from '../../../../core/view/index.js';
+import '../../../block/components/block-state-tag/block-state-tag.element.js';
 import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
 const apiArgsCreator = (manifest) => {
     return [{ manifest }];
 };
-let hasWarnedLabelDeprecation = false;
 /**
  * @element umb-inline-list-block
  * @slot name - Content rendered as the block's primary label. The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
  */
-let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitElement {
+let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbBlockRefNameSlotMixin(UmbLitElement) {
     #manager;
     #blockContext;
     #contentKey;
-    /**
-     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
-     */
-    set label(value) {
-        if (value !== undefined && value !== this._label) {
-            if (!hasWarnedLabelDeprecation) {
-                hasWarnedLabelDeprecation = true;
-                new UmbDeprecation({
-                    deprecated: 'umb-inline-list-block.label property',
-                    solution: 'Project a `<umb-ufm-render>` into the `name` slot instead.',
-                    removeInVersion: '19.0.0',
-                }).warn();
-            }
-        }
-        this._label = value;
-    }
-    get label() {
-        return this._label;
-    }
-    #onNameSlotChange;
     constructor() {
         super();
         this._isOpen = false;
-        this._hasNameSlotContent = false;
-        this.#onNameSlotChange = (event) => {
-            const slot = event.target;
-            this._hasNameSlotContent = slot.assignedNodes({ flatten: true }).length > 0;
+        this.#onClick = () => {
+            this.#toggleOpen();
+        };
+        this.#onKeydown = (event) => {
+            if (event.key !== ' ' && event.key !== 'Enter')
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.#toggleOpen();
         };
         this.#onBlockInserted = (event) => {
             const blockEvent = event;
@@ -119,30 +103,23 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
             return;
         this._workspaceContext.load(this.#contentKey);
     }
+    #onClick;
+    #onKeydown;
+    #toggleOpen() {
+        this._isOpen = !this._isOpen;
+    }
     #onBlockInserted;
     #expose;
     render() {
         return html `
 			<div id="host">
-				<button
-					id="open-part"
-					tabindex="0"
-					@keydown=${(e) => {
-            if (e.key !== ' ' && e.key !== 'Enter')
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this._isOpen = !this._isOpen;
-        }}
-					@click=${() => {
-            this._isOpen = !this._isOpen;
-        }}>
+				<button id="open-part" tabindex="0" @click=${this.#onClick} @keydown=${this.#onKeydown}>
 					<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
 					${this.#renderBlockInfo()}
 					<slot></slot>
 					<slot name="tag"></slot>
 				</button>
-				${this._isOpen === true ? this.#renderInside() : nothing}
+				${when(this._isOpen === true, () => html `${this.#renderInside()}`)}
 			</div>
 		`;
     }
@@ -153,14 +130,9 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 				<span id="icon">
 					<umb-icon .name=${this.icon}></umb-icon>
 				</span>
-				<div id="info">
-					<slot name="name" @slotchange=${this.#onNameSlotChange}></slot>
-					${when(!this._hasNameSlotContent && this._label !== undefined, () => html `<umb-ufm-render id="name" inline .markdown=${this._label} .value=${blockValue}></umb-ufm-render>`)}
-				</div>
+				<div id="info">${this.renderNameSlot(blockValue)}</div>
 			</span>
-			${when(this.unpublished, () => html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-					></uui-tag>`)}
+			<umb-block-state-tag slot="name"></umb-block-state-tag>
 		`;
     }
     #renderInside() {
@@ -168,16 +140,20 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
             return html `<umb-view-loader></umb-view-loader>`;
         }
         if (this._exposed === false) {
-            return html `<uui-button id="exposeButton" draggable="false" @click=${this.#expose}
-				><uui-icon name="icon-add"></uui-icon>
-				<umb-localize
-					key="blockEditor_createThisFor"
-					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
-			></uui-button>`;
+            return html `
+				<uui-button id="exposeButton" draggable="false" @click=${this.#expose}>
+					<uui-icon name="icon-add"></uui-icon>
+					<umb-localize
+						key="blockEditor_createThisFor"
+						.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize>
+				</uui-button>
+			`;
         }
         else {
-            return html `<umb-block-workspace-view-edit-content-no-router
-				draggable="false"></umb-block-workspace-view-edit-content-no-router>`;
+            return html `
+				<umb-block-workspace-view-edit-content-no-router draggable="false">
+				</umb-block-workspace-view-edit-content-no-router>
+			`;
         }
     }
     static { this.styles = [
@@ -283,13 +259,6 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 				padding-left: var(--uui-size-2, 6px);
 			}
 
-			uui-tag {
-				margin-left: 0.5em;
-				margin-bottom: -0.3em;
-				margin-top: -0.3em;
-				vertical-align: text-top;
-			}
-
 			:host(:not([disabled])) #open-part:hover #icon {
 				color: var(--uui-color-interactive-emphasis);
 			}
@@ -308,12 +277,6 @@ let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitEl
 		`,
     ]; }
 };
-__decorate([
-    property({ type: String, reflect: false })
-], UmbInlineListBlockElement.prototype, "label", null);
-__decorate([
-    state()
-], UmbInlineListBlockElement.prototype, "_label", void 0);
 __decorate([
     property({ type: String, reflect: false })
 ], UmbInlineListBlockElement.prototype, "icon", void 0);
@@ -344,9 +307,6 @@ __decorate([
 __decorate([
     state()
 ], UmbInlineListBlockElement.prototype, "_variantName", void 0);
-__decorate([
-    state()
-], UmbInlineListBlockElement.prototype, "_hasNameSlotContent", void 0);
 UmbInlineListBlockElement = __decorate([
     customElement('umb-inline-list-block')
 ], UmbInlineListBlockElement);

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

@@ -1,27 +1,21 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbBlockDataType } from '../../../block/index.js';
 import type { UmbBlockEditorCustomViewConfiguration } from '../../../block-custom-view/index.js';
+import '../../../block/components/block-state-tag/block-state-tag.element.js';
+declare const UmbRefListBlockElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../block/index.js").UmbBlockRefNameSlotElement> & typeof UmbLitElement;
 /**
  * @element umb-ref-list-block
  * @slot name - Content rendered in the block's primary label area (the `name` slot of the inner `uui-ref-node`). The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
  */
-export declare class UmbRefListBlockElement extends UmbLitElement {
-    #private;
-    /**
-     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
-     */
-    set label(value: string | undefined);
-    get label(): string | undefined;
-    private _label?;
+export declare class UmbRefListBlockElement extends UmbRefListBlockElement_base {
     icon?: string;
     index?: number;
     unpublished?: boolean;
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;
     config?: UmbBlockEditorCustomViewConfiguration;
-    private _hasNameSlotContent;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
 }
 export default UmbRefListBlockElement;
 declare global {

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

@@ -4,44 +4,15 @@ 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, customElement, html, property, state, when } from '../../../../../external/lit/index.js';
-import { UmbDeprecation } from '../../../../core/utils/index.js';
+import { UmbBlockRefNameSlotMixin } from '../../../block/index.js';
+import { css, customElement, html, property } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-let hasWarnedLabelDeprecation = false;
+import '../../../block/components/block-state-tag/block-state-tag.element.js';
 /**
  * @element umb-ref-list-block
  * @slot name - Content rendered in the block's primary label area (the `name` slot of the inner `uui-ref-node`). The expected projection is a `<umb-ufm-render>` element owned by the parent block-list entry.
  */
-let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement {
-    constructor() {
-        super(...arguments);
-        this._hasNameSlotContent = false;
-        this.#onNameSlotChange = (event) => {
-            const slot = event.target;
-            this._hasNameSlotContent = slot.assignedNodes({ flatten: true }).length > 0;
-        };
-    }
-    //
-    /**
-     * @deprecated Use the `name` slot to project a `<umb-ufm-render>` instead. Will be removed in Umbraco 19.
-     */
-    set label(value) {
-        if (value !== undefined && value !== this._label) {
-            if (!hasWarnedLabelDeprecation) {
-                hasWarnedLabelDeprecation = true;
-                new UmbDeprecation({
-                    deprecated: 'umb-ref-list-block.label property',
-                    solution: 'Project a `<umb-ufm-render>` into the `name` slot instead.',
-                    removeInVersion: '19.0.0',
-                }).warn();
-            }
-        }
-        this._label = value;
-    }
-    get label() {
-        return this._label;
-    }
-    #onNameSlotChange;
+let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbBlockRefNameSlotMixin(UmbLitElement) {
     render() {
         const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
@@ -50,13 +21,8 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
 				.readonly=${!(this.config?.showContentEdit ?? false)}
 				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
-				<slot name="name" slot="name" @slotchange=${this.#onNameSlotChange}></slot>
-				${when(!this._hasNameSlotContent && this._label !== undefined, () => html `<umb-ufm-render slot="name" inline .markdown=${this._label} .value=${blockValue}></umb-ufm-render>`)}
-				${when(this.unpublished, () => html `
-						<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
-							<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
-						</uui-tag>
-					`)}
+				${this.renderNameSlot(blockValue, 'name')}
+				<umb-block-state-tag slot="name"></umb-block-state-tag>
 			</uui-ref-node>
 		`;
     }
@@ -71,13 +37,6 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
 				min-height: var(--uui-size-16);
 			}
 
-			uui-tag {
-				margin-left: 0.5em;
-				margin-bottom: -0.3em;
-				margin-top: -0.3em;
-				vertical-align: text-top;
-			}
-
 			umb-ufm-render,
 			::slotted([slot='name']) {
 				user-select: none;
@@ -107,12 +66,6 @@ let UmbRefListBlockElement = class UmbRefListBlockElement extends UmbLitElement
 		`,
     ]; }
 };
-__decorate([
-    property({ type: String, reflect: false })
-], UmbRefListBlockElement.prototype, "label", null);
-__decorate([
-    state()
-], UmbRefListBlockElement.prototype, "_label", void 0);
 __decorate([
     property({ type: String, reflect: false })
 ], UmbRefListBlockElement.prototype, "icon", void 0);
@@ -131,9 +84,6 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], UmbRefListBlockElement.prototype, "config", void 0);
-__decorate([
-    state()
-], UmbRefListBlockElement.prototype, "_hasNameSlotContent", void 0);
 UmbRefListBlockElement = __decorate([
     customElement('umb-ref-list-block')
 ], UmbRefListBlockElement);

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

@@ -4,6 +4,8 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
  */
 export declare class UmbUnsupportedListBlockElement extends UmbLitElement {
     #private;
+    private _externalContentFailure?;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }