register search modal

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

@@ -37,8 +37,8 @@ export class UmbModalHandler {
 		this.key = uuidv4();
 
 		if (modalAlias instanceof UmbModalToken) {
-			this.type = modalAlias.getDefaultConfig().type || this.type;
-			this.size = modalAlias.getDefaultConfig().size || this.size;
+			this.type = modalAlias.getDefaultConfig()?.type || this.type;
+			this.size = modalAlias.getDefaultConfig()?.size || this.size;
 		}
 
 		this.type = config?.type || this.type;

src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts

@@ -1,4 +1,4 @@
-import './layouts/search/modal-layout-search.element';
+import '../../src/backoffice/search/modals/search/search-modal.element';
 
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { BehaviorSubject } from 'rxjs';
@@ -27,8 +27,9 @@ export class UmbModalContext {
 		this.host = host;
 	}
 
+	// TODO: Remove this when the modal system is more flexible
 	public search(): UmbModalHandler {
-		const modalHandler = new UmbModalHandler('umb-modal-layout-search');
+		const modalHandler = new UmbModalHandler(this.host, 'Umb.Modal.Search');
 
 		//TODO START: This is a hack to get the search modal layout to look like i want it to.
 		//TODO: Remove from here to END when the modal system is more flexible
@@ -48,15 +49,15 @@ export class UmbModalContext {
 		dialog.style.padding = '0';
 		dialog.style.boxShadow = 'var(--uui-shadow-depth-5)';
 		dialog.style.borderRadius = '9px';
-		const search = document.createElement('umb-modal-layout-search');
+		const search = document.createElement('umb-search-modal');
 		dialog.appendChild(search);
 		requestAnimationFrame(() => {
 			dialog.showModal();
 		});
-		modalHandler.element = dialog as unknown as UUIModalDialogElement;
+		modalHandler.containerElement = dialog as unknown as UUIModalDialogElement;
 		//TODO END
 
-		modalHandler.element.addEventListener('close-end', () => this.#onCloseEnd(modalHandler));
+		modalHandler.containerElement.addEventListener('close-end', () => this.#onCloseEnd(modalHandler));
 
 		this.#modals.next([...this.#modals.getValue(), modalHandler]);
 		return modalHandler;

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

@@ -19,7 +19,7 @@ export class UmbModalToken<T = unknown> {
 	 *                used only for debugging purposes,
 	 *                it should but does not need to be unique
 	 */
-	constructor(protected alias: string, protected defaultConfig: UmbModalConfig, protected _desc?: string) {}
+	constructor(protected alias: string, protected defaultConfig?: UmbModalConfig, protected _desc?: string) {}
 
 	/**
 	 * This method must always return the unique alias of the token since that
@@ -31,7 +31,7 @@ export class UmbModalToken<T = unknown> {
 		return this.alias;
 	}
 
-	public getDefaultConfig(): UmbModalConfig {
+	public getDefaultConfig(): UmbModalConfig | undefined {
 		return this.defaultConfig;
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/search/modals/manifests.ts

@@ -0,0 +1,12 @@
+import type { ManifestModal } from '@umbraco-cms/extensions-registry';
+
+const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.Search',
+		name: 'Search Modal',
+		loader: () => import('./search/search-modal.element'),
+	},
+];
+
+export const manifests = [...modals];

src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/index.ts

@@ -0,0 +1,3 @@
+import { UmbModalToken } from 'libs/modal';
+
+export const UMB_SEARCH_MODAL_TOKEN = new UmbModalToken('Umb.Modal.Search');

src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts

@@ -14,8 +14,8 @@ export type SearchGroupItem = {
 	name: string;
 	items: Array<SearchItem>;
 };
-@customElement('umb-modal-layout-search')
-export class UmbModalLayoutSearchElement extends LitElement {
+@customElement('umb-search-modal')
+export class UmbSearchModalElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -308,10 +308,10 @@ export class UmbModalLayoutSearchElement extends LitElement {
 	];
 }
 
-export default UmbModalLayoutSearchElement;
+export default UmbSearchModalElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-modal-layout-search': UmbModalLayoutSearchElement;
+		'umb-search-modal': UmbSearchModalElement;
 	}
 }