@umbraco-cms/backoffice 14.0.0-rc2 → 14.0.0-rc4

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

@@ -4,43 +4,35 @@ 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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_sorter, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeBlockGroups, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onDelete, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput;
 import '../../../block-type/components/input-block-type/index.js';
 import { html, customElement, property, state, repeat, nothing, css, ifDefined, } from '../../../../../external/lit/index.js';
 import { UmbPropertyValueChangeEvent, } from '../../../../core/property-editor/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UMB_BLOCK_GRID_TYPE } from '../../index.js';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
+import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT, } from '../../../../core/property/index.js';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 /**
  * @element umb-property-editor-ui-block-grid-type-configuration
  */
 let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEditorUIBlockGridTypeConfigurationElement extends UmbLitElement {
+    #moveData;
+    #sorter;
+    #datasetContext;
+    #blockTypeWorkspaceModalRegistration;
+    #value;
     get value() {
-        return __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, "f");
+        return this.#value;
     }
     set value(value) {
-        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, value ?? [], "f");
-        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups).call(this);
+        this.#value = value ?? [];
+        this.#mapValuesToBlockGroups();
     }
+    #blockGroups;
     constructor() {
         super();
-        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances.add(this);
-        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData.set(this, void 0);
-        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_sorter.set(this, new UmbSorterController(this, {
+        this.#sorter = new UmbSorterController(this, {
             getUniqueOfElement: (element) => element.getAttribute('data-umb-group-key'),
             getUniqueOfModel: (modelEntry) => modelEntry.key,
             itemSelector: '.group',
@@ -51,21 +43,21 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
             },
             onEnd: () => {
                 // TODO: make one method for updating the blockGroupsDataSetValue:
-                __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f")?.setPropertyValue('blockGroups', this._groupsWithBlockTypes.map((group) => ({ key: group.key, name: group.name })));
+                this.#datasetContext?.setPropertyValue('blockGroups', this._groupsWithBlockTypes.map((group) => ({ key: group.key, name: group.name })));
             },
-        }));
-        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext.set(this, void 0);
-        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration.set(this, void 0);
-        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value.set(this, []);
-        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups.set(this, void 0);
+        });
+        this.#value = [];
         this._groupsWithBlockTypes = [];
         this._notGroupedBlockTypes = [];
-        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => {
-            __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, instance, "f");
+        this.consumeContext(UMB_PROPERTY_CONTEXT, async (context) => {
+            this._alias = context.getAlias();
+        });
+        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
+            this.#datasetContext = context;
             //this.#observeBlocks();
-            __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeBlockGroups).call(this);
+            this.#observeBlockGroups();
         });
-        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+        this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
             .addAdditionalPath(UMB_BLOCK_GRID_TYPE)
             .onSetup(() => {
             return { data: { entityType: UMB_BLOCK_GRID_TYPE, preset: {} }, modal: { size: 'large' } };
@@ -73,120 +65,125 @@ let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEdit
             .observeRouteBuilder((routeBuilder) => {
             const newpath = routeBuilder({});
             this._workspacePath = newpath;
-        }), "f");
+        });
+    }
+    async #observeBlockGroups() {
+        if (!this.#datasetContext)
+            return;
+        this.observe(await this.#datasetContext.propertyValueByAlias('blockGroups'), (value) => {
+            this.#blockGroups = value ?? [];
+            this.#mapValuesToBlockGroups();
+        });
+    }
+    // TODO: No need for this, we just got the value via the value property.. [NL]
+    /*
+    async #observeBlocks() {
+        if (!this.#datasetContext) return;
+        this.observe(await this.#datasetContext.propertyValueByAlias('blocks'), (value) => {
+            this.value = (value as Array<UmbBlockTypeWithGroupKey>) ?? [];
+            this.#mapValuesToBlockGroups();
+        });
+    }
+    */
+    #mapValuesToBlockGroups() {
+        if (!this.#blockGroups)
+            return;
+        // Map blocks that are not in any group, or in a group that does not exist
+        this._notGroupedBlockTypes = this.#value.filter((block) => !block.groupKey || !this.#blockGroups.find((group) => group.key === block.groupKey));
+        // Map blocks to the group they belong to
+        this._groupsWithBlockTypes = this.#blockGroups.map((group) => {
+            return { name: group.name, key: group.key, blocks: this.#value.filter((value) => value.groupKey === group.key) };
+        });
+        this.#sorter.setModel(this._groupsWithBlockTypes);
+    }
+    #onDelete(e, groupKey) {
+        const updatedValues = e.target.value.map((value) => ({ ...value, groupKey }));
+        const filteredValues = this.#value.filter((value) => value.groupKey !== groupKey);
+        this.value = [...filteredValues, ...updatedValues];
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    async #onChange(e) {
+        e.stopPropagation();
+        const element = e.target;
+        const value = element.value;
+        if (!e.detail?.moveComplete) {
+            // Container change, store data of the new group...
+            const newGroupKey = element.getAttribute('data-umb-group-key');
+            const movedItem = e.detail?.item;
+            // Check if item moved back to original group...
+            movedItem.groupKey === newGroupKey
+                ? (this.#moveData = undefined)
+                : (this.#moveData = value.map((block) => ({ ...block, groupKey: newGroupKey })));
+        }
+        else if (e.detail?.moveComplete) {
+            // Move complete, get the blocks that were in an untouched group
+            const blocks = this.#value
+                .filter((block) => !value.find((value) => value.contentElementTypeKey === block.contentElementTypeKey))
+                .filter((block) => !this.#moveData?.find((value) => value.contentElementTypeKey === block.contentElementTypeKey));
+            this.value = this.#moveData ? [...blocks, ...value, ...this.#moveData] : [...blocks, ...value];
+            this.dispatchEvent(new UmbPropertyValueChangeEvent());
+            this.#moveData = undefined;
+        }
+    }
+    #onCreate(e, groupKey) {
+        const selectedElementType = e.detail.contentElementTypeKey;
+        if (selectedElementType) {
+            this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/' + (groupKey ?? null));
+        }
+    }
+    // TODO: Implement confirm dialog
+    #deleteGroup(groupKey) {
+        // TODO: make one method for updating the blockGroupsDataSetValue:
+        // This one that deletes might require the ability to parse what to send as an argument to the method, then a filtering can occur before.
+        this.#datasetContext?.setPropertyValue('blockGroups', this.#blockGroups?.filter((group) => group.key !== groupKey));
+        // If a group is deleted, Move the blocks to no group:
+        this.value = this.#value.map((block) => (block.groupKey === groupKey ? { ...block, groupKey: undefined } : block));
+    }
+    #changeGroupName(e, groupKey) {
+        const groupName = e.target.value;
+        // TODO: make one method for updating the blockGroupsDataSetValue:
+        this.#datasetContext?.setPropertyValue('blockGroups', this.#blockGroups?.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)));
     }
     render() {
         return html `<div id="groups">
 			${this._notGroupedBlockTypes
             ? html `<umb-input-block-type
+						.propertyAlias=${this._alias}
 						.value=${this._notGroupedBlockTypes}
 						.workspacePath=${this._workspacePath}
-						@change=${__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange)}
-						@create=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate).call(this, e, undefined)}
-						@delete=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onDelete).call(this, e, undefined)}></umb-input-block-type>`
+						@change=${this.#onChange}
+						@create=${(e) => this.#onCreate(e, undefined)}
+						@delete=${(e) => this.#onDelete(e, undefined)}></umb-input-block-type>`
             : ''}
 			${repeat(this._groupsWithBlockTypes, (group) => group.key, (group) => html `<div class="group" data-umb-group-key=${ifDefined(group.key)}>
-						${group.key ? __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput).call(this, group.key, group.name) : nothing}
+						${group.key ? this.#renderGroupInput(group.key, group.name) : nothing}
 						<umb-input-block-type
 							data-umb-group-key=${group.key}
+							.propertyAlias=${this._alias + '_' + group.key}
 							.value=${group.blocks}
 							.workspacePath=${this._workspacePath}
-							@change=${__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange)}
-							@create=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate).call(this, e, group.key)}
-							@delete=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onDelete).call(this, e, group.key)}></umb-input-block-type>
+							@change=${this.#onChange}
+							@create=${(e) => this.#onCreate(e, group.key)}
+							@delete=${(e) => this.#onDelete(e, group.key)}></umb-input-block-type>
 					</div>`)}
 		</div>`;
     }
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData = new WeakMap();
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_sorter = new WeakMap();
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext = new WeakMap();
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration = new WeakMap();
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_value = new WeakMap();
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups = new WeakMap();
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances = new WeakSet();
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeBlockGroups = async function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeBlockGroups() {
-    if (!__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f"))
-        return;
-    this.observe(await __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f").propertyValueByAlias('blockGroups'), (value) => {
-        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups, value ?? [], "f");
-        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups).call(this);
-    });
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups() {
-    if (!__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups, "f"))
-        return;
-    // Map blocks that are not in any group, or in a group that does not exist
-    this._notGroupedBlockTypes = __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, "f").filter((block) => !block.groupKey || !__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups, "f").find((group) => group.key === block.groupKey));
-    // Map blocks to the group they belong to
-    this._groupsWithBlockTypes = __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups, "f").map((group) => {
-        return { name: group.name, key: group.key, blocks: __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, "f").filter((value) => value.groupKey === group.key) };
-    });
-    __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_sorter, "f").setModel(this._groupsWithBlockTypes);
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_onDelete = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onDelete(e, groupKey) {
-    const updatedValues = e.target.value.map((value) => ({ ...value, groupKey }));
-    const filteredValues = __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, "f").filter((value) => value.groupKey !== groupKey);
-    this.value = [...filteredValues, ...updatedValues];
-    this.dispatchEvent(new UmbPropertyValueChangeEvent());
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange = async function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange(e) {
-    e.stopPropagation();
-    const element = e.target;
-    const value = element.value;
-    if (!e.detail?.moveComplete) {
-        // Container change, store data of the new group...
-        const newGroupKey = element.getAttribute('data-umb-group-key');
-        const movedItem = e.detail?.item;
-        // Check if item moved back to original group...
-        movedItem.groupKey === newGroupKey
-            ? (__classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData, undefined, "f"))
-            : (__classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData, value.map((block) => ({ ...block, groupKey: newGroupKey })), "f"));
-    }
-    else if (e.detail?.moveComplete) {
-        // Move complete, get the blocks that were in an untouched group
-        const blocks = __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, "f")
-            .filter((block) => !value.find((value) => value.contentElementTypeKey === block.contentElementTypeKey))
-            .filter((block) => !__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData, "f")?.find((value) => value.contentElementTypeKey === block.contentElementTypeKey));
-        this.value = __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData, "f") ? [...blocks, ...value, ...__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData, "f")] : [...blocks, ...value];
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
-        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_moveData, undefined, "f");
-    }
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate(e, groupKey) {
-    const selectedElementType = e.detail.contentElementTypeKey;
-    if (selectedElementType) {
-        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.open({}, 'create/' + selectedElementType + '/' + (groupKey ?? null));
-    }
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup(groupKey) {
-    // TODO: make one method for updating the blockGroupsDataSetValue:
-    // This one that deletes might require the ability to parse what to send as an argument to the method, then a filtering can occur before.
-    __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f")?.setPropertyValue('blockGroups', __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups, "f")?.filter((group) => group.key !== groupKey));
-    // If a group is deleted, Move the blocks to no group:
-    this.value = __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_value, "f").map((block) => (block.groupKey === groupKey ? { ...block, groupKey: undefined } : block));
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName(e, groupKey) {
-    const groupName = e.target.value;
-    // TODO: make one method for updating the blockGroupsDataSetValue:
-    __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f")?.setPropertyValue('blockGroups', __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockGroups, "f")?.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)));
-};
-_UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput(groupKey, groupName) {
-    return html `<div class="group-handle">
+    #renderGroupInput(groupKey, groupName) {
+        return html `<div class="group-handle">
 			<uui-input
 				auto-width
 				label="Group"
 				.value=${groupName ?? ''}
-				@change=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName).call(this, e, groupKey)}>
-				<uui-button compact slot="append" label="delete" @click=${() => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup).call(this, groupKey)}>
+				@change=${(e) => this.#changeGroupName(e, groupKey)}>
+				<uui-button compact slot="append" label="delete" @click=${() => this.#deleteGroup(groupKey)}>
 					<uui-icon name="icon-trash"></uui-icon>
 				</uui-button>
 			</uui-input>
 		</div>`;
-};
-UmbPropertyEditorUIBlockGridTypeConfigurationElement.styles = [
-    UmbTextStyles,
-    css `
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
 			uui-input:not(:hover, :focus) {
 				border: 1px solid transparent;
 			}
@@ -210,10 +207,14 @@ UmbPropertyEditorUIBlockGridTypeConfigurationElement.styles = [
 				opacity: 0.2;
 			}
 		`,
-];
+    ]; }
+};
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "_alias", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "config", void 0);

package/dist-cms/packages/block/block-grid/workspace/block-grid-workspace.modal-token.d.ts

@@ -1,5 +1,5 @@
 import type { UmbBlockWorkspaceData } from '../../block/index.js';
-import type { UmbWorkspaceData, UmbWorkspaceValue } from '../../../core/modal/index.js';
+import type { UmbWorkspaceModalData, UmbWorkspaceModalValue } from '../../../core/modal/index.js';
 import { UmbModalToken } from '../../../core/modal/index.js';
 export interface UmbBlockGridWorkspaceData extends UmbBlockWorkspaceData<{
     index: number;
@@ -7,4 +7,4 @@ export interface UmbBlockGridWorkspaceData extends UmbBlockWorkspaceData<{
     areaKey?: string;
 }> {
 }
-export declare const UMB_BLOCK_GRID_WORKSPACE_MODAL: UmbModalToken<Omit<UmbWorkspaceData<unknown>, "entityType">, UmbWorkspaceValue>;
+export declare const UMB_BLOCK_GRID_WORKSPACE_MODAL: UmbModalToken<Omit<UmbWorkspaceModalData<unknown>, "entityType">, UmbWorkspaceModalValue>;

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

@@ -48,10 +48,9 @@ let UmbBlockGridTypeWorkspaceViewAdvancedElement = class UmbBlockGridTypeWorkspa
 			</uui-box>
 		`;
     }
-};
-UmbBlockGridTypeWorkspaceViewAdvancedElement.styles = [
-    UmbTextStyles,
-    css `
+    static { this.styles = [
+        UmbTextStyles,
+        css `
 			:host {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
@@ -60,7 +59,8 @@ UmbBlockGridTypeWorkspaceViewAdvancedElement.styles = [
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
 		`,
-];
+    ]; }
+};
 UmbBlockGridTypeWorkspaceViewAdvancedElement = __decorate([
     customElement('umb-block-grid-type-workspace-view-advanced')
 ], UmbBlockGridTypeWorkspaceViewAdvancedElement);

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

@@ -1,10 +1,12 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { nothing } from '../../../../../external/lit/index.js';
 import type { UmbWorkspaceViewElement } from '../../../../core/extension-registry/index.js';
 import type { UmbPropertyEditorConfig } from '../../../../core/property-editor/index.js';
 export declare class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement {
+    _areaColumnsConfigurationObject?: UmbPropertyEditorConfig;
     _areaConfigConfigurationObject?: UmbPropertyEditorConfig;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbBlockGridTypeWorkspaceViewAreasElement;

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { css, html, customElement, state } from '../../../../../external/lit/index.js';
+import { css, html, customElement, state, nothing } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../../../data-type/index.js';
 let UmbBlockGridTypeWorkspaceViewAreasElement = class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement {
@@ -13,32 +13,35 @@ let UmbBlockGridTypeWorkspaceViewAreasElement = class UmbBlockGridTypeWorkspaceV
         super();
         this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
             this.observe(await context.propertyValueByAlias('gridColumns'), (value) => {
-                const dataTypeGridColumns = value ? parseInt(value, 10) : undefined;
+                const dataTypeGridColumns = value ? parseInt(value, 10) : 12;
+                this._areaColumnsConfigurationObject = [{ alias: 'placeholder', value: dataTypeGridColumns }];
                 this._areaConfigConfigurationObject = [{ alias: 'defaultAreaGridColumns', value: dataTypeGridColumns }];
             }, 'observeGridColumns');
         }).passContextAliasMatches();
     }
     render() {
-        return html `
-			<uui-box headline="Areas">
-				<umb-property
-					label=${this.localize.term('blockEditor_areasLayoutColumns')}
-					alias="areaGridColumns"
-					property-editor-ui-alias="Umb.PropertyEditorUi.Number"></umb-property>
-				<umb-property
-					label=${this.localize.term('blockEditor_areasConfigurations')}
-					alias="areas"
-					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreasConfig"
-					.config=${this._areaConfigConfigurationObject}
-					>></umb-property
-				>
-			</uui-box>
-		`;
+        return this._areaConfigConfigurationObject
+            ? html `
+					<uui-box headline="Areas">
+						<umb-property
+							label=${this.localize.term('blockEditor_areasLayoutColumns')}
+							alias="areaGridColumns"
+							property-editor-ui-alias="Umb.PropertyEditorUi.Integer"
+							.config=${this._areaColumnsConfigurationObject}></umb-property>
+						<umb-property
+							label=${this.localize.term('blockEditor_areasConfigurations')}
+							alias="areas"
+							property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreasConfig"
+							.config=${this._areaConfigConfigurationObject}
+							>></umb-property
+						>
+					</uui-box>
+				`
+            : nothing;
     }
-};
-UmbBlockGridTypeWorkspaceViewAreasElement.styles = [
-    UmbTextStyles,
-    css `
+    static { this.styles = [
+        UmbTextStyles,
+        css `
 			:host {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
@@ -47,7 +50,11 @@ UmbBlockGridTypeWorkspaceViewAreasElement.styles = [
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
 		`,
-];
+    ]; }
+};
+__decorate([
+    state()
+], UmbBlockGridTypeWorkspaceViewAreasElement.prototype, "_areaColumnsConfigurationObject", void 0);
 __decorate([
     state()
 ], UmbBlockGridTypeWorkspaceViewAreasElement.prototype, "_areaConfigConfigurationObject", void 0);

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

@@ -4,37 +4,25 @@ 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;
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _UmbBlockGridTypeWorkspaceViewSettingsElement_instances, _UmbBlockGridTypeWorkspaceViewSettingsElement_labelOnTopSetting, _UmbBlockGridTypeWorkspaceViewSettingsElement_datasetContext, _UmbBlockGridTypeWorkspaceViewSettingsElement_onRowSpanChange, _UmbBlockGridTypeWorkspaceViewSettingsElement_renderSizeOptions;
 import { css, html, customElement, state } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../../../data-type/index.js';
 let UmbBlockGridTypeWorkspaceViewSettingsElement = class UmbBlockGridTypeWorkspaceViewSettingsElement extends UmbLitElement {
+    #labelOnTopSetting;
+    #datasetContext;
     constructor() {
         super();
-        _UmbBlockGridTypeWorkspaceViewSettingsElement_instances.add(this);
-        _UmbBlockGridTypeWorkspaceViewSettingsElement_labelOnTopSetting.set(this, { alias: 'labelOnTop', value: true });
+        this.#labelOnTopSetting = { alias: 'labelOnTop', value: true };
         this._showSizeOptions = false;
-        _UmbBlockGridTypeWorkspaceViewSettingsElement_datasetContext.set(this, void 0);
         this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
             this.observe(await context.propertyValueByAlias('gridColumns'), (value) => {
                 this._dataTypeGridColumns = value ? parseInt(value, 10) : undefined;
             }, 'observeGridColumns');
         }).passContextAliasMatches();
         this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
-            __classPrivateFieldSet(this, _UmbBlockGridTypeWorkspaceViewSettingsElement_datasetContext, context, "f");
+            this.#datasetContext = context;
             // TODO set showSizeOption to true when rowMinSpan or rowMaxSpan is set
             this.observe(await context.propertyValueByAlias('columnSpanOptions'), (value) => {
                 if (Array.isArray(value) && value.length > 0) {
@@ -50,6 +38,10 @@ let UmbBlockGridTypeWorkspaceViewSettingsElement = class UmbBlockGridTypeWorkspa
             }, 'observeRowMaxSpan');
         });
     }
+    #onRowSpanChange(e) {
+        this.#datasetContext?.setPropertyValue('rowMinSpan', e.target.minValue);
+        this.#datasetContext?.setPropertyValue('rowMaxSpan', e.target.maxValue);
+    }
     render() {
         return html `
 			<uui-box headline=${this.localize.term('general_general')}>
@@ -57,7 +49,7 @@ let UmbBlockGridTypeWorkspaceViewSettingsElement = class UmbBlockGridTypeWorkspa
 					label=${this.localize.term('general_label')}
 					alias="label"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"
-					.config=${[__classPrivateFieldGet(this, _UmbBlockGridTypeWorkspaceViewSettingsElement_labelOnTopSetting, "f")]}></umb-property>
+					.config=${[this.#labelOnTopSetting]}></umb-property>
 
 				<umb-property
 					label=${this.localize.term('blockEditor_labelContentElementType')}
@@ -89,53 +81,45 @@ let UmbBlockGridTypeWorkspaceViewSettingsElement = class UmbBlockGridTypeWorkspa
 					alias="allowInAreas"
 					property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
 			</uui-box>
-			<uui-box headline=${this.localize.term('blockEditor_sizeOptions')}> ${__classPrivateFieldGet(this, _UmbBlockGridTypeWorkspaceViewSettingsElement_instances, "m", _UmbBlockGridTypeWorkspaceViewSettingsElement_renderSizeOptions).call(this)} </uui-box>
+			<uui-box headline=${this.localize.term('blockEditor_sizeOptions')}> ${this.#renderSizeOptions()} </uui-box>
 		`;
     }
-};
-_UmbBlockGridTypeWorkspaceViewSettingsElement_labelOnTopSetting = new WeakMap();
-_UmbBlockGridTypeWorkspaceViewSettingsElement_datasetContext = new WeakMap();
-_UmbBlockGridTypeWorkspaceViewSettingsElement_instances = new WeakSet();
-_UmbBlockGridTypeWorkspaceViewSettingsElement_onRowSpanChange = function _UmbBlockGridTypeWorkspaceViewSettingsElement_onRowSpanChange(e) {
-    __classPrivateFieldGet(this, _UmbBlockGridTypeWorkspaceViewSettingsElement_datasetContext, "f")?.setPropertyValue('rowMinSpan', e.target.minValue);
-    __classPrivateFieldGet(this, _UmbBlockGridTypeWorkspaceViewSettingsElement_datasetContext, "f")?.setPropertyValue('rowMaxSpan', e.target.maxValue);
-};
-_UmbBlockGridTypeWorkspaceViewSettingsElement_renderSizeOptions = function _UmbBlockGridTypeWorkspaceViewSettingsElement_renderSizeOptions() {
-    if (this._showSizeOptions) {
-        return html `
+    #renderSizeOptions() {
+        if (this._showSizeOptions) {
+            return html `
 				<umb-property
 					label=${this.localize.term('blockEditor_allowedBlockColumns')}
 					alias="columnSpanOptions"
 					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridColumnSpan"
 					data-test-attr="${this._dataTypeGridColumns + ' '}"
 					.config=${[
-            {
-                alias: 'maxColumns',
-                value: this._dataTypeGridColumns,
-            },
-        ]}></umb-property>
+                {
+                    alias: 'maxColumns',
+                    value: this._dataTypeGridColumns,
+                },
+            ]}></umb-property>
 
 				<umb-property-layout label=${this.localize.term('blockEditor_allowedBlockRows')}>
 					<umb-input-number-range
 						slot="editor"
 						.minValue=${this._rowMinSpan}
 						.maxValue=${this._rowMaxSpan}
-						@change=${__classPrivateFieldGet(this, _UmbBlockGridTypeWorkspaceViewSettingsElement_instances, "m", _UmbBlockGridTypeWorkspaceViewSettingsElement_onRowSpanChange)}></umb-input-number-range>
+						@change=${this.#onRowSpanChange}></umb-input-number-range>
 				</umb-property-layout>
 			`;
-    }
-    else {
-        return html `<div id="showOptions">
+        }
+        else {
+            return html `<div id="showOptions">
 				<uui-button
 					label=${this.localize.term('blockEditor_showSizeOptions')}
 					look="placeholder"
 					@click=${() => (this._showSizeOptions = !this._showSizeOptions)}></uui-button>
 			</div>`;
+        }
     }
-};
-UmbBlockGridTypeWorkspaceViewSettingsElement.styles = [
-    UmbTextStyles,
-    css `
+    static { this.styles = [
+        UmbTextStyles,
+        css `
 			:host {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
@@ -152,7 +136,8 @@ UmbBlockGridTypeWorkspaceViewSettingsElement.styles = [
 				flex: 1;
 			}
 		`,
-];
+    ]; }
+};
 __decorate([
     state()
 ], UmbBlockGridTypeWorkspaceViewSettingsElement.prototype, "_showSizeOptions", void 0);

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

@@ -25,7 +25,7 @@ export const workspaceViews = [
         js: () => import('./block-grid-type-workspace-view-areas.element.js'),
         weight: 1000,
         meta: {
-            label: '#blockEditor_areas',
+            label: '#blockEditor_tabAreas',
             pathname: 'areas',
             icon: 'icon-grid',
         },
@@ -43,7 +43,7 @@ export const workspaceViews = [
         js: () => import('./block-grid-type-workspace-view-advanced.element.js'),
         weight: 1000,
         meta: {
-            label: '#blockEditor_tabAreas',
+            label: '#blockEditor_tabAdvanced',
             pathname: 'advanced',
             icon: 'icon-wrench',
         },