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

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

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_BLOCK_GRID } from '../../constants.js';
 import { UmbBlockGridEntryContext } from './block-grid-entry.context.js';
 import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/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 { umbDestroyOnDisconnect, UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../external/uui/index.js';
@@ -24,15 +24,51 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     set index(value) {
         this.#context.setIndex(value);
     }
+    /**
+     * 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;
+            this._blockViewProps.contentKey = contentKey;
+            this.setAttribute('data-element-key', 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.
+     */
     get contentKey() {
         return this._contentKey;
     }
     set contentKey(key) {
         if (!key || key === this._contentKey)
             return;
+        new UmbDeprecation({
+            deprecated: 'umb-block-grid-entry.contentKey property',
+            solution: 'Use the `layout` property instead.',
+            removeInVersion: '20.0.0',
+        }).warn();
         this._contentKey = key;
         this._blockViewProps.contentKey = key;
         this.setAttribute('data-element-key', key);
+        if (!this._key) {
+            this.#context.setKey(key);
+        }
         this.#context.setContentKey(key);
         new UmbObserveValidationStateController(this, `$.contentData[${UmbDataPathBlockElementDataQuery({ key: key })}]`, (hasMessages) => {
             this._contentInvalid = hasMessages;
@@ -42,10 +78,6 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     #context;
     #renderTimeout;
     #layoutContainerResizeObserver;
-    #updateBlockViewProps(incoming) {
-        this._blockViewProps = { ...this._blockViewProps, ...incoming };
-        this.requestUpdate('_blockViewProps');
-    }
     constructor() {
         super();
         this.#context = new UmbBlockGridEntryContext(this);
@@ -56,11 +88,14 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement 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.#updateInlineCreateButtons = () => {
@@ -148,16 +183,16 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement 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)
@@ -170,6 +205,10 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement 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:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -211,6 +250,23 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement 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:
@@ -259,13 +315,23 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     }
     #expose;
     #onUfmResolved;
-    #renderHiddenUfm() {
-        const blockValue = {
+    get #blockValue() {
+        return {
             ...this._blockViewProps.content,
             $settings: this._blockViewProps.settings,
             $index: this.index,
         };
-        return renderHiddenUfm(this._label, blockValue, this.#onUfmResolved);
+    }
+    #renderUfm() {
+        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);
     }
     #callUpdateInlineCreateButtons() {
         clearTimeout(this.#renderTimeout);
@@ -279,6 +345,9 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				${this.#renderCreateBeforeInlineButton()}
 				<div class="umb-block-grid__block" part="umb-block-grid__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"
@@ -324,7 +393,6 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         return html `
 			<umb-block-grid-block-inline
 				class="umb-block-grid__block--view"
-				.label=${this._label}
 				.icon=${this._icon}
 				.index=${this._blockViewProps.index}
 				.unpublished=${!this._exposed}
@@ -332,6 +400,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				.content=${this._blockViewProps.content}
 				.settings=${this._blockViewProps.settings}
 				${umbDestroyOnDisconnect()}>
+				${this.#renderUfm()}
 			</umb-block-grid-block-inline>
 		`;
     }
@@ -339,7 +408,6 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         return html `
 			<umb-block-grid-block
 				class="umb-block-grid__block--view ${this._isSortMode ? 'sortable' : ''}"
-				.label=${this._label}
 				.icon=${this._icon}
 				.index=${this._blockViewProps.index}
 				.unpublished=${!this._exposed}
@@ -347,6 +415,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				.content=${this._blockViewProps.content}
 				.settings=${this._blockViewProps.settings}
 				${umbDestroyOnDisconnect()}>
+				${this.#renderUfm()}
 			</umb-block-grid-block>
 		`;
     }
@@ -384,7 +453,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             return nothing;
         if (!this._showActions)
             return nothing;
-        return html `<umb-block-action-list id="actions" block-editor=${UMB_BLOCK_GRID}></umb-block-action-list>`;
+        return html `<umb-block-action-list id="actions" .blockEditor=${UMB_BLOCK_GRID}></umb-block-action-list>`;
     }
     static { this.styles = [
         UUIBlinkKeyframes,
@@ -462,10 +531,6 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5));
 			}
 
-			.umb-block-grid__block {
-				height: 100%;
-			}
-
 			:host(:hover):not(:drop)::after {
 				display: block;
 				border-color: var(--uui-color-interactive-emphasis);
@@ -500,11 +565,21 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				z-index: 2;
 			}
 
+			:host([is-reference]) .umb-block-grid__block {
+				--umb-entity-frame-color: var(--umb-color-reference);
+				--umb-entity-frame-contrast-color: var(--umb-color-reference-contrast);
+			}
+
 			.umb-block-grid__block {
 				--umb-block-scale-handler-opacity: 0;
+				--umb-entity-frame-opacity: 0;
+				--umb-entity-frame-color: var(--uui-color-interactive-emphasis);
+
+				height: 100%;
 
 				&:hover,
 				&:focus-within {
+					--umb-entity-frame-opacity: 1;
 					--umb-block-scale-handler-opacity: 1;
 				}
 			}
@@ -559,6 +634,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_isSortMode", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_name", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_canScale", void 0);
@@ -586,9 +664,15 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_blockViewProps", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-reference', reflect: true })
+], UmbBlockGridEntryElement.prototype, "_isExternalContent", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_isReadOnly", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_externalContentName", void 0);
 UmbBlockGridEntryElement = __decorate([
     customElement('umb-block-grid-entry')
 ], UmbBlockGridEntryElement);

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

@@ -11,7 +11,7 @@ export declare class UmbPropertyEditorUIBlockGridAreaTypePermissionElement exten
     private _blockTypesWithElementName;
     private _blockGroups;
     constructor();
-    render(): import("lit-html").TemplateResult<1> | typeof nothing | "There must be one Block Type created before permissions can be configured.";
+    render(): typeof nothing | import("lit-html").TemplateResult<1> | "There must be one Block Type created before permissions can be configured.";
     static styles: import("lit").CSSResult[];
 }
 export default UmbPropertyEditorUIBlockGridAreaTypePermissionElement;

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

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Block Grid Area Type Permission Configuration Property Editor UI',
     element: () => import('./block-grid-area-type-permission.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Block Grid Area Type Permissions',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-areas-config/manifests.js

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Block Grid Areas Configuration Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-areas-config.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Block Grid Areas Configuration',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-column-span/manifests.js

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Block Grid Column Span Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-column-span.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Block Grid Column Span',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.js

@@ -15,7 +15,7 @@ export const manifest = {
                 {
                     alias: 'validationLimit',
                     label: 'Amount',
-                    description: 'Set a required range of blocks',
+                    description: '{#validation_minimumOnlyWhenInUse}',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
                     config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
                     weight: 100,

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/manifests.js

@@ -1,13 +1,12 @@
 import { manifest as propertyEditorSchema } from './Umbraco.BlockGrid.js';
 import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
-import { UmbStandardBlockValueResolver } from '../../../block/index.js';
+import { UmbBlockPropertyValueEntityReferenceResolver, UmbStandardBlockValueResolver, } from '../../../block/index.js';
 const propertyEditorUi = {
     type: 'propertyEditorUi',
     alias: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
     name: 'Block Grid Property Editor UI',
     element: () => import('./property-editor-ui-block-grid.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Block Grid',
         propertyEditorSchemaAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
         icon: 'icon-layout',
@@ -80,6 +79,13 @@ const propertyValueResolver = {
     api: UmbStandardBlockValueResolver,
     forEditorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
 };
+const propertyValueEntityReference = {
+    type: 'propertyValueEntityReference',
+    alias: 'Umb.PropertyValueEntityReference.BlockGrid',
+    name: 'Block Grid Entity Reference Resolver',
+    api: UmbBlockPropertyValueEntityReferenceResolver,
+    forEditorAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
+};
 const sortModePropertyContext = {
     type: 'propertyContext',
     kind: 'sortMode',
@@ -91,5 +97,6 @@ export const manifests = [
     propertyEditorSchema,
     propertyEditorUi,
     propertyValueResolver,
+    propertyValueEntityReference,
     sortModePropertyContext,
 ];

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.d.ts

@@ -27,7 +27,7 @@ export declare class UmbPropertyEditorUIBlockGridElement extends UmbPropertyEdit
     get value(): UmbBlockGridValueModel | undefined;
     constructor();
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbPropertyEditorUIBlockGridElement;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/value-summary/value-summary.element.d.ts

@@ -2,7 +2,7 @@ import type { UmbBlockGridValueModel } from '../../../types.js';
 import { nothing } from '../../../../../../external/lit/index.js';
 import { UmbValueSummaryElementBase } from '../../../../../core/value-summary/index.js';
 export declare class UmbBlockGridPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<UmbBlockGridValueModel | undefined> {
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 export { UmbBlockGridPropertyEditorValueSummaryElement as element };
 declare global {

package/dist-cms/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.js

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Block Grid Group Configuration Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-group-configuration.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: '',
         icon: 'icon-box-alt',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/manifests.js

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Block Grid Layout Stylesheet Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-layout-stylesheet.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Block Grid Layout Stylesheet',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-type-configuration/manifests.js

@@ -4,7 +4,6 @@ export const manifest = {
     name: 'Block Grid Block Configuration Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-type-configuration.element.js'),
     meta: {
-        supportsVariantChange: true,
         label: 'Block Grid Block Configuration',
         icon: 'icon-autofill',
         group: '#propertyEditorUIGroups_blocks',

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

@@ -1,5 +1,6 @@
 import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '../block/index.js';
 import type { UmbBlockTypeWithGroupKey } from '../block-type/index.js';
+import type { UmbNumberRangeValueType } from '../../core/models/index.js';
 export type * from './clipboard/types.js';
 export interface UmbBlockGridTypeModel extends UmbBlockTypeWithGroupKey {
     columnSpanOptions: Array<UmbBlockGridTypeColumnSpanOption>;
@@ -20,8 +21,7 @@ export interface UmbBlockGridTypeAreaType {
     alias: string;
     columnSpan?: number;
     rowSpan?: number;
-    minAllowed?: number;
-    maxAllowed?: number;
+    validationLimit?: UmbNumberRangeValueType;
     specifiedAllowance?: Array<UmbBlockGridTypeAreaTypePermission>;
     createLabel?: string;
 }

package/dist-cms/packages/block/block-grid/utils/index.js

@@ -33,7 +33,7 @@ export function closestColumnSpanOption(target, map, max) {
  */
 export async function forEachBlockLayoutEntryOf(entry, callback) {
     if (entry.areas) {
-        const parentUnique = entry.contentKey;
+        const parentUnique = entry.key;
         await Promise.all(entry.areas.map(async (area) => {
             const areaKey = area.key;
             await Promise.all(area.items.map(async (item) => {

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

@@ -5,7 +5,7 @@ export declare class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitEle
     private _areaColumnsConfigurationObject?;
     private _areaConfigConfigurationObject?;
     constructor();
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbBlockGridTypeWorkspaceViewAreasElement;

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

@@ -1,3 +1,4 @@
+import type { UmbBlockListLayoutModel } from '../../types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
 import '../ref-list-block/index.js';
@@ -11,9 +12,18 @@ export declare class UmbBlockListEntryElement extends UmbLitElement implements U
     #private;
     set index(value: number | undefined);
     get index(): number | undefined;
+    /**
+     * Set the layout entry for this block.
+     */
+    set layout(value: UmbBlockListLayoutModel | undefined);
+    get key(): string | undefined;
+    private _key?;
+    /**
+     * @deprecated Use the `layout` property instead. Will be removed in Umbraco 20.
+     */
     set contentKey(value: string | undefined);
     get contentKey(): string | undefined;
-    private _contentKey?;
+    private _contentKey;
     private _contentTypeAlias?;
     private _contentTypeName?;
     private _showContentEdit;
@@ -28,7 +38,9 @@ export declare class UmbBlockListEntryElement extends UmbLitElement implements U
     private _contentInvalid?;
     private _settingsInvalid?;
     private _blockViewProps;
+    private _isExternalContent;
     private _isReadOnly;
+    private _externalContentName?;
     constructor();
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1> | undefined;