From a26d49e5b7b2aa01929ea4d0ac7dca544361cbb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 7 Nov 2024 15:45:45 +0100
Subject: [PATCH] clean up

---
 .../modal-routed/dashboard.element.ts         | 19 +------
 .../modal-routed/dashboard2.element.ts        |  4 +-
 .../modal/example-modal.element.ts            | 53 ++++++-------------
 3 files changed, 19 insertions(+), 57 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
index 6fcae676ba..9794dcb785 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
@@ -21,31 +21,16 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) {
 		},
 	];
 
-	/**
-	 *
-	 */
-	constructor() {
-		super();
-		console.log('modal element loaded');
-	}
-
 	override render() {
 		return html`
 			<div>
-				umb-example modal
+				Dashboard 1
 				<ul>
 					<li><a href="section/content/dashboard/example/tab1">Tab 1</a></li>
 					<li><a href="section/content/dashboard/example/tab2">Tab 2 (with modal)</a></li>
 				</ul>
 				<hr />
-				<umb-router-slot
-					.routes=${this._routes}
-					@init=${(event: UmbRouterSlotInitEvent) => {
-						console.log('tab routes init', event);
-					}}
-					@change=${(event: UmbRouterSlotChangeEvent) => {
-						console.log('modal routes change', event);
-					}}></umb-router-slot>
+				<umb-router-slot .routes=${this._routes}></umb-router-slot>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts
index aedf64759c..2a3f02e7bf 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts
@@ -17,9 +17,7 @@ export class UmbDashboard2Element extends UmbElementMixin(LitElement) {
 					Clicking this link will not load the slots inside the modal, however, going to the "Modal Dashboard", clicking
 					on tab 2 and opening the modal from there will work.
 				</p>
-				<a href="section/content/dashboard/example/tab2/modal/example-routed-modal/view/abc123/overview"
-					>Open Modal Route</a
-				>
+				<a href="section/content/dashboard/example/tab2/modal/example-routed-modal/view/abc123/">Open Modal Route</a>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
index 453935be03..29f70ed38e 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
@@ -6,48 +6,27 @@ import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from
 @customElement('umb-example-modal')
 export class UmbExampleModal extends UmbModalBaseElement {
 	@state()
-	private _routes: UmbRoute[] = [];
-
-	/**
-	 *
-	 */
-	constructor() {
-		super();
-		console.log('modal element loaded');
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this._routes = [
-			{
-				path: `overview`,
-				component: () => import('./steps/example-modal-step1.element.js'),
-			},
-			{
-				path: `details`,
-				component: () => import('./steps/example-modal-step2.element.js'),
-			},
-			// NL: There is a problem with this one, but there is more problems as the modal does not close when navigating the browser history.
-			/*{
-				path: '',
-				redirectTo: 'overview',
-			},*/
-		];
-	}
+	private _routes: UmbRoute[] = [
+		{
+			path: `overview`,
+			component: () => import('./steps/example-modal-step1.element.js'),
+		},
+		{
+			path: `details`,
+			component: () => import('./steps/example-modal-step2.element.js'),
+		},
+		{
+			path: '',
+			redirectTo: 'overview',
+		},
+	];
 
 	override render() {
 		return html`
 			<div>
-				umb-example modal
+				umb-example modal element
 				<hr />
-				<umb-router-slot
-					.routes=${this._routes}
-					@init=${(event: UmbRouterSlotInitEvent) => {
-						console.log('modal route init fired', event);
-					}}
-					@change=${(event: UmbRouterSlotChangeEvent) => {
-						console.log('modal routes change', event);
-					}}></umb-router-slot>
+				<umb-router-slot .routes=${this._routes}></umb-router-slot>
 			</div>
 		`;
 	}