@umbraco-cms/backoffice 14.0.0--preview005-c6c57135 → 14.0.0--preview005-7ef2bd26

package/dist-cms/apps/app/app.element.js

@@ -18,7 +18,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _UmbAppElement_instances, _UmbAppElement_authContext, _UmbAppElement_umbIconRegistry, _UmbAppElement_uuiIconRegistry, _UmbAppElement_serverConnection, _UmbAppElement_setup, _UmbAppElement_setAuthStatus, _UmbAppElement_redirect, _UmbAppElement_isAuthorizedGuard, _UmbAppElement_errorPage;
 import { UmbAppContext } from './app.context.js';
 import { UmbServerConnection } from './server-connection.js';
-import { UmbAuthContext } from '../../shared/auth/index.js';
+import { UMB_STORAGE_REDIRECT_URL, UmbAuthContext } from '../../shared/auth/index.js';
 import { css, html, customElement, property } from '../../external/lit/index.js';
 import { UUIIconRegistryEssential } from '../../external/uui/index.js';
 import { UmbIconRegistry } from '../../shared/icon-registry/index.js';
@@ -46,7 +46,6 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
         /**
          * Bypass authentication.
          */
-        // TODO: this might not be the right solution
         this.bypassAuth = false;
         this._routes = [
             {
@@ -141,6 +140,14 @@ async function _UmbAppElement_setAuthStatus() {
     OpenAPI.WITH_CREDENTIALS = true;
 };
 _UmbAppElement_redirect = function _UmbAppElement_redirect() {
+    // If there is a ?code parameter in the url, then we are in the middle of the oauth flow
+    // and we need to complete the login (the authorization notifier will redirect after this is done
+    // essentially hitting this method again)
+    const queryParams = new URLSearchParams(window.location.search);
+    if (queryParams.has('code')) {
+        __classPrivateFieldGet(this, _UmbAppElement_authContext, "f")?.completeAuthorizationRequest();
+        return;
+    }
     switch (__classPrivateFieldGet(this, _UmbAppElement_serverConnection, "f")?.getStatus()) {
         case RuntimeLevelModel.INSTALL:
             history.replaceState(null, '', 'install');
@@ -153,16 +160,14 @@ _UmbAppElement_redirect = function _UmbAppElement_redirect() {
             break;
         case RuntimeLevelModel.RUN: {
             const pathname = pathWithoutBasePath({ start: true, end: false });
-            // If we are on the installer or upgrade page, redirect to the root
-            // but if not, keep the current path but replace state anyway to initialize the router
-            let currentRoute = location.href;
-            const savedRoute = sessionStorage.getItem('umb:auth:redirect');
-            if (savedRoute) {
-                sessionStorage.removeItem('umb:auth:redirect');
-                currentRoute = savedRoute;
+            // If we are on installer or upgrade page, redirect to the root since we are in the RUN state
+            if (pathname === '/install' || pathname === '/upgrade') {
+                history.replaceState(null, '', '/');
+                break;
             }
-            const finalPath = pathname === '/install' || pathname === '/upgrade' ? '/' : currentRoute;
-            history.replaceState(null, '', finalPath);
+            // Keep the current path but replace state anyway to initialize the router
+            // because the router will not initialize a wildcard route by itself
+            history.replaceState(null, '', location.href);
             break;
         }
         default:
@@ -179,10 +184,9 @@ _UmbAppElement_isAuthorizedGuard = function _UmbAppElement_isAuthorizedGuard() {
             return true;
         }
         // Save location.href so we can redirect to it after login
-        window.sessionStorage.setItem('umb:auth:redirect', location.href);
+        window.sessionStorage.setItem(UMB_STORAGE_REDIRECT_URL, location.href);
         // Make a request to the auth server to start the auth flow
-        // TODO: find better name for this method
-        __classPrivateFieldGet(this, _UmbAppElement_authContext, "f").login();
+        __classPrivateFieldGet(this, _UmbAppElement_authContext, "f").makeAuthorizationRequest();
         // Return false to prevent the route from being rendered
         return false;
     };
@@ -219,7 +223,7 @@ __decorate([
 ], UmbAppElement.prototype, "serverUrl", void 0);
 __decorate([
     property({ type: String })
-    // TODO: get from server config
+    // TODO: get from base element or maybe move to UmbAuthContext.#getRedirectUrl since it is only used there
 ], UmbAppElement.prototype, "backofficePath", void 0);
 __decorate([
     property({ type: Boolean })

package/dist-cms/custom-elements.json

@@ -504,6 +504,36 @@
         }
       ]
     },
+    {
+      "name": "umb-property-editor-ui-block-grid-group-configuration",
+      "path": "./../src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts",
+      "attributes": [
+        {
+          "name": "value",
+          "type": "UmbBlockGridGroupType[]"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "type": "UmbBlockGridGroupType[]"
+        },
+        {
+          "name": "config"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ],
+      "events": [
+        {
+          "name": "property-value-change"
+        }
+      ]
+    },
     {
       "name": "umb-property-editor-ui-block-grid-layout-stylesheet",
       "path": "./../src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts",
@@ -540,8 +570,7 @@
       "properties": [
         {
           "name": "value",
-          "type": "UmbBlockTypeBaseModel[]",
-          "default": "[]"
+          "type": "UmbBlockTypeWithGroupKey[]"
         },
         {
           "name": "config"
@@ -549,7 +578,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UmbTextStyles\"]"
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },
@@ -722,7 +751,7 @@
       "path": "./../src/packages/block/block-type/components/input-block-type/input-block-type.element.ts",
       "attributes": [
         {
-          "name": "entity-type",
+          "name": "workspacePath",
           "type": "string | undefined"
         }
       ],
@@ -732,8 +761,8 @@
           "type": "BlockType[]"
         },
         {
-          "name": "entityType",
-          "attribute": "entity-type",
+          "name": "workspacePath",
+          "attribute": "workspacePath",
           "type": "string | undefined"
         },
         {
@@ -741,6 +770,11 @@
           "type": "array",
           "default": "[null]"
         }
+      ],
+      "events": [
+        {
+          "name": "create"
+        }
       ]
     },
     {

package/dist-cms/mocks/data/data-type/data-type.data.js

@@ -692,6 +692,13 @@ export const data = [
                         icon: 'icon-book-alt',
                         groupKey: 'demo-block-group-id',
                     },
+                    {
+                        label: 'Test broken group key',
+                        contentElementTypeKey: 'test-block-id',
+                        editorSize: 'medium',
+                        icon: 'icon-war',
+                        groupKey: 'group-id-that-does-not-exist',
+                    },
                 ],
             },
         ],

package/dist-cms/mocks/data/document-type/document-type.data.js

@@ -1474,4 +1474,30 @@ export const data = [
         properties: [],
         containers: [],
     },
+    {
+        allowedTemplateIds: [],
+        defaultTemplateId: null,
+        id: 'test-block-id',
+        alias: 'testBlock',
+        name: 'Test broken group key',
+        description: null,
+        icon: 'icon-war',
+        allowedAsRoot: true,
+        variesByCulture: false,
+        variesBySegment: false,
+        isElement: true,
+        hasChildren: false,
+        isContainer: false,
+        parentId: null,
+        isFolder: false,
+        allowedContentTypes: [],
+        compositions: [],
+        cleanup: {
+            preventCleanup: false,
+            keepAllVersionsNewerThanDays: null,
+            keepLatestVersionPerDayForDays: null,
+        },
+        properties: [],
+        containers: [],
+    },
 ];

package/dist-cms/packages/block/block/workspace/block-workspace.context.js

@@ -19,7 +19,6 @@ import { buildUdi } from '../../../../shared/utils/index.js';
 import { UMB_MODAL_CONTEXT } from '../../../core/modal/index.js';
 export class UmbBlockWorkspaceContext extends UmbEditableWorkspaceContextBase {
     constructor(host, workspaceArgs) {
-        // TODO: We don't need a repo here, so maybe we should not require this of the UmbEditableWorkspaceContextBase
         super(host, workspaceArgs.manifest.alias);
         _UmbBlockWorkspaceContext_instances.add(this);
         // Just for context token safety:

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

@@ -0,0 +1,2 @@
+import type { ManifestPropertyEditorUi } from '../../../../core/extension-registry/index.js';
+export declare const manifest: ManifestPropertyEditorUi;

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

@@ -0,0 +1,11 @@
+export const manifest = {
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration',
+    name: 'Block Grid Group Configuration Property Editor UI',
+    js: () => import('./property-editor-ui-block-grid-group-configuration.element.js'),
+    meta: {
+        label: '',
+        icon: 'icon-box-alt',
+        group: 'common',
+    },
+};

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

@@ -0,0 +1,19 @@
+import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import type { UmbBlockGridGroupType } from '../../../index.js';
+export declare class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    private _value;
+    get value(): Array<UmbBlockGridGroupType>;
+    set value(value: Array<UmbBlockGridGroupType>);
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("../../../../../external/lit/index.js").CSSResult[];
+}
+export default UmbPropertyEditorUIBlockGridGroupConfigurationElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-block-grid-group-configuration': UmbPropertyEditorUIBlockGridGroupConfigurationElement;
+    }
+}

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

@@ -0,0 +1,61 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 _UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances, _UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup;
+import { html, customElement, property, css } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
+import { UmbId } from '../../../../core/id/index.js';
+let UmbPropertyEditorUIBlockGridGroupConfigurationElement = class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances.add(this);
+        this._value = [];
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value || [];
+    }
+    set config(config) { }
+    render() {
+        return html `
+			<uui-button label=${this.localize.term('blockEditor_addBlockGroup')} look="placeholder" @click=${__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup)}>
+				${this.localize.term('blockEditor_addBlockGroup')}
+			</uui-button>
+		`;
+    }
+};
+_UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances = new WeakSet();
+_UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup = function _UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup() {
+    this.value = [...this._value, { name: 'Unnamed group', key: UmbId.new() }];
+    this.dispatchEvent(new CustomEvent('property-value-change'));
+};
+UmbPropertyEditorUIBlockGridGroupConfigurationElement.styles = [
+    UmbTextStyles,
+    css `
+			uui-button {
+				display: block;
+			}
+		`,
+];
+__decorate([
+    property({ type: Array })
+], UmbPropertyEditorUIBlockGridGroupConfigurationElement.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUIBlockGridGroupConfigurationElement.prototype, "config", null);
+UmbPropertyEditorUIBlockGridGroupConfigurationElement = __decorate([
+    customElement('umb-property-editor-ui-block-grid-group-configuration')
+], UmbPropertyEditorUIBlockGridGroupConfigurationElement);
+export { UmbPropertyEditorUIBlockGridGroupConfigurationElement };
+export default UmbPropertyEditorUIBlockGridGroupConfigurationElement;

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

@@ -1,14 +1,21 @@
-import type { UmbBlockTypeBaseModel } from '../../../block-type/index.js';
+import type { UmbBlockTypeWithGroupKey } from '../../../block-type/index.js';
 import '../../../block-type/components/input-block-type/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
-import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import { type UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 /**
  * @element umb-property-editor-ui-block-grid-type-configuration
  */
 export declare class UmbPropertyEditorUIBlockGridTypeConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-    value: UmbBlockTypeBaseModel[];
+    #private;
+    private _value;
+    get value(): Array<UmbBlockTypeWithGroupKey>;
+    set value(value: Array<UmbBlockTypeWithGroupKey>);
     config?: UmbPropertyEditorConfigCollection;
+    private _blockGroups;
+    private _mappedValuesAndGroups;
+    private _workspacePath?;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];
 }

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

@@ -4,34 +4,153 @@ 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 _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput;
 import '../../../block-type/components/input-block-type/index.js';
-import { html, customElement, property } from '../../../../../external/lit/index.js';
+import { html, customElement, property, state, repeat, nothing, css } from '../../../../../external/lit/index.js';
+import { UmbPropertyValueChangeEvent, } from '../../../../core/property-editor/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UMB_BLOCK_GRID_TYPE, } from '../../../index.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 /**
  * @element umb-property-editor-ui-block-grid-type-configuration
  */
 let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEditorUIBlockGridTypeConfigurationElement extends UmbLitElement {
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value ?? [];
+    }
     constructor() {
-        super(...arguments);
-        this.value = [];
+        super();
+        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances.add(this);
+        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext.set(this, void 0);
+        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration.set(this, void 0);
+        this._value = [];
+        this._blockGroups = [];
+        this._mappedValuesAndGroups = [];
+        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => {
+            __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, instance, "f");
+            __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties).call(this);
+        });
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.destroy();
+        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(UMB_BLOCK_GRID_TYPE)
+            .onSetup(() => {
+            return { data: { entityType: UMB_BLOCK_GRID_TYPE, preset: {} }, modal: { size: 'large' } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            const newpath = routeBuilder({});
+            this._workspacePath = newpath;
+        }), "f");
     }
     render() {
-        return html `<umb-input-block-type
-			entity-type="block-grid-type"
-			.value=${this.value}
-			@change=${(e) => {
-            this.value = e.target.value;
-        }}></umb-input-block-type>`;
+        return html `${repeat(this._mappedValuesAndGroups, (group) => group.key, (group) => html `${group.key ? __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput).call(this, group.key, group.name) : nothing}
+					<umb-input-block-type
+						.value=${group.blocks}
+						.workspacePath=${this._workspacePath}
+						@create=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate).call(this, e, group.key ?? null)}
+						@change=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange).call(this, e, group.key)}></umb-input-block-type>`)}`;
     }
 };
-UmbPropertyEditorUIBlockGridTypeConfigurationElement.styles = [UmbTextStyles];
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext = new WeakMap();
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration = new WeakMap();
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances = new WeakSet();
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties = async function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties() {
+    if (!__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f"))
+        return;
+    this.observe(await __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f").propertyValueByAlias('blockGroups'), (value) => {
+        this._blockGroups = value ?? [];
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups).call(this);
+    });
+    this.observe(await __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f").propertyValueByAlias('blocks'), () => {
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups).call(this);
+    });
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups() {
+    // What if a block is in a group that does not exist in the block groups? Should it be removed? (Right now they will never be rendered)
+    const valuesWithNoGroup = this._value.filter((value) => !value.groupKey);
+    const valuesWithGroup = this._blockGroups.map((group) => {
+        return { name: group.name, key: group.key, blocks: this._value.filter((value) => value.groupKey === group.key) };
+    });
+    this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup];
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange(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());
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate(e, groupKey) {
+    const selectedElementType = e.detail.contentElementTypeKey;
+    if (selectedElementType) {
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.open({}, 'create/' + selectedElementType + '/' + groupKey);
+    }
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup(groupKey) {
+    __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f")?.setPropertyValue('blockGroups', this._blockGroups.filter((group) => group.key !== groupKey));
+    // Should blocks that belonged to the removed group be deleted as well?
+    this.value = this._value.filter((block) => block.groupKey !== groupKey);
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName(e, groupKey) {
+    const groupName = e.target.value;
+    __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f")?.setPropertyValue('blockGroups', this._blockGroups.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)));
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput(groupKey, groupName) {
+    return html `<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)}>
+				<uui-icon name="icon-trash"></uui-icon>
+			</uui-button>
+		</uui-input>`;
+};
+UmbPropertyEditorUIBlockGridTypeConfigurationElement.styles = [
+    UmbTextStyles,
+    css `
+			uui-input {
+				margin-top: var(--uui-size-6);
+				margin-bottom: var(--uui-size-4);
+			}
+
+			uui-input:not(:hover, :focus) {
+				border: 1px solid transparent;
+			}
+			uui-input:not(:hover, :focus) uui-button {
+				opacity: 0;
+			}
+		`,
+];
 __decorate([
     property({ attribute: false })
-], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "value", void 0);
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "value", null);
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "config", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "_blockGroups", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "_mappedValuesAndGroups", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "_workspacePath", void 0);
 UmbPropertyEditorUIBlockGridTypeConfigurationElement = __decorate([
     customElement('umb-property-editor-ui-block-grid-type-configuration')
 ], UmbPropertyEditorUIBlockGridTypeConfigurationElement);

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

@@ -2,4 +2,11 @@ import { manifest as blockGridEditor } from './block-grid-editor/manifests.js';
 import { manifest as blockGridLayoutStylesheet } from './block-grid-layout-stylesheet/manifests.js';
 import { manifest as blockGridTypeConfiguration } from './block-grid-type-configuration/manifests.js';
 import { manifest as blockGridColumnSpan } from './block-grid-column-span/manifests.js';
-export const manifests = [blockGridTypeConfiguration, blockGridEditor, blockGridLayoutStylesheet, blockGridColumnSpan];
+import { manifest as blockGridGroupConfiguration } from './block-grid-group-configuration/manifests.js';
+export const manifests = [
+    blockGridTypeConfiguration,
+    blockGridEditor,
+    blockGridLayoutStylesheet,
+    blockGridColumnSpan,
+    blockGridGroupConfiguration,
+];

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

@@ -1,4 +1,5 @@
-import type { UmbBlockTypeBaseModel } from '../block-type/index.js';
+import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../block-type/index.js';
+export declare const UMB_BLOCK_GRID_TYPE = "block-grid-type";
 export interface UmbBlockGridType extends UmbBlockTypeBaseModel {
     columnSpanOptions: Array<number>;
     allowAtRoot: boolean;
@@ -8,5 +9,11 @@ export interface UmbBlockGridType extends UmbBlockTypeBaseModel {
     thumbnail?: string;
     areaGridColumns?: number;
     areas: Array<any>;
-    groupKey: null | string;
+}
+export interface UmbBlockGridGroupType {
+    name: string;
+    key: string;
+}
+export interface UmbBlockGridGroupTypeConfiguration extends Partial<UmbBlockGridGroupType> {
+    blocks: Array<UmbBlockTypeWithGroupKey>;
 }

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

@@ -1 +1 @@
-export {};
+export const UMB_BLOCK_GRID_TYPE = 'block-grid-type';

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

@@ -7,6 +7,9 @@ import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
  * @element umb-property-editor-ui-block-list-type-configuration
  */
 export declare class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    private _workspacePath?;
+    constructor();
     value: UmbBlockTypeBaseModel[];
     config?: UmbPropertyEditorConfigCollection;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -4,28 +4,66 @@ 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 _UmbPropertyEditorUIBlockListBlockConfigurationElement_instances, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, _UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate;
 import '../../../block-type/components/input-block-type/index.js';
-import { html, customElement, property } from '../../../../../external/lit/index.js';
+import { UMB_BLOCK_LIST_TYPE } from '../../types.js';
+import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 /**
  * @element umb-property-editor-ui-block-list-type-configuration
  */
 let UmbPropertyEditorUIBlockListBlockConfigurationElement = class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement {
     constructor() {
-        super(...arguments);
+        super();
+        _UmbPropertyEditorUIBlockListBlockConfigurationElement_instances.add(this);
+        _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration.set(this, void 0);
         this.value = [];
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.destroy();
+        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(UMB_BLOCK_LIST_TYPE)
+            .onSetup(() => {
+            return { data: { entityType: UMB_BLOCK_LIST_TYPE, preset: {} }, modal: { size: 'large' } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            const newpath = routeBuilder({});
+            this._workspacePath = newpath;
+        }), "f");
     }
     render() {
         return html `<umb-input-block-type
-			entity-type="block-list-type"
 			.value=${this.value}
+			.workspacePath=${this._workspacePath}
+			@create=${__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate)}
 			@change=${(e) => {
             this.value = e.target.value;
         }}></umb-input-block-type>`;
     }
 };
+_UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration = new WeakMap();
+_UmbPropertyEditorUIBlockListBlockConfigurationElement_instances = new WeakSet();
+_UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate = function _UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate(e) {
+    const selectedElementType = e.detail.contentElementTypeKey;
+    if (selectedElementType) {
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.open({}, 'create/' + selectedElementType + '/null');
+    }
+};
 UmbPropertyEditorUIBlockListBlockConfigurationElement.styles = [UmbTextStyles];
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockListBlockConfigurationElement.prototype, "_workspacePath", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIBlockListBlockConfigurationElement.prototype, "value", void 0);

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

@@ -1,5 +1,6 @@
 import type { UmbBlockTypeBaseModel } from '../block-type/index.js';
 import type { UmbBlockLayoutBaseModel } from '../index.js';
+export declare const UMB_BLOCK_LIST_TYPE = "block-list-type";
 export interface UmbBlockListTypeModel extends UmbBlockTypeBaseModel {
 }
 export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {