From 63f1245dfdcf5dcad3ca581281f8027e9a7f15ec Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 29 May 2024 11:28:01 +0200
Subject: [PATCH] add protected methods to react on api or element changes

---
 .../core/collection/collection.element.ts     | 22 ++++-------
 ...nsion-element-and-api-slot-element-base.ts | 39 +++++++++++++++----
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts
index 74b7861774..9bd9ec846f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts
@@ -1,8 +1,8 @@
-import type { UmbCollectionConfiguration, UmbCollectionContext } from './types.js';
+import type { UmbCollectionConfiguration } from './types.js';
 import { customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbExtensionElementAndApiSlotElementBase } from '@umbraco-cms/backoffice/extension-registry';
 import type { ManifestCollection } from '@umbraco-cms/backoffice/extension-registry';
-import type { UmbExtensionElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
 @customElement('umb-collection')
 export class UmbCollectionElement extends UmbExtensionElementAndApiSlotElementBase<ManifestCollection> {
@@ -24,25 +24,17 @@ export class UmbCollectionElement extends UmbExtensionElementAndApiSlotElementBa
 	}
 	#config?: UmbCollectionConfiguration;
 
+	protected apiChanged(api: UmbApi | undefined): void {
+		super.apiChanged(api);
+		this.#setConfig();
+	}
+
 	#setConfig() {
 		if (!this.#config || !this._api) return;
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		this._api.setConfig(this.#config);
 	}
-
-	protected extensionChanged = (
-		isPermitted: boolean,
-		controller: UmbExtensionElementAndApiInitializer<ManifestCollection>,
-	) => {
-		// TODO: [v15] Once `UmbCollectionContext` extends `UmbApi`, then we can remove this type casting. [LK]
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		this._api = isPermitted ? (controller.api as unknown as UmbCollectionContext) : undefined;
-		this._element = isPermitted ? controller.component : undefined;
-		this.requestUpdate('_element');
-		this.#setConfig();
-	};
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/extension-element-and-api-slot-element-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/extension-element-and-api-slot-element-base.ts
index d7b4be98b9..cfbf18d0ae 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/extension-element-and-api-slot-element-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/extension-element-and-api-slot-element-base.ts
@@ -52,21 +52,44 @@ export abstract class UmbExtensionElementAndApiSlotElementBase<
 			umbExtensionsRegistry,
 			this._alias,
 			[this],
-			this.extensionChanged,
+			this.#extensionChanged,
 			this.getDefaultElementName(),
 		);
 		this.#extensionController.elementProps = this.#props;
 	}
 
-	protected extensionChanged = (
-		isPermitted: boolean,
-		controller: UmbExtensionElementAndApiInitializer<ManifestType>,
-	) => {
-		this._api = isPermitted ? controller.api : undefined;
-		this._element = isPermitted ? controller.component : undefined;
-		this.requestUpdate('_element');
+	#extensionChanged = (isPermitted: boolean, controller: UmbExtensionElementAndApiInitializer<ManifestType>) => {
+		this.apiChanged(isPermitted ? controller.api : undefined);
+		this.elementChanged(isPermitted ? controller.component : undefined);
 	};
 
+	/**
+	 * Called when the API is changed.
+	 * @protected
+	 * @param {(ManifestType['API_TYPE'] | undefined)} api
+	 * @memberof UmbExtensionElementAndApiSlotElementBase
+	 */
+	protected apiChanged(api: ManifestType['API_TYPE'] | undefined) {
+		this._api = api;
+	}
+
+	/**
+	 * Called when the element is changed.
+	 * @protected
+	 * @param {(ManifestType['ELEMENT_TYPE'] | undefined)} element
+	 * @memberof UmbExtensionElementAndApiSlotElementBase
+	 */
+	protected elementChanged(element: ManifestType['ELEMENT_TYPE'] | undefined) {
+		this._element = element;
+		this.requestUpdate('_element');
+	}
+
+	/**
+	 * Render the element.
+	 * @protected
+	 * @return {*}
+	 * @memberof UmbExtensionElementAndApiSlotElementBase
+	 */
 	protected render() {
 		return this._element;
 	}