working with router-slot fix

src/Umbraco.Web.UI.Client/libs/controller/controller-host.mixin.ts

@@ -48,7 +48,9 @@ export const UmbControllerHostMixin = <T extends HTMLElementConstructor>(superCl
 
 			this.#controllers.push(ctrl);
 			if (this.#attached) {
-				ctrl.hostConnected();
+				// If a controller is created on a already attached element, then it will be added directly. This might not be optimal. As the controller it self has not finished its constructor method jet. therefor i postpone the call:
+				Promise.resolve().then(() => ctrl.hostConnected());
+				//ctrl.hostConnected();
 			}
 		}
 

src/Umbraco.Web.UI.Client/libs/modal/modal-handler.ts

@@ -13,7 +13,7 @@ import { UmbModalToken } from './token/modal-token';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
+import { UmbController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry';
 
 /**
@@ -40,12 +40,13 @@ type OptionalSubmitArgumentIfUndefined<T> = T extends undefined
 			submit: (arg: T) => void;
 	  };
 
-//TODO consider splitting this into two separate handlers
+// TODO: consider splitting this into two separate handlers
-export class UmbModalHandlerClass<ModalData extends object = object, ModalResult = unknown> {
+// TODO: Rename to become a controller.
+export class UmbModalHandlerClass<ModalData extends object = object, ModalResult = unknown> extends UmbController {
 	private _submitPromise: Promise<ModalResult>;
 	private _submitResolver?: (value: ModalResult) => void;
 	private _submitRejecter?: () => void;
-	#host: UmbControllerHostElement;
+	private _parentRouter: IRouterSlot | null;
 
 	public modalElement: UUIModalDialogElement | UUIModalSidebarElement;
 	#modalRouterElement: UmbRouterSlotElement = new UmbRouterSlotElement();
@@ -57,6 +58,8 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 	public type: UmbModalType = 'dialog';
 	public size: UUIModalSidebarSize = 'small';
 
+	private modalAlias: string; //TEMP... TODO: Remove this.
+
 	constructor(
 		host: UmbControllerHostElement,
 		router: IRouterSlot | null,
@@ -64,8 +67,10 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 		data?: ModalData,
 		config?: UmbModalConfig
 	) {
-		this.#host = host;
+		super(host);
+		this._parentRouter = router;
 		this.key = config?.key || UmbId.new();
+		this.modalAlias = modalAlias.toString();
 
 		if (modalAlias instanceof UmbModalToken) {
 			this.type = modalAlias.getDefaultConfig()?.type || this.type;
@@ -82,13 +87,25 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 		});
 
 		this.modalElement = this.#createContainerElement();
-		this.modalElement.appendChild(this.#modalRouterElement);
+		/**
+		 *
+		 * Maybe we could just get a Modal Router Slot. But it needs to have the ability to actually inject via slot. so the modal inner element can be within.
+		 *
+		 */
 		if (router) {
 			this.#modalRouterElement.parent = router;
 		}
+		this.modalElement.appendChild(this.#modalRouterElement);
 		this.#observeModal(modalAlias.toString(), data);
 	}
 
+	public hostConnected() {
+		// Not much to do now..?
+	}
+	public hostDisconnected() {
+		// Not much to do now..?
+	}
+
 	#createContainerElement() {
 		return this.type === 'sidebar' ? this.#createSidebarElement() : this.#createDialogElement();
 	}
@@ -139,24 +156,33 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 	 Now when the element is an observable it makes it more complex because this host needs to subscribe to updates to the element, instead of just having a reference to it.
 	 If we find a better generic solution to communicate between the modal and the implementor, then we can remove the element as part of the modalHandler. */
 	#observeModal(modalAlias: string, data?: ModalData) {
-		new UmbObserverController(
+		if (this.host) {
-			this.#host,
+			new UmbObserverController(
-			umbExtensionsRegistry.getByTypeAndAlias('modal', modalAlias),
+				this.host,
-			async (manifest) => {
+				umbExtensionsRegistry.getByTypeAndAlias('modal', modalAlias),
-				if (manifest) {
+				async (manifest) => {
-					const innerElement = await this.#createInnerElement(manifest, data);
+					if (manifest) {
-					if (innerElement) {
+						const innerElement = await this.#createInnerElement(manifest, data);
-						this.#appendInnerElement(innerElement);
+						if (innerElement) {
-						return;
+							this.#appendInnerElement(innerElement);
+							return;
+						}
 					}
+					this.#removeInnerElement();
 				}
-				this.#removeInnerElement();
+			);
-			}
+		}
-		);
 	}
 
 	#appendInnerElement(element: HTMLElement) {
 		this.#modalRouterElement.appendChild(element);
+		/*this.#modalRouterElement.routes = [
+			{
+				path: '',
+				component: element,
+			},
+		];
+		this.#modalRouterElement.render();*/
 		this.#innerElement.next(element);
 	}
 
@@ -167,4 +193,9 @@ export class UmbModalHandlerClass<ModalData extends object = object, ModalResult
 			this.#innerElement.next(undefined);
 		}
 	}
+
+	public destroy() {
+		super.destroy();
+		// TODO: Make sure to clean up..
+	}
 }

src/Umbraco.Web.UI.Client/libs/modal/modal-route-registration.ts

@@ -115,6 +115,7 @@ export class UmbModalRouteRegistration<UmbModalTokenData extends object = object
 
 		const modalData = this.#onSetupCallback ? this.#onSetupCallback(params) : undefined;
 		if (modalData !== false) {
+			console.log('routeSetup has router:', router);
 			this.#modalHandler = modalContext.open(this.#modalAlias, modalData, this.modalConfig, router);
 			this.#modalHandler.onSubmit().then(this.#onSubmit, this.#onReject);
 			return this.#modalHandler;

src/Umbraco.Web.UI.Client/package.json

@@ -68,7 +68,7 @@
 		"lit": "^2.7.0",
 		"lodash-es": "4.17.21",
 		"monaco-editor": "^0.36.1",
-		"router-slot": "file:router-slot-2.0.0.tgz",
+		"router-slot": "file:router-slot-2.0.1.tgz",
 		"rxjs": "^7.8.0",
 		"uuid": "^9.0.0"
 	},

src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-data-type/input-data-type.element.ts

@@ -46,6 +46,7 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) {
 
 		new UmbModalRouteRegistrationController(this, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL)
 			.onSetup(() => {
+				console.log('registration setup.');
 				return {
 					selection: [this._value.toString()],
 					submitLabel: 'Submit',

src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts

@@ -59,7 +59,6 @@ export class UmbRouterSlotElement extends UmbLitElement {
 		this.#modalRouter.parent = this.#router;
 		this.#modalRouter.style.display = 'none';
 		this.#router.addEventListener('changestate', this._updateRouterPath.bind(this));
-		//this.#router.appendChild(this.#modalRouter);
 		this.#router.appendChild(document.createElement('slot'));
 	}