@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

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

@@ -6,17 +6,16 @@ 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 { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { html, css, customElement, property, state, nothing } from '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
-import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../external/uui/index.js';
 /**
  * @element umb-block-grid-entry
  */
 let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElement {
-    //
     get index() {
         return this.#context.getIndex();
     }
@@ -38,7 +37,6 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             this._blockViewProps.contentInvalid = hasMessages;
         }, 'observeMessagesForContent');
     }
-    //
     #context;
     #renderTimeout;
     #updateBlockViewProps(incoming) {
@@ -47,7 +45,6 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     }
     constructor() {
         super();
-        //
         this.#context = new UmbBlockGridEntryContext(this);
         this._showContentEdit = false;
         this._hasSettings = false;
@@ -113,12 +110,13 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
                 return ext.component;
             }
             else {
-                return html `<div>
-				${ext.component}
-				<umb-block-overlay-expose-button
-					.contentTypeName=${this._contentTypeName}
-					@click=${this.#expose}></umb-block-overlay-expose-button>
-			</div>`;
+                return html `
+				<div>
+					${ext.component}
+					<umb-block-overlay-expose-button .contentTypeName=${this._contentTypeName} @click=${this.#expose}>
+					</umb-block-overlay-expose-button>
+				</div>
+			`;
             }
         };
         this.#renderBuiltinBlockView = () => {
@@ -126,7 +124,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
                 return this.#renderUnsupportedBlock();
             }
             if (this._inlineEditingMode) {
-                return this.renderInlineBlock();
+                return this.#renderInlineBlock();
             }
             return this.#renderRefBlock();
         };
@@ -142,12 +140,8 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             this._hasSettings = !!key;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
         }, null);
-        this.observe(this.#context.canScale, (canScale) => {
-            this._canScale = canScale;
-        }, null);
-        this.observe(this.#context.isAllowed, (isAllowed) => {
-            this._invalidLocation = !isAllowed;
-        }, null);
+        this.observe(this.#context.canScale, (canScale) => (this._canScale = canScale), null);
+        this.observe(this.#context.isAllowed, (isAllowed) => (this._invalidLocation = !isAllowed), null);
         this.observe(this.#context.blockType, (blockType) => {
             this.#updateBlockViewProps({ blockType });
         }, null);
@@ -171,12 +165,9 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             this._unsupported = unsupported;
             this.toggleAttribute('unsupported', unsupported);
         }, null);
-        this.observe(this.#context.actionsVisibility, (showActions) => {
-            this._showActions = showActions;
-        }, null);
-        this.observe(this.#context.inlineEditingMode, (mode) => {
-            this._inlineEditingMode = mode;
-        }, null);
+        this.observe(this.#context.actionsVisibility, (showActions) => (this._showActions = showActions), null);
+        this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
+        this.observe(this.#context.isSortMode, (isSortMode) => (this._isSortMode = isSortMode), null);
         // Data:
         this.observe(this.#context.layout, (layout) => {
             this.#updateBlockViewProps({ layout });
@@ -261,70 +252,75 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
     #extensionSlotFilterMethod;
     #extensionSlotRenderMethod;
     render() {
-        return this.contentKey && (this._contentTypeAlias || this._unsupported)
-            ? html `
-					${this.#renderCreateBeforeInlineButton()}
-					<div class="umb-block-grid__block" part="umb-block-grid__block">
-						<umb-extension-slot
-							.filter=${this.#extensionSlotFilterMethod}
-							.renderMethod=${this.#extensionSlotRenderMethod}
-							.fallbackRenderMethod=${this.#renderBuiltinBlockView}
-							.props=${this._blockViewProps}
-							default-element=${this._inlineEditingMode ? 'umb-block-grid-block-inline' : 'umb-block-grid-block'}
-							type="blockEditorCustomView"
-							single></umb-extension-slot>
-						${this.#renderActionBar()}
-						${!this._showContentEdit && this._contentInvalid
-                ? html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-                : nothing}
-						${this._invalidLocation
-                ? html `<uui-tag id="invalidLocation" color="danger"
-									><umb-localize key="blockEditor_invalidDropPosition" .args=${[this._label]}></umb-localize
-								></uui-tag>`
-                : nothing}
-						${this._canScale
-                ? html ` <umb-block-scale-handler
-									@mousedown=${(e) => this.#context.scaleManager.onScaleMouseDown(e)}>
-									${this._columnSpan}x${this._rowSpan}
-								</umb-block-scale-handler>`
-                : nothing}
-					</div>
-					${this.#renderCreateAfterInlineButton()}
-				`
-            : nothing;
+        return when(this.contentKey && (this._contentTypeAlias || this._unsupported), () => html `
+				${this.#renderCreateBeforeInlineButton()}
+				<div class="umb-block-grid__block" part="umb-block-grid__block">
+					${when(this._isSortMode, () => this.#renderRefBlock(), () => html `
+							<umb-extension-slot
+								single
+								type="blockEditorCustomView"
+								.filter=${this.#extensionSlotFilterMethod}
+								.renderMethod=${this.#extensionSlotRenderMethod}
+								.fallbackRenderMethod=${this.#renderBuiltinBlockView}
+								.props=${this._blockViewProps}></umb-extension-slot>
+						`)}
+					${this.#renderActionBar()}
+					${when(!this._showContentEdit && this._contentInvalid, () => html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`)}
+					${when(this._invalidLocation, () => html `
+							<uui-tag id="invalidLocation" color="danger">
+								<umb-localize key="blockEditor_invalidDropPosition" .args=${[this._label]}></umb-localize>
+							</uui-tag>
+						`)}
+					${when(this._canScale, () => html `
+							<umb-block-scale-handler @mousedown=${(e) => this.#context.scaleManager.onScaleMouseDown(e)}>
+								${this._columnSpan}x${this._rowSpan}
+							</umb-block-scale-handler>
+						`)}
+				</div>
+				${this.#renderCreateAfterInlineButton()}
+			`);
     }
     #renderBuiltinBlockView;
     #renderUnsupportedBlock() {
-        return html `<umb-block-grid-block-unsupported
-			class="umb-block-grid__block--view"
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block-unsupported>`;
-        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
+        return html `
+			<umb-block-grid-block-unsupported
+				class="umb-block-grid__block--view"
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}>
+			</umb-block-grid-block-unsupported>
+		`;
+        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
     }
-    renderInlineBlock() {
-        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}
-			.config=${this._blockViewProps.config}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block-inline>`;
-        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
+    #renderInlineBlock() {
+        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}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}>
+			</umb-block-grid-block-inline>
+		`;
+        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
     }
     #renderRefBlock() {
-        return html `<umb-block-grid-block
-			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}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block>`;
-        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
+        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}
+				.config=${this._blockViewProps.config}
+				.content=${this._blockViewProps.content}
+				.settings=${this._blockViewProps.settings}>
+			</umb-block-grid-block>
+		`;
+        //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root. [NL]
     }
     #renderCreateBeforeInlineButton() {
         if (this._isReadOnly)
@@ -333,12 +329,13 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
             return nothing;
         if (!this._showInlineCreateBefore)
             return nothing;
-        return html `<uui-button-inline-create
-			href=${this._createBeforePath}
-			label=${this.localize.term('blockEditor_addBlock')}
-			style=${this._inlineCreateAboveWidth
-            ? `width: ${this._inlineCreateAboveWidth}`
-            : ''}></uui-button-inline-create>`;
+        return html `
+			<uui-button-inline-create
+				href=${this._createBeforePath}
+				label=${this.localize.term('blockEditor_addBlock')}
+				style=${this._inlineCreateAboveWidth ? `width: ${this._inlineCreateAboveWidth}` : ''}>
+			</uui-button-inline-create>
+		`;
     }
     #renderCreateAfterInlineButton() {
         if (this._isReadOnly)
@@ -355,56 +352,61 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 		`;
     }
     #renderActionBar() {
-        return this._showActions
-            ? html `
-					<uui-action-bar>
-						${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
-						${this.#renderDeleteAction()}</uui-action-bar
-					>
-				`
-            : nothing;
+        if (this._isSortMode)
+            return nothing;
+        if (!this._showActions)
+            return nothing;
+        return html `
+			<uui-action-bar>
+				${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
+				${this.#renderDeleteAction()}
+			</uui-action-bar>
+		`;
     }
     #renderEditAction() {
-        return this._showContentEdit && this._workspaceEditContentPath
-            ? html `<uui-button
-					label="edit"
-					look="secondary"
-					color=${this._contentInvalid ? 'danger' : ''}
-					href=${this._workspaceEditContentPath}>
-					<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
-					${this._contentInvalid
-                ? html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
-                : nothing}
-				</uui-button>`
-            : this._showContentEdit === false && this._exposed === false
-                ? html `<uui-button
+        return html `
+			${when(this._showContentEdit && this._workspaceEditContentPath, () => html `
+					<uui-button
+						label="edit"
+						look="secondary"
+						color=${this._contentInvalid ? 'danger' : ''}
+						href=${this._workspaceEditContentPath}>
+						<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
+						${when(this._contentInvalid, () => html `<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`)}
+					</uui-button>
+				`)}
+			${when(this._showContentEdit === false && this._exposed === false, () => html `
+					<uui-button
 						@click=${this.#expose}
 						label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
-						look="secondary"
-						><uui-icon name="icon-add"></uui-icon
-					></uui-button>`
-                : nothing;
+						look="secondary">
+						<uui-icon name="icon-add"></uui-icon>
+					</uui-button>
+				`)}
+		`;
     }
     #renderEditSettingsAction() {
         return html `
 			${this._hasSettings && this._workspaceEditSettingsPath
-            ? html `<uui-button
-						label="Edit settings"
-						look="secondary"
-						color=${this._settingsInvalid ? 'invalid' : ''}
-						href=${this._workspaceEditSettingsPath}>
-						<uui-icon name="icon-settings"></uui-icon>
-						${this._settingsInvalid
-                ? html `<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`
-                : nothing}
-					</uui-button>`
+            ? html `
+						<uui-button
+							label="Edit settings"
+							look="secondary"
+							color=${this._settingsInvalid ? 'invalid' : ''}
+							href=${this._workspaceEditSettingsPath}>
+							<uui-icon name="icon-settings"></uui-icon>
+							${when(this._settingsInvalid, () => html `<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`)}
+						</uui-button>
+					`
             : nothing}
 		`;
     }
     #renderCopyToClipboardAction() {
-        return html `<uui-button label="Copy to clipboard" look="secondary" @click=${() => this.#context.copyToClipboard()}>
-			<uui-icon name="icon-clipboard-copy"></uui-icon>
-		</uui-button>`;
+        return html `
+			<uui-button label="Copy to clipboard" look="secondary" @click=${() => this.#context.copyToClipboard()}>
+				<uui-icon name="icon-clipboard-copy"></uui-icon>
+			</uui-button>
+		`;
     }
     #renderDeleteAction() {
         if (this._isReadOnly)
@@ -468,6 +470,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				opacity: var(--umb-block-grid-entry-actions-opacity, 0);
 				transition: opacity 120ms;
 			}
+
 			uui-button-inline-create {
 				top: 0px;
 				position: absolute;
@@ -475,13 +478,16 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				--umb-block-grid__block--inline-create-button-display--condition: var(--umb-block-grid--dragging-mode) none;
 				display: var(--umb-block-grid__block--inline-create-button-display--condition);
 			}
+
 			uui-button-inline-create:not([vertical]) {
 				left: 0;
 				width: var(--umb-block-grid-editor--inline-create-width, 100%);
 			}
+
 			:host(:not([index='0'])) uui-button-inline-create:not([vertical]) {
 				top: calc(var(--umb-block-grid--row-gap, 0px) * -0.5);
 			}
+
 			uui-button-inline-create[vertical] {
 				right: calc(1px - (var(--umb-block-grid--column-gap, 0px) * 0.5));
 			}
@@ -504,6 +510,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				border-color: var(--uui-color-interactive-emphasis);
 				animation: ${UUIBlinkAnimationValue};
 			}
+
 			:host([drag-placeholder])::before {
 				content: '';
 				position: absolute;
@@ -513,6 +520,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				background-color: var(--uui-color-interactive-emphasis);
 				opacity: 0.12;
 			}
+
 			:host([drag-placeholder]) .umb-block-grid__block {
 				transition: opacity 50ms 16ms;
 				opacity: 0;
@@ -578,6 +586,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_inlineEditingMode", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntryElement.prototype, "_isSortMode", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntryElement.prototype, "_canScale", void 0);

package/dist-cms/packages/block/block-grid/manifests.js

@@ -1,5 +1,6 @@
 import { manifests as clipboardManifests } from './clipboard/manifests.js';
 import { manifests as componentManifests } from './components/manifests.js';
+import { manifests as propertyActionManifests } from './property-actions/manifests.js';
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
 import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js';
 import { manifests as validationManifests } from './validation/manifests.js';
@@ -7,6 +8,7 @@ import { manifests as workspaceManifests } from './workspace/manifests.js';
 export const manifests = [
     ...clipboardManifests,
     ...componentManifests,
+    ...propertyActionManifests,
     ...propertyEditorManifests,
     ...propertyValueClonerManifests,
     ...validationManifests,

package/dist-cms/packages/block/block-grid/{property-editors/block-grid-editor/property-actions → property-actions}/block-grid-paste-from-clipboard.d.ts

@@ -1,6 +1,6 @@
-import type { UmbBlockGridValueModel } from '../../../types.js';
-import type { UmbBlockGridPropertyEditorConfig } from '../types.js';
-import { UmbPasteFromClipboardPropertyAction } from '../../../../../clipboard/index.js';
+import type { UmbBlockGridValueModel } from '../types.js';
+import type { UmbBlockGridPropertyEditorConfig } from '../property-editors/block-grid-editor/types.js';
+import { UmbPasteFromClipboardPropertyAction } from '../../../clipboard/index.js';
 /**
  * The Block Grid Paste From Clipboard Property Action.
  * @exports

package/dist-cms/packages/block/block-grid/{property-editors/block-grid-editor/property-actions → property-actions}/block-grid-paste-from-clipboard.js

@@ -1,4 +1,5 @@
-import { UmbPasteFromClipboardPropertyAction } from '../../../../../clipboard/index.js';
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../property-editors/block-grid-editor/constants.js';
+import { UmbPasteFromClipboardPropertyAction } from '../../../clipboard/index.js';
 /**
  * The Block Grid Paste From Clipboard Property Action.
  * @exports
@@ -28,7 +29,7 @@ export class UmbBlockGridPasteFromClipboardPropertyAction extends UmbPasteFromCl
             }
         })
             .filter((contentTypeKey) => contentTypeKey !== undefined) ?? [];
-        const rootContentKeys = propertyValue.layout['Umbraco.BlockGrid']?.map((block) => block.contentKey) ?? [];
+        const rootContentKeys = propertyValue.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.map((block) => block.contentKey) ?? [];
         const rootContentTypeKeys = propertyValue.contentData
             .filter((content) => rootContentKeys.includes(content.key))
             .map((content) => content.contentTypeKey);

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

@@ -0,0 +1,25 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from '../constants.js';
+import { UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS, UMB_WRITABLE_PROPERTY_CONDITION_ALIAS, } from '../../../core/property/index.js';
+import { UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST } from '../../../clipboard/index.js';
+const clipboardPaste = {
+    ...UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST.manifest,
+    type: 'propertyAction',
+    alias: 'Umb.PropertyAction.BlockGrid.Clipboard.Paste',
+    name: 'Block Grid Paste From Clipboard Property Action',
+    api: () => import('./block-grid-paste-from-clipboard.js'),
+    forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
+    conditions: [{ alias: UMB_WRITABLE_PROPERTY_CONDITION_ALIAS }],
+};
+const sortMode = {
+    type: 'propertyAction',
+    kind: 'sortMode',
+    alias: 'Umb.PropertyAction.BlockGrid.SortMode',
+    name: 'Block Grid Sort Mode Property Action',
+    forPropertyEditorUis: [UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS],
+    conditions: [
+        {
+            alias: UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
+        },
+    ],
+};
+export const manifests = [clipboardPaste, sortMode];

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

@@ -1,9 +1,10 @@
+import { UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
 export const manifest = {
     type: 'propertyEditorSchema',
     name: 'Block Grid',
-    alias: 'Umbraco.BlockGrid',
+    alias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
     meta: {
-        defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGrid',
+        defaultPropertyEditorUiAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_UI_ALIAS,
         settings: {
             properties: [
                 {

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

@@ -1,2 +1 @@
-import type { UmbExtensionManifestKind } from '../../../../core/extension-registry/index.js';
-export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;
+export declare const manifests: Array<UmbExtensionManifest>;