more builder pattern for Modal Registration

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

@@ -10,8 +10,9 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 	implements UmbControllerInterface
 {
 	//#host: UmbControllerHostInterface;
+	#init;
 
-	#additionalPath: string | null;
+	#additionalPath?: string;
 	#uniquePaths: Map<string, string | undefined> = new Map();
 
 	#routeContext?: typeof UMB_ROUTE_CONTEXT_TOKEN.TYPE;
@@ -21,26 +22,27 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 		return undefined;
 	}
 
-	constructor(
-		host: UmbControllerHostElement,
-		alias: UmbModalToken<D, R> | string,
-		additionalPath: string | null = null,
-		uniquePaths?: Array<string> | null,
-		modalConfig?: UmbModalConfig
-	) {
+	constructor(host: UmbControllerHostElement, alias: UmbModalToken<D, R> | string, modalConfig?: UmbModalConfig) {
 		super(alias, null, modalConfig);
-		//this.#host = host;
+
+		this.#init = new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
+			this.#routeContext = _routeContext;
+			this._registererModal();
+		}).asPromise();
+	}
+
+	public addAdditionalPath(additionalPath: string) {
 		this.#additionalPath = additionalPath;
-		if (uniquePaths) {
-			uniquePaths.forEach((name) => {
+		return this;
+	}
+
+	public addUniquePaths(uniquePathNames: Array<string>) {
+		if (uniquePathNames) {
+			uniquePathNames.forEach((name) => {
 				this.#uniquePaths.set(name, undefined);
 			});
 		}
-
-		new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => {
-			this.#routeContext = _routeContext;
-			this._registererModal();
-		});
+		return this;
 	}
 
 	setUniquePathValue(identifier: string, value: string | undefined) {
@@ -53,7 +55,8 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 		this._registererModal();
 	}
 
-	private _registererModal() {
+	private async _registererModal() {
+		await this.#init;
 		if (!this.#routeContext) return;
 		if (this.#modalRegistration) {
 			this.#routeContext.unregisterModal(this.#modalRegistration);
@@ -63,7 +66,9 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 		const pathParts = Array.from(this.#uniquePaths.values());
 
 		// Check if there is any undefined values of unique map:
-		if (pathParts.some((value) => value === undefined)) return;
+		if (pathParts.some((value) => value === undefined)) {
+			return;
+		}
 
 		if (this.#additionalPath) {
 			// Add the configured part of the path:

src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-multi-url-picker/input-multi-url-picker.element.ts

@@ -122,10 +122,9 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this.urls.length > this.max
 		);
 
-		this.myModalRegistration = new UmbModalRouteRegistrationController(this, UMB_LINK_PICKER_MODAL, `:index`, [
-			'propertyAlias',
-			'variantId',
-		])
+		this.myModalRegistration = new UmbModalRouteRegistrationController(this, UMB_LINK_PICKER_MODAL)
+			.addAdditionalPath(`:index`)
+			.addUniquePaths(['propertyAlias', 'variantId'])
 			.onSetup((params) => {
 				// Get index:
 				const indexParam = params.index;

src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts

@@ -1,7 +1,9 @@
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { PropertyTypeResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
  *  @element document-type-workspace-view-edit-property
@@ -9,7 +11,7 @@ import { PropertyTypeResponseModelBaseModel } from '@umbraco-cms/backoffice/back
  *  @slot editor - Slot for rendering the Property Editor
  */
 @customElement('document-type-workspace-view-edit-property')
-export class UmbDocumentTypeWorkspacePropertyElement extends LitElement {
+export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 	/**
 	 * Property, the data object for the property.
 	 * @type {PropertyTypeResponseModelBaseModel}
@@ -29,6 +31,17 @@ export class UmbDocumentTypeWorkspacePropertyElement extends LitElement {
 	@property({ type: Boolean })
 	public inherited?: boolean;
 
+	#modalRegistration;
+
+	constructor() {
+		super();
+
+		this.#modalRegistration = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL)
+		.addUniquePaths(
+			['propertyId']
+		);
+	}
+
 	_firePartialUpdate(propertyName: string, value: string | number | boolean | null | undefined) {
 		const partialObject = {} as any;
 		partialObject[propertyName] = value;

src/Umbraco.Web.UI.Client/src/core/modal/stories/modal.mdx

@@ -109,10 +109,10 @@ descripe the addional features of the route Registration:
 
 		this.myModalRegistration = new UmbModalRouteRegistrationController(
 			this,
-			MY_MODAL_TOKEN,
-			`:index`,
-			['propertyAlias', 'variantId']
+			MY_MODAL_TOKEN
 		)
+		.addAdditionalPath(`:index`)
+		.addUniquePaths(['propertyAlias', 'variantId'])
 		.onSetup((params) => {
 			// Get item index:
 			const indexParam = params.index;