@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

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

@@ -1,15 +1,10 @@
 import { UmbBooleanState } from '../../../../libs/observable-api/index.js';
 import { UmbBlockManagerContext } from '../../block/index.js';
+import { UMB_PROPERTY_SORT_MODE_CONTEXT } from '../../../core/property-sort-mode/index.js';
 /**
  * A implementation of the Block Manager specifically for the Block List Editor.
  */
 export class UmbBlockListManagerContext extends UmbBlockManagerContext {
-    constructor() {
-        super(...arguments);
-        //
-        this.#inlineEditingMode = new UmbBooleanState(undefined);
-        this.inlineEditingMode = this.#inlineEditingMode.asObservable();
-    }
     //
     #inlineEditingMode;
     setInlineEditingMode(inlineEditingMode) {
@@ -18,6 +13,28 @@ export class UmbBlockListManagerContext extends UmbBlockManagerContext {
     getInlineEditingMode() {
         return this.#inlineEditingMode.getValue();
     }
+    #sortModeContext;
+    #isSortMode;
+    setIsSortMode(isSortMode) {
+        this.#sortModeContext?.setIsSortMode(isSortMode);
+    }
+    getIsSortMode() {
+        return this.#sortModeContext?.getIsSortMode();
+    }
+    constructor(host) {
+        super(host);
+        //
+        this.#inlineEditingMode = new UmbBooleanState(undefined);
+        this.inlineEditingMode = this.#inlineEditingMode.asObservable();
+        this.#isSortMode = new UmbBooleanState(undefined);
+        this.isSortMode = this.#isSortMode.asObservable();
+        this.consumeContext(UMB_PROPERTY_SORT_MODE_CONTEXT, (sortPropertyContext) => {
+            this.#sortModeContext = sortPropertyContext;
+            this.observe(this.#sortModeContext?.isSortMode, (isSortMode) => {
+                this.#isSortMode.setValue(isSortMode);
+            });
+        });
+    }
     /**
      * @param contentElementTypeKey
      * @param partialLayoutEntry
@@ -25,7 +42,6 @@ export class UmbBlockListManagerContext extends UmbBlockManagerContext {
      */
     async createWithPresets(contentElementTypeKey, partialLayoutEntry, 
     // This property is used by some implementations, but not used in this. Do not remove. [NL]
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _originData) {
         return await super._createBlockData(contentElementTypeKey, partialLayoutEntry);
     }

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

@@ -1,12 +1,12 @@
 import { manifests as clipboardManifests } from './clipboard/manifests.js';
-import { manifests as propertValueClonerManifests } from './property-value-cloner/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';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 export const manifests = [
     ...clipboardManifests,
-    ...propertValueClonerManifests,
     ...propertyEditorManifests,
+    ...propertyValueClonerManifests,
     ...validationManifests,
     ...workspaceManifests,
 ];

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.js

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

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

@@ -1,54 +1,78 @@
-import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
-import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
+import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
+import { manifest as propertyEditorSchema } from './Umbraco.BlockList.js';
 import { UmbStandardBlockValueResolver } from '../../../block/index.js';
-export const manifests = [
-    {
-        type: 'propertyEditorUi',
-        alias: 'Umb.PropertyEditorUi.BlockList',
-        name: 'Block List Property Editor UI',
-        element: () => import('./property-editor-ui-block-list.element.js'),
-        meta: {
-            label: 'Block List',
-            propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
-            icon: 'icon-thumbnail-list',
-            group: 'richContent',
-            supportsReadOnly: true,
-            settings: {
-                properties: [
-                    {
-                        alias: 'useSingleBlockMode',
-                        label: 'Single block mode',
-                        description: 'When in Single block mode, the output will be BlockListItem<>, instead of BlockListModel.\n\n**NOTE:**\nSingle block mode requires a maximum of one available block, and an amount set to minimum 1 and maximum 1 blocks.',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
-                    },
-                    {
-                        alias: 'useLiveEditing',
-                        label: 'Live editing mode',
-                        description: 'Live editing in editor overlays for live updated custom views or labels using custom expression.',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
-                    },
-                    {
-                        alias: 'useInlineEditingAsDefault',
-                        label: 'Inline editing mode',
-                        description: 'Use the inline editor as the default block view.',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
-                    },
-                    {
-                        alias: 'maxPropertyWidth',
-                        label: 'Property editor width',
-                        description: 'Optional CSS override, example: 800px or 100%',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
-                    },
-                ],
-            },
+import { UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS } from '../../../../core/property/index.js';
+const propertyEditorUi = {
+    type: 'propertyEditorUi',
+    alias: UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS,
+    name: 'Block List Property Editor UI',
+    element: () => import('./property-editor-ui-block-list.element.js'),
+    meta: {
+        label: 'Block List',
+        propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
+        icon: 'icon-thumbnail-list',
+        group: 'richContent',
+        supportsReadOnly: true,
+        settings: {
+            properties: [
+                {
+                    alias: 'useSingleBlockMode',
+                    label: 'Single block mode',
+                    description: 'When in Single block mode, the output will be BlockListItem<>, instead of BlockListModel.\n\n**NOTE:**\nSingle block mode requires a maximum of one available block, and an amount set to minimum 1 and maximum 1 blocks.',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                },
+                {
+                    alias: 'useLiveEditing',
+                    label: 'Live editing mode',
+                    description: 'Live editing in editor overlays for live updated custom views or labels using custom expression.',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                },
+                {
+                    alias: 'useInlineEditingAsDefault',
+                    label: 'Inline editing mode',
+                    description: 'Use the inline editor as the default block view.',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                },
+                {
+                    alias: 'maxPropertyWidth',
+                    label: 'Property editor width',
+                    description: 'Optional CSS override, example: 800px or 100%',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+                },
+            ],
         },
     },
-    {
-        type: 'propertyValueResolver',
-        alias: 'Umb.PropertyValueResolver.BlockList',
-        name: 'Block Value Resolver',
-        api: UmbStandardBlockValueResolver,
-        forEditorAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
-    },
-    blockListSchemaManifest,
+};
+const propertyValueResolver = {
+    type: 'propertyValueResolver',
+    alias: 'Umb.PropertyValueResolver.BlockList',
+    name: 'Block List Value Resolver',
+    api: UmbStandardBlockValueResolver,
+    forEditorAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
+};
+const sortModePropertyContext = {
+    type: 'propertyContext',
+    kind: 'sortMode',
+    alias: 'Umb.PropertyContext.BlockList.SortMode',
+    name: 'Block List Sort Mode Property Context',
+    forPropertyEditorUis: [UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS],
+};
+const sortModePropertyAction = {
+    type: 'propertyAction',
+    kind: 'sortMode',
+    alias: 'Umb.PropertyAction.BlockList.SortMode',
+    name: 'Block List Sort Mode Property Action',
+    forPropertyEditorUis: [UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS],
+    conditions: [
+        {
+            alias: UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
+        },
+    ],
+};
+export const manifests = [
+    propertyEditorSchema,
+    propertyEditorUi,
+    propertyValueResolver,
+    sortModePropertyContext,
+    sortModePropertyAction,
 ];

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

@@ -1,6 +1,6 @@
 import type { UmbBlockListValueModel } from '../../types.js';
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
 import '../../components/block-list-entry/index.js';
 declare const UmbPropertyEditorUIBlockListElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<UmbBlockListValueModel | undefined>> & typeof UmbLitElement;
@@ -25,6 +25,7 @@ export declare class UmbPropertyEditorUIBlockListElement extends UmbPropertyEdit
     private _layouts;
     private _catalogueRouteBuilder?;
     private _notSupportedVariantSetting?;
+    private _isSortMode;
     constructor();
     protected getFormElement(): undefined;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.js

@@ -7,16 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbBlockListManagerContext } from '../../context/block-list-manager.context.js';
 import { UmbBlockListEntriesContext } from '../../context/block-list-entries.context.js';
 import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
-import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
-import { html, customElement, property, state, repeat, css, nothing } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from '../../../../core/style/index.js';
-import { UmbSorterController } from '../../../../core/sorter/index.js';
-import '../../components/block-list-entry/index.js';
-import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
-import { extractJsonQueryProps, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin, UmbValidationContext, } from '../../../../core/validation/index.js';
-import { jsonStringComparison, observeMultiple } from '../../../../../libs/observable-api/index.js';
+import { css, customElement, html, nothing, property, repeat, state } from '../../../../../external/lit/index.js';
 import { debounceTime } from '../../../../../external/rxjs/index.js';
+import { extractJsonQueryProps, UmbFormControlMixin, UmbValidationContext, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, } from '../../../../core/validation/index.js';
+import { jsonStringComparison, observeMultiple } from '../../../../../libs/observable-api/index.js';
+import { umbDestroyOnDisconnect, UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../../../content/content/index.js';
+import { UMB_VARIANT_CONTEXT } from '../../../../core/variant/index.js';
+import '../../components/block-list-entry/index.js';
 const SORTER_CONFIG = {
     getUniqueOfElement: (element) => {
         return element.contentKey;
@@ -113,6 +113,7 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this._layouts = [];
         this.#managerContext = new UmbBlockListManagerContext(this);
         this.#entriesContext = new UmbBlockListEntriesContext(this);
+        this._isSortMode = false;
         this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (context) => {
             if (context) {
                 this.observe(observeMultiple([
@@ -175,9 +176,12 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
             // Remove the messages after the loop to prevent changing the array while iterating over it.
             this.#validationContext.messages.removeMessageByKeys(validationMessagesToRemove);
         }, null);
-        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
-            this.#managerContext.setVariantId(context?.getVariantId());
+        this.consumeContext(UMB_VARIANT_CONTEXT, async (context) => {
+            this.observe(context?.displayVariantId, (variantId) => {
+                this.#managerContext.setVariantId(variantId);
+            }, 'observeContextualVariantId');
         });
+        this.observe(this.#managerContext.isSortMode, (isSortMode) => (this._isSortMode = isSortMode ?? false));
         this.addValidator('rangeUnderflow', () => this.localize.term('validation_entriesShort', this._limitMin, (this._limitMin ?? 0) - this.#entriesContext.getLength()), () => !!this._limitMin && this.#entriesContext.getLength() < this._limitMin);
         this.addValidator('rangeOverflow', () => this.localize.term('validation_entriesExceed', this._limitMax, this.#entriesContext.getLength() - (this._limitMax || 0)), () => !!this._limitMax && this.#entriesContext.getLength() > this._limitMax);
         this.addValidator('valueMissing', () => this.mandatoryMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !!this.mandatory && this.#entriesContext.getLength() === 0);
@@ -243,10 +247,10 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         return undefined;
     }
     render() {
-        if (this._notSupportedVariantSetting) {
+        if (this._notSupportedVariantSetting)
             return nothing;
-        }
         return html `
+			${this.#renderSortModeToolbar()}
 			${repeat(this._layouts, (layout, index) => `${index}_${layout.contentKey}`, (layout, index) => html `
 					${this.#renderInlineCreateButton(index)}
 					<umb-block-list-entry
@@ -260,19 +264,19 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
 		`;
     }
     #renderCreateButtonGroup() {
-        if (this.readonly && this._layouts.length > 0) {
+        if (this._layouts.length > 0 && (this._limitMax === 1 || this.readonly))
             return nothing;
-        }
-        else {
-            return html `<uui-button-group>${this.#renderCreateButton()}${this.#renderPasteButton()}</uui-button-group>`;
-        }
+        return html `<uui-button-group>${this.#renderCreateButton()}${this.#renderPasteButton()}</uui-button-group>`;
     }
     #renderInlineCreateButton(index) {
         if (this.readonly)
             return nothing;
-        return html `<uui-button-inline-create
-			label=${this._createButtonLabel}
-			href=${this._catalogueRouteBuilder?.({ view: 'create', index: index }) ?? ''}></uui-button-inline-create>`;
+        return html `
+			<uui-button-inline-create
+				label=${this._createButtonLabel}
+				href=${this._catalogueRouteBuilder?.({ view: 'create', index: index }) ?? ''}>
+			</uui-button-inline-create>
+		`;
     }
     #renderCreateButton() {
         let createPath;
@@ -303,11 +307,16 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
 			</uui-button>
 		`;
     }
+    #renderSortModeToolbar() {
+        if (!this._isSortMode)
+            return nothing;
+        return html `<umb-property-sort-mode-toolbar></umb-property-sort-mode-toolbar>`;
+    }
     static { this.styles = [
-        UmbTextStyles,
         css `
 			:host {
 				display: grid;
+				align-content: start;
 				gap: 1px;
 			}
 			> div {
@@ -354,6 +363,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockListElement.prototype, "_notSupportedVariantSetting", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockListElement.prototype, "_isSortMode", void 0);
 UmbPropertyEditorUIBlockListElement = __decorate([
     customElement('umb-property-editor-ui-block-list')
 ], UmbPropertyEditorUIBlockListElement);

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

@@ -11,9 +11,7 @@ export declare class UmbRefRteBlockElement extends UmbLitElement {
     unpublished?: boolean;
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;
-    private _workspaceEditPath?;
     config?: UmbBlockEditorCustomViewConfiguration;
-    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }

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

@@ -4,25 +4,19 @@ 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 } from '../../../../../external/lit/index.js';
+import { css, customElement, html, property } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../block/index.js';
 /**
  * @element umb-ref-rte-block
  */
 let UmbRefRteBlockElement = class UmbRefRteBlockElement extends UmbLitElement {
-    constructor() {
-        super();
-        this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
-            this.observe(context?.workspaceEditContentPath, (workspaceEditPath) => {
-                this._workspaceEditPath = workspaceEditPath;
-            }, 'observeWorkspaceEditPath');
-        });
-    }
     render() {
         const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
-			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this._workspaceEditPath : undefined) ?? ''}>
+			<uui-ref-node
+				standalone
+				.readonly=${!(this.config?.showContentEdit ?? false)}
+				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
 				<div class="selection-background" aria-hidden="true">&emsp;</div>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
 				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
@@ -54,6 +48,10 @@ let UmbRefRteBlockElement = class UmbRefRteBlockElement extends UmbLitElement {
 				z-index: 0;
 			}
 
+			umb-ufm-render {
+				user-select: none;
+			}
+
 			umb-icon,
 			umb-ufm-render {
 				z-index: 1;
@@ -79,9 +77,6 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], UmbRefRteBlockElement.prototype, "settings", void 0);
-__decorate([
-    state()
-], UmbRefRteBlockElement.prototype, "_workspaceEditPath", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbRefRteBlockElement.prototype, "config", void 0);

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

@@ -17,7 +17,6 @@ export class UmbBlockRteManagerContext extends UmbBlockManagerContext {
      */
     async createWithPresets(contentElementTypeKey, partialLayoutEntry, 
     // This property is used by some implementations, but not used in this, do not remove. [NL]
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _originData) {
         const data = await super._createBlockData(contentElementTypeKey, partialLayoutEntry);
         // Find block type.

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

@@ -25,7 +25,6 @@ export class UmbBlockSingleManagerContext extends UmbBlockManagerContext {
      */
     async createWithPresets(contentElementTypeKey, partialLayoutEntry, 
     // This property is used by some implementations, but not used in this. Do not remove. [NL]
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _originData) {
         return await super._createBlockData(contentElementTypeKey, partialLayoutEntry);
     }

package/dist-cms/packages/block/block-single/property-editors/block-single-editor/property-editor-ui-block-single.element.js

@@ -12,11 +12,12 @@ import { html, customElement, property, state, repeat, css, nothing, } from '../
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 import '../../components/block-single-entry/index.js';
-import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 import { extractJsonQueryProps, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin, UmbValidationContext, } from '../../../../core/validation/index.js';
 import { jsonStringComparison, observeMultiple } from '../../../../../libs/observable-api/index.js';
 import { debounceTime } from '../../../../../external/rxjs/index.js';
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../../../content/content/index.js';
+import { UMB_VARIANT_CONTEXT } from '../../../../core/variant/index.js';
 const SORTER_CONFIG = {
     getUniqueOfElement: (element) => {
         return element.contentKey;
@@ -173,8 +174,10 @@ let UmbPropertyEditorUIBlockSingleElement = class UmbPropertyEditorUIBlockSingle
             // Remove the messages after the loop to prevent changing the array while iterating over it.
             this.#validationContext.messages.removeMessageByKeys(validationMessagesToRemove);
         }, null);
-        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
-            this.#managerContext.setVariantId(context?.getVariantId());
+        this.consumeContext(UMB_VARIANT_CONTEXT, async (context) => {
+            this.observe(context?.displayVariantId, (variantId) => {
+                this.#managerContext.setVariantId(variantId);
+            }, 'observeContextualVariantId');
         });
         this.addValidator('rangeOverflow', () => this.localize.term('validation_entriesExceed', 1, this.#entriesContext.getLength() - 1), () => this.#entriesContext.getLength() > 1);
         this.addValidator('valueMissing', () => this.mandatoryMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !!this.mandatory && this.#entriesContext.getLength() === 0);

package/dist-cms/packages/block/block-single/workspace/manifests.js

@@ -1,6 +1,6 @@
+import { UMB_BLOCK_SINGLE_TYPE } from '../constants.js';
 import { manifests as workspaceViewManifests } from './views/manifests.js';
 import { UMB_BLOCK_SINGLE_TYPE_WORKSPACE_ALIAS } from './index.js';
-import { UMB_BLOCK_SINGLE_TYPE } from '../constants.js';
 export const manifests = [
     ...workspaceViewManifests,
     {

package/dist-cms/packages/block/block-type/components/input-block-type/input-block-type.element.js

@@ -169,28 +169,16 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
 				opacity: 0.5;
 			}
 
+			uui-action-bar {
+				--uui-button-background-color: var(--uui-color-surface);
+				--uui-button-background-color-hover: var(--uui-color-surface);
+			}
+
 			#add-button {
 				text-align: center;
 				min-height: 150px;
 				height: 100%;
 			}
-
-			uui-icon {
-				display: block;
-				margin: 0 auto;
-			}
-
-			uui-input {
-				border: none;
-				margin: var(--uui-size-space-6) 0 var(--uui-size-space-4);
-			}
-
-			uui-input:hover uui-button {
-				opacity: 1;
-			}
-			uui-input uui-button {
-				opacity: 0;
-			}
 		`,
     ]; }
 };

package/dist-cms/packages/block/block-type/workspace/manifests.js

@@ -1,8 +1,8 @@
 import { UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS } from '../../block-grid/workspace/index.js';
 import { UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS } from '../../block-list/workspace/index.js';
 import { UMB_BLOCK_RTE_TYPE_WORKSPACE_ALIAS } from '../../block-rte/workspace/index.js';
-import { UMB_WORKSPACE_CONDITION_ALIAS, UmbSubmitWorkspaceAction } from '../../../core/workspace/index.js';
 import { UMB_BLOCK_SINGLE_TYPE_WORKSPACE_ALIAS } from '../../block-single/index.js';
+import { UMB_WORKSPACE_CONDITION_ALIAS, UmbSubmitWorkspaceAction } from '../../../core/workspace/index.js';
 export const manifests = [
     {
         type: 'workspaceAction',

package/dist-cms/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.d.ts

@@ -8,7 +8,7 @@ export declare class UmbClipboardEntryPickerElement extends UmbLitElement {
     constructor();
     connectedCallback(): void;
     firstUpdated(): Promise<void>;
-    render(): unknown;
+    render(): import("lit-html").TemplateResult<1>;
     destroy(): void;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.js

@@ -5,18 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbClipboardCollectionRepository } from '../../collection/index.js';
-import { css, customElement, html, property, repeat, state, when } from '../../../../external/lit/index.js';
+import UmbClipboardEntryDetailRepository from '../detail/clipboard-entry-detail.repository.js';
+import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../external/lit/index.js';
 import { UmbEntityContext } from '../../../core/entity/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbRequestReloadChildrenOfEntityEvent, UmbRequestReloadStructureForEntityEvent, } from '../../../core/entity-action/index.js';
 import { UmbSelectionManager } from '../../../core/utils/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../core/action/index.js';
+import { umbConfirmModal } from '../../../core/modal/index.js';
 // TODO: make this into an extension point (Picker) with two kinds of pickers: tree-item-picker and collection-item-picker;
 let UmbClipboardEntryPickerElement = class UmbClipboardEntryPickerElement extends UmbLitElement {
     #collectionRepository;
     #selectionManager;
     #entityContext;
     #actionEventContext;
+    #clipboardDetailRepository;
     constructor() {
         super();
         this.selection = [];
@@ -24,6 +27,7 @@ let UmbClipboardEntryPickerElement = class UmbClipboardEntryPickerElement extend
         this.#collectionRepository = new UmbClipboardCollectionRepository(this);
         this.#selectionManager = new UmbSelectionManager(this);
         this.#entityContext = new UmbEntityContext(this);
+        this.#clipboardDetailRepository = new UmbClipboardEntryDetailRepository(this);
         this.#onReloadStructureRequest = (event) => {
             const hasItem = this._items.some((item) => item.unique === event.getUnique());
             if (hasItem) {
@@ -83,8 +87,42 @@ let UmbClipboardEntryPickerElement = class UmbClipboardEntryPickerElement extend
     }
     #onReloadStructureRequest;
     #onReloadChildrenRequest;
+    async #clearClipboard() {
+        try {
+            await umbConfirmModal(this, {
+                headline: '#clipboard_labelForClearClipboard',
+                content: '#clipboard_confirmClearDescription',
+                color: 'danger',
+                confirmLabel: '#general_clear',
+                cancelLabel: '#general_cancel',
+            });
+        }
+        catch {
+            return;
+        }
+        for (const item of this._items) {
+            const { error } = await this.#clipboardDetailRepository.delete(item.unique);
+            if (error) {
+                console.error(`Unable to delete clipboard item with unique ${item.unique}`, error);
+            }
+        }
+        this.#requestItems();
+    }
     render() {
-        return when(this._items.length > 0, () => repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item)), () => html `<p>There are no items in the clipboard.</p>`);
+        return html `
+			<uui-box headline=${this.localize.term('general_clipboard')}>
+				<span slot="header-actions">
+					${when(this._items.length > 0, () => html `
+							<uui-button color="default" look="default" @click="${this.#clearClipboard}">
+								<uui-icon name="delete"></uui-icon>
+								<umb-localize key="clipboard_labelForClearClipboard">Clear Clipboard</umb-localize>
+							</uui-button>
+						`, () => nothing)}
+				</span>
+
+				${when(this._items.length > 0, () => repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item)), () => html `<p>There are no items in the clipboard.</p>`)}
+			</uui-box>
+		`;
     }
     #renderItem(item) {
         const label = item.name ?? item.unique;
@@ -110,7 +148,7 @@ let UmbClipboardEntryPickerElement = class UmbClipboardEntryPickerElement extend
 				slot="actions"
 				.entityType=${item.entityType}
 				.unique=${item.unique}
-				.label=${this.localize.term('actions_viewActionsFor', [item.name])}>
+				.label=${this.localize.string(item.name ?? '')}>
 			</umb-entity-actions-bundle>
 		`;
     }

package/dist-cms/packages/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.element.js

@@ -20,12 +20,10 @@ let UmbClipboardEntryPickerModalElement = class UmbClipboardEntryPickerModalElem
     }
     render() {
         return html `<umb-body-layout headline="Clipboard">
-			<uui-box>
-				<umb-clipboard-entry-picker
-					.selection=${this.value?.selection}
-					.config=${this.data}
-					@selection-change=${this.#onSelectionChange}></umb-clipboard-entry-picker>
-			</uui-box>
+			<umb-clipboard-entry-picker
+				.selection=${this.value?.selection}
+				.config=${this.data}
+				@selection-change=${this.#onSelectionChange}></umb-clipboard-entry-picker>
 			<div slot="actions">
 				<uui-button label="Close" @click=${this.#close}></uui-button>
 				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>

package/dist-cms/packages/clipboard/collection/views/manifests.js

@@ -9,7 +9,7 @@ export const manifests = [
         js: () => import('./table/clipboard-table-collection-view.element.js'),
         meta: {
             label: 'Table',
-            icon: 'icon-list',
+            icon: 'icon-table',
             pathName: 'table',
         },
         conditions: [