From ef942a9ee06cd7ca3d7ea2adc0d98a617a0e06d4 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:31:07 +0100
Subject: [PATCH] move grouping methods

---
 ...i-block-grid-type-configuration.element.ts | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
index 5a6c73b111..e7355d9e4b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
@@ -2,7 +2,10 @@ import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../.
 import '../../../block-type/components/input-block-type/index.js';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { html, customElement, property, state, css, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import {
+	UmbPropertyEditorConfigCollection,
+	UmbPropertyValueChangeEvent,
+} from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_PROPERTY_DATASET_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
@@ -80,7 +83,25 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 
 	#deleteItem(e: CustomEvent) {
 		this.value = this._value.filter((block) => block.contentElementTypeKey !== e.detail.contentElementTypeKey);
-		this.dispatchEvent(new CustomEvent('property-value-change'));
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
+
+	#deleteGroup(groupKey: string) {
+		this.#datasetContext?.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);
+	}
+
+	#changeGroupName(e: UUIInputEvent, groupKey: string) {
+		const groupName = e.target.value as string;
+		this.#datasetContext?.setPropertyValue(
+			'blockGroups',
+			this._blockGroups.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)),
+		);
 	}
 
 	render() {
@@ -96,24 +117,6 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 		)}`;
 	}
 
-	#changeGroupName(e: UUIInputEvent, groupKey: string) {
-		const groupName = e.target.value as string;
-		this.#datasetContext?.setPropertyValue(
-			'blockGroups',
-			this._blockGroups.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)),
-		);
-	}
-
-	#deleteGroup(groupKey: string) {
-		this.#datasetContext?.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);
-	}
-
 	#renderGroupInput(groupKey: string, groupName?: string) {
 		return html`<uui-input
 			auto-width