From 569287035d2558521bd7b696c61d561e9e1f6c1b Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 21 Sep 2022 13:49:29 +0200
Subject: [PATCH 01/28] init

---
 src/Umbraco.Web.UI.Client/schemas/api/api.yml |  59 ++++++++++
 .../schemas/generated-schema.ts               |  60 +++++++++++
 .../telemetry/dashboard-telemetry.element.ts  | 102 +++++++++++++++++-
 .../src/core/api/fetcher.ts                   |   3 +
 .../src/core/models/index.ts                  |   1 +
 .../src/mocks/browser-handlers.ts             |   2 +
 .../src/mocks/domains/telemetry.handlers.ts   |  33 ++++++
 .../src/mocks/e2e-handlers.ts                 |   2 +
 .../src/temp-internal-manifests.ts            |  13 +++
 .../temp-schema-generator/api.ts              |   1 +
 .../temp-schema-generator/telemetry.ts        |  46 ++++++++
 11 files changed, 319 insertions(+), 3 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
 create mode 100644 src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts

diff --git a/src/Umbraco.Web.UI.Client/schemas/api/api.yml b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
index 3c4e98e020..bd68978972 100644
--- a/src/Umbraco.Web.UI.Client/schemas/api/api.yml
+++ b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
@@ -229,6 +229,58 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/ProblemDetails'
+  /telemetry/ConsentLevel:
+    get:
+      operationId: GetConsentLevel
+      responses:
+        '200':
+          description: 200 response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ConsentLevelSettings'
+        default:
+          description: default response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
+    post:
+      operationId: PostConsentLevel
+      parameters: []
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ConsentLevelSettings'
+        required: true
+      responses:
+        '201':
+          description: 201 response
+        '400':
+          description: 400 response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
+  /telemetry/ConsentLevels:
+    get:
+      operationId: ConsentLevels
+      responses:
+        '200':
+          description: 200 response
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: string
+        default:
+          description: default response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
 components:
   schemas:
     ConsentLevel:
@@ -903,3 +955,10 @@ components:
             type: string
       required:
         - sections
+    ConsentLevelSettings:
+      type: object
+      properties:
+        telemetryLevel:
+          type: string
+      required:
+        - telemetryLevel
diff --git a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
index fdc1e66117..685d8676ec 100644
--- a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
+++ b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
@@ -46,6 +46,13 @@ export interface paths {
   "/user/sections": {
     get: operations["GetAllowedSections"];
   };
+  "/telemetry/ConsentLevel": {
+    get: operations["GetConsentLevel"];
+    post: operations["PostConsentLevel"];
+  };
+  "/telemetry/ConsentLevels": {
+    get: operations["ConsentLevels"];
+  };
 }
 
 export interface components {
@@ -314,6 +321,9 @@ export interface components {
     AllowedSectionsResponse: {
       sections: string[];
     };
+    ConsentLevelSettings: {
+      telemetryLevel: string;
+    };
   };
 }
 
@@ -541,6 +551,56 @@ export interface operations {
       };
     };
   };
+  GetConsentLevel: {
+    responses: {
+      /** 200 response */
+      200: {
+        content: {
+          "application/json": components["schemas"]["ConsentLevelSettings"];
+        };
+      };
+      /** default response */
+      default: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+  };
+  PostConsentLevel: {
+    parameters: {};
+    responses: {
+      /** 201 response */
+      201: unknown;
+      /** 400 response */
+      400: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["ConsentLevelSettings"];
+      };
+    };
+  };
+  ConsentLevels: {
+    responses: {
+      /** 200 response */
+      200: {
+        content: {
+          "application/json": string[];
+        };
+      };
+      /** default response */
+      default: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+  };
 }
 
 export interface external {}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
index ef57dea972..6903c3f625 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -1,15 +1,111 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+import { customElement, property, state } from 'lit/decorators.js';
+
+import type { TelemetryModel } from '../../../core/models';
+import { getConsentLevel, getConsentLevels } from '../../../core/api/fetcher';
+
+export type SettingOption = 'Minimal' | 'Basic' | 'Detailed';
 
 @customElement('umb-dashboard-telemetry')
 export class UmbDashboardTelemetryElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			.italic {
+				font-style: italic;
+			}
+		`,
+	];
+
+	@state()
+	private _telemetryLevels: TelemetryModel[] = [
+		{ level: 'Minimal', description: 'We will only send an anonymized site ID to let us know that the site exists.' },
+		{ level: 'Basic', description: 'We will send an anonymized site ID, Umbraco version, and packages installed.' },
+		{
+			level: 'Detailed',
+			description: `We will send:<ul>
+			<li>Anonymized site ID, Umbraco version, and packages installed.</li>
+			<li>Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.</li>
+			<li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li>
+			<li>Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.</li>
+			</ul>
+			
+			<i>We might change what we send on the Detailed level in the future. If so, it will be listed above.
+			By choosing "Detailed" you agree to current and future anonymized information being collected.</i>`,
+		},
+	];
+
+	@state()
+	private _telemetryFormData?: TelemetryModel['level'] = 'Basic';
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		getConsentLevel({}).then((data) => {
+			console.log(data);
+		});
+		getConsentLevels({}).then((data) => {
+			console.log(data);
+		});
+	}
+
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+	}
+
+	private _handleChange(e: InputEvent) {
+		const target = e.target as HTMLInputElement;
+		this._telemetryFormData = this._telemetryLevels[parseInt(target.value) - 1].level;
+	}
+
+	private get _selectedTelemetryIndex() {
+		return this._telemetryLevels?.findIndex((x) => x.level === this._telemetryFormData) ?? 0;
+	}
+
+	private get _selectedTelemetry() {
+		return this._telemetryLevels?.find((x) => x.level === this._telemetryFormData) ?? this._telemetryLevels[0];
+	}
+
+	private _renderSettingSlider() {
+		if (!this._telemetryLevels || this._telemetryLevels.length < 1) return;
+
+		return html`
+			<uui-slider
+				@input=${this._handleChange}
+				name="telemetryLevel"
+				label="telemetry level"
+				value=${this._selectedTelemetryIndex + 1}
+				min="1"
+				max=${this._telemetryLevels.length}
+				hide-step-values></uui-slider>
+			<h2>${this._selectedTelemetry.level}</h2>
+			<p>${unsafeHTML(this._selectedTelemetry.description)}</p>
+		`;
+	}
 
 	render() {
 		return html`
 			<uui-box>
-				<h1>Telemetry</h1>
+				<h1>Consent for telemetry data</h1>
+				<div style="max-width:580px">
+					<p>
+						In order to improve Umbraco and add new functionality based on as relevant information as possible, we would
+						like to collect system- and usage information from your installation. Aggregate data will be shared on a
+						regular basis as well as learnings from these metrics. Hopefully, you will help us collect some valuable
+						data.
+						<br /><br />
+						We <strong>WILL NOT</strong> collect any personal data such as content, code, user information, and all data
+						will be fully anonymized.
+					</p>
+					${this._renderSettingSlider()}
+					<uui-button look="primary" color="positive" label="Save telemetry settings">Save</uui-button>
+				</div>
 			</uui-box>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts b/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
index 034bd7851c..e71721e1fe 100644
--- a/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
@@ -21,3 +21,6 @@ export const getUpgradeSettings = fetcher.path('/upgrade/settings').method('get'
 export const PostUpgradeAuthorize = fetcher.path('/upgrade/authorize').method('post').create();
 export const getManifests = fetcher.path('/manifests').method('get').create();
 export const getPackagesInstalled = fetcher.path('/manifests/packages/installed').method('get').create();
+export const getConsentLevels = fetcher.path('/telemetry/ConsentLevels').method('get').create();
+export const getConsentLevel = fetcher.path('/telemetry/ConsentLevel').method('get').create();
+export const postConsentLevel = fetcher.path('/telemetry/ConsentLevel').method('post').create();
diff --git a/src/Umbraco.Web.UI.Client/src/core/models/index.ts b/src/Umbraco.Web.UI.Client/src/core/models/index.ts
index 80f628566e..c829e7747e 100644
--- a/src/Umbraco.Web.UI.Client/src/core/models/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/models/index.ts
@@ -30,6 +30,7 @@ export type ManifestEntrypoint = components['schemas']['IManifestEntrypoint'];
 export type ManifestCustom = components['schemas']['IManifestCustom'];
 export type ManifestPackageView = components['schemas']['IManifestPackageView'];
 export type PackageInstalled = components['schemas']['PackageInstalled'];
+export type ConsentLevelSettings = components['schemas']['ConsentLevelSettings'];
 
 export type ManifestElementType =
 	| ManifestSection
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index edd2b8e1ca..9a68d0850b 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -7,6 +7,7 @@ import * as serverHandlers from './domains/server.handlers';
 import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
 import { handlers as userHandlers } from './domains/user.handlers';
 import { handlers as treeHandlers } from './domains/entity.handlers';
+import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
 
 const handlers = [
 	serverHandlers.serverVersionHandler,
@@ -18,6 +19,7 @@ const handlers = [
 	...documentTypeHandlers,
 	...treeHandlers,
 	...manifestsHandlers.default,
+	...telemetryHandlers,
 ];
 
 switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) {
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
new file mode 100644
index 0000000000..fe8cff9052
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
@@ -0,0 +1,33 @@
+import { rest } from 'msw';
+
+import umbracoPath from '../../core/helpers/umbraco-path';
+import type { ConsentLevelSettings } from '../../core/models';
+
+let telemetryLevel = 'Basic';
+
+export const handlers = [
+	rest.get(umbracoPath('/telemetry/ConsentLevel'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<ConsentLevelSettings>({
+				telemetryLevel,
+			})
+		);
+	}),
+	rest.get(umbracoPath('/telemetry/ConsentLevels'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<string[]>(['Minimal', 'Basic', 'Detailed'])
+		);
+	}),
+
+	rest.post<ConsentLevelSettings>(umbracoPath('/telemetry/ConsentLevel'), async (_req, res, ctx) => {
+		telemetryLevel = (await _req.json<ConsentLevelSettings>()).telemetryLevel;
+		return res(
+			// Respond with a 200 status code
+			ctx.status(201)
+		);
+	}),
+];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
index 09e9121f40..cea5fbf27e 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
@@ -6,6 +6,7 @@ import * as manifestsHandlers from './domains/manifests.handlers';
 import * as serverHandlers from './domains/server.handlers';
 import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
 import { handlers as userHandlers } from './domains/user.handlers';
+import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
 
 export const handlers = [
 	serverHandlers.serverRunningHandler,
@@ -18,4 +19,5 @@ export const handlers = [
 	...dataTypeHandlers,
 	...documentTypeHandlers,
 	...manifestsHandlers.default,
+	...telemetryHandlers,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
index d24a1ab104..8ad363fc9b 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -94,6 +94,19 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 			weight: 10,
 		},
 	},
+	{
+		type: 'dashboard',
+		alias: 'Umb.Dashboard.Telemetry',
+		name: 'Telemetry',
+		elementName: 'umb-dashboard-telemetry',
+		loader: () => import('./backoffice/dashboards/telemetry/dashboard-telemetry.element'),
+		meta: {
+			label: 'Telemetry Data',
+			sections: ['Umb.Section.Settings'],
+			pathname: 'telemetry', // TODO: how do we want to support pretty urls?
+			weight: 0,
+		},
+	},
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.ExamineManagement',
diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts
index c7eb465583..583d6e20e7 100644
--- a/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts
+++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts
@@ -3,6 +3,7 @@ import './manifests';
 import './server';
 import './upgrader';
 import './user';
+import './telemetry';
 
 import { api } from '@airtasker/spot';
 
diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts
new file mode 100644
index 0000000000..2e490f0ffc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts
@@ -0,0 +1,46 @@
+import { body, defaultResponse, endpoint, request, response } from '@airtasker/spot';
+
+import { ProblemDetails } from './models';
+
+@endpoint({
+	method: 'GET',
+	path: '/telemetry/ConsentLevel',
+})
+export class GetConsentLevel {
+	@response({ status: 200 })
+	success(@body body: ConsentLevelSettings) {}
+
+	@defaultResponse
+	default(@body body: ProblemDetails) {}
+}
+
+@endpoint({
+	method: 'GET',
+	path: '/telemetry/ConsentLevels',
+})
+export class ConsentLevels {
+	@response({ status: 200 })
+	success(@body body: string[]) {}
+
+	@defaultResponse
+	default(@body body: ProblemDetails) {}
+}
+
+@endpoint({
+	method: 'POST',
+	path: '/telemetry/ConsentLevel',
+})
+export class PostConsentLevel {
+	@request
+	request(@body body: ConsentLevelSettings) {}
+
+	@response({ status: 201 })
+	success() {}
+
+	@response({ status: 400 })
+	badRequest(@body body: ProblemDetails) {}
+}
+
+export interface ConsentLevelSettings {
+	telemetryLevel: string;
+}

From 2ff38ab7064f33eb8f49c2bb6773c7fc005c7776 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 21 Sep 2022 16:01:02 +0200
Subject: [PATCH 02/28] api call for telemetry data settings

---
 src/Umbraco.Web.UI.Client/schemas/api/api.yml |   2 +-
 .../schemas/generated-schema.ts               |   2 +-
 .../telemetry/dashboard-telemetry.element.ts  | 109 +++++++++++++-----
 .../src/mocks/domains/telemetry.handlers.ts   |   6 +-
 .../temp-schema-generator/telemetry.ts        |   3 +-
 5 files changed, 85 insertions(+), 37 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/schemas/api/api.yml b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
index bd68978972..97c61b392c 100644
--- a/src/Umbraco.Web.UI.Client/schemas/api/api.yml
+++ b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
@@ -959,6 +959,6 @@ components:
       type: object
       properties:
         telemetryLevel:
-          type: string
+          $ref: '#/components/schemas/ConsentLevel'
       required:
         - telemetryLevel
diff --git a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
index 685d8676ec..a5dd021972 100644
--- a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
+++ b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
@@ -322,7 +322,7 @@ export interface components {
       sections: string[];
     };
     ConsentLevelSettings: {
-      telemetryLevel: string;
+      telemetryLevel: components["schemas"]["ConsentLevel"];
     };
   };
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
index 6903c3f625..6cf0d1a9cd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -2,10 +2,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 
 import type { TelemetryModel } from '../../../core/models';
-import { getConsentLevel, getConsentLevels } from '../../../core/api/fetcher';
+import { getConsentLevel, getConsentLevels, postConsentLevel } from '../../../core/api/fetcher';
 
 export type SettingOption = 'Minimal' | 'Basic' | 'Detailed';
 
@@ -21,25 +21,16 @@ export class UmbDashboardTelemetryElement extends LitElement {
 	];
 
 	@state()
-	private _telemetryLevels: TelemetryModel[] = [
-		{ level: 'Minimal', description: 'We will only send an anonymized site ID to let us know that the site exists.' },
-		{ level: 'Basic', description: 'We will send an anonymized site ID, Umbraco version, and packages installed.' },
-		{
-			level: 'Detailed',
-			description: `We will send:<ul>
-			<li>Anonymized site ID, Umbraco version, and packages installed.</li>
-			<li>Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.</li>
-			<li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li>
-			<li>Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.</li>
-			</ul>
-			
-			<i>We might change what we send on the Detailed level in the future. If so, it will be listed above.
-			By choosing "Detailed" you agree to current and future anonymized information being collected.</i>`,
-		},
-	];
+	private _telemetryFormData: TelemetryModel['level'] = 'Basic';
 
 	@state()
-	private _telemetryFormData?: TelemetryModel['level'] = 'Basic';
+	private _description = 'We will send an anonymized site ID, Umbraco version, and packages installed.';
+
+	@state()
+	private _telemetryLevels: TelemetryModel['level'][] = [];
+
+	@state()
+	private _errorMessage = '';
 
 	constructor() {
 		super();
@@ -47,29 +38,83 @@ export class UmbDashboardTelemetryElement extends LitElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-		getConsentLevel({}).then((data) => {
-			console.log(data);
-		});
-		getConsentLevels({}).then((data) => {
-			console.log(data);
-		});
+		this._setup();
 	}
 
+	private async _setup() {
+		// All telemetry levels
+		try {
+			const consentLevels = await getConsentLevels({});
+			// TODO ....
+			this._telemetryLevels = consentLevels.data;
+		} catch (e) {
+			this._errorMessage;
+		}
+
+		// Current setting
+		try {
+			const consentSetting = await getConsentLevel({});
+			this._telemetryFormData = consentSetting.data.telemetryLevel;
+		} catch (e) {
+			if (e instanceof getConsentLevel.Error) {
+				this._errorMessage = e.data.detail;
+			}
+		}
+	}
+
+	private _handleSubmit = async (e: CustomEvent<SubmitEvent>) => {
+		e.stopPropagation();
+
+		try {
+			await postConsentLevel({ telemetryLevel: this._telemetryFormData });
+		} catch (e) {
+			if (e instanceof postConsentLevel.Error) {
+				const error = e.getActualType();
+				if (error.status === 400) {
+					this._errorMessage = error.data.detail || 'Unknown error, please try again';
+				}
+			} else {
+				this._errorMessage = 'Unknown error, please try again';
+			}
+		}
+	};
+
 	disconnectedCallback(): void {
 		super.disconnectedCallback();
 	}
 
 	private _handleChange(e: InputEvent) {
 		const target = e.target as HTMLInputElement;
-		this._telemetryFormData = this._telemetryLevels[parseInt(target.value) - 1].level;
+		this._telemetryFormData = this._telemetryLevels[parseInt(target.value) - 1];
 	}
 
 	private get _selectedTelemetryIndex() {
-		return this._telemetryLevels?.findIndex((x) => x.level === this._telemetryFormData) ?? 0;
+		return this._telemetryLevels?.findIndex((x) => x === this._telemetryFormData) ?? 0;
 	}
 
 	private get _selectedTelemetry() {
-		return this._telemetryLevels?.find((x) => x.level === this._telemetryFormData) ?? this._telemetryLevels[0];
+		return this._telemetryLevels?.find((x) => x === this._telemetryFormData) ?? this._telemetryLevels[0];
+	}
+
+	private get _selectedTelemetryDescription() {
+		switch (this._selectedTelemetry) {
+			case 'Minimal':
+				return 'We will only send an anonymized site ID to let us know that the site exists.';
+			case 'Basic':
+				return 'We will send an anonymized site ID, Umbraco version, and packages installed.';
+			case 'Detailed':
+				return `We will send:<ul>
+				<li>Anonymized site ID, Umbraco version, and packages installed.</li>
+				<li>Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.</li>
+				<li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li>
+				<li>Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.</li>
+				</ul>
+				
+				<i>We might change what we send on the Detailed level in the future. If so, it will be listed above.
+				By choosing "Detailed" you agree to current and future anonymized information being collected.</i>`;
+			default:
+				return 'Something may have gone wrong';
+		}
 	}
 
 	private _renderSettingSlider() {
@@ -84,8 +129,8 @@ export class UmbDashboardTelemetryElement extends LitElement {
 				min="1"
 				max=${this._telemetryLevels.length}
 				hide-step-values></uui-slider>
-			<h2>${this._selectedTelemetry.level}</h2>
-			<p>${unsafeHTML(this._selectedTelemetry.description)}</p>
+			<h2>${this._selectedTelemetry}</h2>
+			<p>${unsafeHTML(this._selectedTelemetryDescription)}</p>
 		`;
 	}
 
@@ -104,7 +149,9 @@ export class UmbDashboardTelemetryElement extends LitElement {
 						will be fully anonymized.
 					</p>
 					${this._renderSettingSlider()}
-					<uui-button look="primary" color="positive" label="Save telemetry settings">Save</uui-button>
+					<uui-button look="primary" color="positive" label="Save telemetry settings" @click="${this._handleSubmit}">
+						Save
+					</uui-button>
 				</div>
 			</uui-box>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
index fe8cff9052..84555c27a7 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
@@ -1,9 +1,9 @@
 import { rest } from 'msw';
 
 import umbracoPath from '../../core/helpers/umbraco-path';
-import type { ConsentLevelSettings } from '../../core/models';
+import type { ConsentLevelSettings, TelemetryModel } from '../../core/models';
 
-let telemetryLevel = 'Basic';
+let telemetryLevel: TelemetryModel['level'] = 'Basic';
 
 export const handlers = [
 	rest.get(umbracoPath('/telemetry/ConsentLevel'), (_req, res, ctx) => {
@@ -19,7 +19,7 @@ export const handlers = [
 		return res(
 			// Respond with a 200 status code
 			ctx.status(200),
-			ctx.json<string[]>(['Minimal', 'Basic', 'Detailed'])
+			ctx.json<TelemetryModel['level'][]>(['Minimal', 'Basic', 'Detailed'])
 		);
 	}),
 
diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts
index 2e490f0ffc..3ebd5f85da 100644
--- a/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts
+++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts
@@ -1,4 +1,5 @@
 import { body, defaultResponse, endpoint, request, response } from '@airtasker/spot';
+import { TelemetryModel } from './installer';
 
 import { ProblemDetails } from './models';
 
@@ -42,5 +43,5 @@ export class PostConsentLevel {
 }
 
 export interface ConsentLevelSettings {
-	telemetryLevel: string;
+	telemetryLevel: TelemetryModel['level'];
 }

From 7a5837a3dab1767c780f85c92dc86b036f68d073 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 21 Sep 2022 16:02:41 +0200
Subject: [PATCH 03/28] remove unused state

---
 .../dashboards/telemetry/dashboard-telemetry.element.ts        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
index 6cf0d1a9cd..f14545deba 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -23,9 +23,6 @@ export class UmbDashboardTelemetryElement extends LitElement {
 	@state()
 	private _telemetryFormData: TelemetryModel['level'] = 'Basic';
 
-	@state()
-	private _description = 'We will send an anonymized site ID, Umbraco version, and packages installed.';
-
 	@state()
 	private _telemetryLevels: TelemetryModel['level'][] = [];
 

From e1e7c9f4acd02f9a42d5063aa1339f2aa28f936b Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 22 Sep 2022 08:59:05 +0200
Subject: [PATCH 04/28] small fix

---
 .../dashboards/telemetry/dashboard-telemetry.element.ts  | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
index f14545deba..a710a700bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -39,16 +39,12 @@ export class UmbDashboardTelemetryElement extends LitElement {
 	}
 
 	private async _setup() {
-		// All telemetry levels
 		try {
 			const consentLevels = await getConsentLevels({});
-			// TODO ....
-			this._telemetryLevels = consentLevels.data;
+			this._telemetryLevels = consentLevels.data as TelemetryModel['level'][];
 		} catch (e) {
 			this._errorMessage;
 		}
-
-		// Current setting
 		try {
 			const consentSetting = await getConsentLevel({});
 			this._telemetryFormData = consentSetting.data.telemetryLevel;
@@ -61,7 +57,6 @@ export class UmbDashboardTelemetryElement extends LitElement {
 
 	private _handleSubmit = async (e: CustomEvent<SubmitEvent>) => {
 		e.stopPropagation();
-
 		try {
 			await postConsentLevel({ telemetryLevel: this._telemetryFormData });
 		} catch (e) {
@@ -110,7 +105,7 @@ export class UmbDashboardTelemetryElement extends LitElement {
 				<i>We might change what we send on the Detailed level in the future. If so, it will be listed above.
 				By choosing "Detailed" you agree to current and future anonymized information being collected.</i>`;
 			default:
-				return 'Something may have gone wrong';
+				return 'Could not find description for this setting';
 		}
 	}
 

From 528734fb3522e43a75890fed701b9231b875b845 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 22 Sep 2022 09:08:52 +0200
Subject: [PATCH 05/28] calls returns as telemetrymodellvl

---
 .../dashboards/telemetry/dashboard-telemetry.element.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
index a710a700bc..dc9fc75d7d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -47,7 +47,7 @@ export class UmbDashboardTelemetryElement extends LitElement {
 		}
 		try {
 			const consentSetting = await getConsentLevel({});
-			this._telemetryFormData = consentSetting.data.telemetryLevel;
+			this._telemetryFormData = consentSetting.data.telemetryLevel as TelemetryModel['level'];
 		} catch (e) {
 			if (e instanceof getConsentLevel.Error) {
 				this._errorMessage = e.data.detail;

From 922627cba3688ac7c566dcdb76ed840dfa05f3f2 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Sep 2022 13:54:09 +0200
Subject: [PATCH 06/28] added unit test

---
 .../telemetry/dashboard-telemetry.test.ts     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts
new file mode 100644
index 0000000000..01b34283e4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts
@@ -0,0 +1,19 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbDashboardTelemetryElement } from './dashboard-telemetry.element';
+
+describe('UmbDashboardTelemetryElement', () => {
+	let element: UmbDashboardTelemetryElement;
+
+	beforeEach(async () => {
+		element = await fixture(html`<umb-dashboard-telemetry></umb-dashboard-telemetry>`);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbDashboardTelemetryElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).to.be.accessible(defaultA11yConfig);
+	});
+});

From f9cfcd5ccf4c4b703c3eb31b40ce3a93cd153374 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 10:16:40 +0200
Subject: [PATCH 07/28] move property editor UI manifests to its own file

---
 .../index.ts}                                 | 173 +++++-------------
 .../property-editor-ui.ts                     |  91 +++++++++
 2 files changed, 135 insertions(+), 129 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/{temp-internal-manifests.ts => temp-internal-manifests/index.ts} (61%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts

diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
similarity index 61%
rename from src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
rename to src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
index 252ba481a9..25dd130953 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
@@ -1,14 +1,16 @@
-import type { ManifestTypes } from './core/models';
+import type { ManifestTypes } from '../core/models';
+import { manifests as propertyEditorUIManifests } from './property-editor-ui';
 
 // TODO: consider moving weight from meta to the main part of the manifest. We need it for every extension.
 // TODO: consider adding a label property as part of the meta. It might make sense to have an "extension" name label where one is needed.
 export const internalManifests: Array<ManifestTypes & { loader: () => Promise<object | HTMLElement> }> = [
+	...propertyEditorUIManifests,
 	{
 		type: 'section',
 		alias: 'Umb.Section.Content',
 		name: 'Content',
 		elementName: 'umb-content-section',
-		loader: () => import('./backoffice/sections/content/content-section.element'),
+		loader: () => import('../backoffice/sections/content/content-section.element'),
 		meta: {
 			pathname: 'content', // TODO: how to we want to support pretty urls?
 			weight: 50,
@@ -19,7 +21,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Section.Media',
 		name: 'Media',
 		elementName: 'umb-media-section',
-		loader: () => import('./backoffice/sections/media/media-section.element'),
+		loader: () => import('../backoffice/sections/media/media-section.element'),
 		meta: {
 			pathname: 'media', // TODO: how to we want to support pretty urls?
 			weight: 50,
@@ -30,7 +32,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Section.Members',
 		name: 'Members',
 		elementName: 'umb-section-members',
-		loader: () => import('./backoffice/sections/members/section-members.element'),
+		loader: () => import('../backoffice/sections/members/section-members.element'),
 		meta: {
 			pathname: 'members',
 			weight: 30,
@@ -40,7 +42,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'section',
 		alias: 'Umb.Section.Settings',
 		name: 'Settings',
-		loader: () => import('./backoffice/sections/settings/settings-section.element'),
+		loader: () => import('../backoffice/sections/settings/settings-section.element'),
 		meta: {
 			pathname: 'settings', // TODO: how to we want to support pretty urls?
 			weight: 20,
@@ -51,7 +53,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Section.Packages',
 		name: 'Packages',
 		elementName: 'umb-packages-section',
-		loader: () => import('./backoffice/sections/packages/packages-section.element'),
+		loader: () => import('../backoffice/sections/packages/packages-section.element'),
 		meta: {
 			pathname: 'packages',
 			weight: 20,
@@ -62,7 +64,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.Welcome',
 		name: 'Welcome',
 		elementName: 'umb-dashboard-welcome',
-		loader: () => import('./backoffice/dashboards/welcome/dashboard-welcome.element'),
+		loader: () => import('../backoffice/dashboards/welcome/dashboard-welcome.element'),
 		meta: {
 			sections: ['Umb.Section.Content'],
 			pathname: 'welcome', // TODO: how to we want to support pretty urls?
@@ -74,7 +76,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.RedirectManagement',
 		name: 'Redirect Management',
 		elementName: 'umb-dashboard-redirect-management',
-		loader: () => import('./backoffice/dashboards/redirect-management/dashboard-redirect-management.element'),
+		loader: () => import('../backoffice/dashboards/redirect-management/dashboard-redirect-management.element'),
 		meta: {
 			sections: ['Umb.Section.Content'],
 			pathname: 'redirect-management', // TODO: how to we want to support pretty urls?
@@ -86,7 +88,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.SettingsAbout',
 		name: 'Settings About',
 		elementName: 'umb-dashboard-settings-about',
-		loader: () => import('./backoffice/dashboards/settings-about/dashboard-settings-about.element'),
+		loader: () => import('../backoffice/dashboards/settings-about/dashboard-settings-about.element'),
 		meta: {
 			label: 'About',
 			sections: ['Umb.Section.Settings'],
@@ -99,7 +101,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.ExamineManagement',
 		name: 'Examine Management',
 		elementName: 'umb-dashboard-examine-management',
-		loader: () => import('./backoffice/dashboards/examine-management/dashboard-examine-management.element'),
+		loader: () => import('../backoffice/dashboards/examine-management/dashboard-examine-management.element'),
 		meta: {
 			sections: ['Umb.Section.Settings'],
 			pathname: 'examine-management', // TODO: how to we want to support pretty urls?
@@ -111,7 +113,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.ModelsBuilder',
 		name: 'Models Builder',
 		elementName: 'umb-dashboard-models-builder',
-		loader: () => import('./backoffice/dashboards/models-builder/dashboard-models-builder.element'),
+		loader: () => import('../backoffice/dashboards/models-builder/dashboard-models-builder.element'),
 		meta: {
 			sections: ['Umb.Section.Settings'],
 			pathname: 'models-builder', // TODO: how to we want to support pretty urls?
@@ -123,7 +125,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.PublishedStatus',
 		name: 'Published Status',
 		elementName: 'umb-dashboard-published-status',
-		loader: () => import('./backoffice/dashboards/published-status/dashboard-published-status.element'),
+		loader: () => import('../backoffice/dashboards/published-status/dashboard-published-status.element'),
 		meta: {
 			sections: ['Umb.Section.Settings'],
 			pathname: 'published-status', // TODO: how to we want to support pretty urls?
@@ -135,93 +137,19 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.MediaManagement',
 		name: 'Media',
 		elementName: 'umb-dashboard-media-management',
-		loader: () => import('./backoffice/dashboards/media-management/dashboard-media-management.element'),
+		loader: () => import('../backoffice/dashboards/media-management/dashboard-media-management.element'),
 		meta: {
 			sections: ['Umb.Section.Media'],
 			pathname: 'media-management', // TODO: how to we want to support pretty urls?
 			weight: 10,
 		},
 	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.Text',
-		name: 'Text Property Editor UI',
-		loader: () => import('./backoffice/property-editors/text/property-editor-text.element'),
-		meta: {
-			label: 'Text',
-			icon: 'umb:edit',
-			group: 'Common',
-			propertyEditor: 'Umbraco.TextBox',
-		},
-	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.Textarea',
-		name: 'Textarea Property Editor UI',
-		elementName: 'umb-property-editor-textarea',
-		loader: () => import('./backoffice/property-editors/textarea/property-editor-textarea.element'),
-		meta: {
-			label: 'Textarea',
-			icon: 'umb:edit',
-			group: 'Common',
-			propertyEditor: 'Umbraco.TextArea',
-			config: {
-				properties: [
-					{
-						alias: 'rows',
-						label: 'Number of rows',
-						description: 'If empty - 10 rows would be set as the default value',
-						propertyEditorUI: 'Umb.PropertyEditorUI.Number',
-					},
-				],
-			},
-		},
-	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.ContextExample',
-		name: 'Context Example Property Editor UI',
-		loader: () => import('./backoffice/property-editors/context-example/property-editor-context-example.element'),
-		meta: {
-			label: 'Context Example',
-			icon: 'umb:favorite',
-			group: 'Common',
-			propertyEditor: 'Umbraco.Custom',
-			config: {
-				properties: [
-					{
-						label: 'Some Configuration',
-						alias: 'someConfiguration',
-						propertyEditorUI: 'Umb.PropertyEditorUI.Text',
-					},
-				],
-				defaultData: [
-					{
-						alias: 'someConfiguration',
-						value: 'Some default value',
-					},
-				],
-			},
-		},
-	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.Number',
-		name: 'Number Property Editor UI',
-		loader: () => import('./backoffice/property-editors/number/property-editor-number.element'),
-		meta: {
-			label: 'Number',
-			icon: 'umb:autofill',
-			group: 'Common',
-			propertyEditor: 'Umbraco.Integer',
-		},
-	},
 	{
 		type: 'editorView',
 		alias: 'Umb.EditorView.Content.Edit',
 		name: 'Content Editor Edit View',
 		elementName: 'umb-editor-view-node-edit',
-		loader: () => import('./backoffice/editors/shared/node/views/edit/editor-view-node-edit.element'),
+		loader: () => import('../backoffice/editors/shared/node/views/edit/editor-view-node-edit.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
@@ -237,7 +165,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.EditorView.Content.Info',
 		name: 'Content Editor Info View',
 		elementName: 'umb-editor-view-node-info',
-		loader: () => import('./backoffice/editors/shared/node/views/info/editor-view-node-info.element'),
+		loader: () => import('../backoffice/editors/shared/node/views/info/editor-view-node-info.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
@@ -252,7 +180,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editorView',
 		alias: 'Umb.EditorView.DataType.Edit',
 		name: 'Data Type Editor Edit View',
-		loader: () => import('./backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element'),
+		loader: () => import('../backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
@@ -267,7 +195,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editorView',
 		alias: 'Umb.EditorView.DataType.Info',
 		name: 'Data Type Editor Info View',
-		loader: () => import('./backoffice/editors/data-type/views/info/editor-view-data-type-info.element'),
+		loader: () => import('../backoffice/editors/data-type/views/info/editor-view-data-type-info.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
@@ -283,7 +211,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.EditorView.DocumentType.Design',
 		name: 'Document Type Editor Design View',
 		elementName: 'umb-editor-view-document-type-design',
-		loader: () => import('./backoffice/editors/document-type/views/editor-view-document-type-design.element'),
+		loader: () => import('../backoffice/editors/document-type/views/editor-view-document-type-design.element'),
 		meta: {
 			// TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
 			// this is a temp solution
@@ -299,7 +227,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Editor.Packages.Overview',
 		name: 'Packages Editor Overview View',
 		elementName: 'umb-packages-overview',
-		loader: () => import('./backoffice/sections/packages/packages-overview.element'),
+		loader: () => import('../backoffice/sections/packages/packages-overview.element'),
 		meta: {
 			icon: 'document',
 			label: 'Packages',
@@ -313,7 +241,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Editor.Packages.Installed',
 		name: 'Packages Editor Installed View',
 		elementName: 'umb-packages-installed',
-		loader: () => import('./backoffice/sections/packages/packages-installed.element'),
+		loader: () => import('../backoffice/sections/packages/packages-installed.element'),
 		meta: {
 			icon: 'document',
 			label: 'Installed',
@@ -327,7 +255,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.PropertyAction.Copy',
 		name: 'Copy',
 		elementName: 'umb-property-action-copy',
-		loader: () => import('./backoffice/property-actions/copy/property-action-copy.element'),
+		loader: () => import('../backoffice/property-actions/copy/property-action-copy.element'),
 		meta: {
 			propertyEditors: ['Umb.PropertyEditorUI.Text'],
 		},
@@ -337,29 +265,16 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.PropertyAction.Clear',
 		name: 'Clear',
 		elementName: 'umb-property-action-clear',
-		loader: () => import('./backoffice/property-actions/clear/property-action-clear.element'),
+		loader: () => import('../backoffice/property-actions/clear/property-action-clear.element'),
 		meta: {
 			propertyEditors: ['Umb.PropertyEditorUI.Text'],
 		},
 	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.ContentPicker',
-		name: 'Content Picker Property Editor UI',
-		elementName: 'umb-property-editor-content-picker',
-		loader: () => import('./backoffice/property-editors/content-picker/property-editor-content-picker.element'),
-		meta: {
-			label: 'Content Picker',
-			propertyEditor: 'Umbraco.ContentPicker',
-			icon: 'umb:document',
-			group: 'Common',
-		},
-	},
 	{
 		type: 'tree',
 		alias: 'Umb.Tree.DataTypes',
 		name: 'Data Types Tree',
-		loader: () => import('./backoffice/trees/data-types/tree-data-types.element'),
+		loader: () => import('../backoffice/trees/data-types/tree-data-types.element'),
 		meta: {
 			weight: 1,
 			sections: ['Umb.Section.Settings'],
@@ -369,7 +284,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'tree',
 		alias: 'Umb.Tree.DocumentTypes',
 		name: 'Document Types Tree',
-		loader: () => import('./backoffice/trees/document-types/tree-document-types.element'),
+		loader: () => import('../backoffice/trees/document-types/tree-document-types.element'),
 		meta: {
 			weight: 2,
 			sections: ['Umb.Section.Settings'],
@@ -380,7 +295,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.MembersTest',
 		name: 'Members Test',
 		elementName: 'umb-dashboard-welcome',
-		loader: () => import('./backoffice/dashboards/welcome/dashboard-welcome.element'),
+		loader: () => import('../backoffice/dashboards/welcome/dashboard-welcome.element'),
 		meta: {
 			weight: -10,
 			pathname: 'welcome',
@@ -391,7 +306,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'tree',
 		alias: 'Umb.Tree.Members',
 		name: 'Members Tree',
-		loader: () => import('./backoffice/trees/members/tree-members.element'),
+		loader: () => import('../backoffice/trees/members/tree-members.element'),
 		meta: {
 			weight: 0,
 			sections: ['Umb.Section.Members'],
@@ -401,7 +316,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'tree',
 		alias: 'Umb.Tree.MemberGroups',
 		name: 'Members Groups Tree',
-		loader: () => import('./backoffice/trees/member-groups/tree-member-groups.element'),
+		loader: () => import('../backoffice/trees/member-groups/tree-member-groups.element'),
 		meta: {
 			weight: 1,
 			sections: ['Umb.Section.Members'],
@@ -411,7 +326,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'tree',
 		alias: 'Umb.Tree.Extensions',
 		name: 'Extensions Tree',
-		loader: () => import('./backoffice/trees/extensions/tree-extensions.element'),
+		loader: () => import('../backoffice/trees/extensions/tree-extensions.element'),
 		meta: {
 			weight: 3,
 			sections: ['Umb.Section.Settings'],
@@ -421,7 +336,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'tree',
 		alias: 'Umb.Tree.Media',
 		name: 'Media Tree',
-		loader: () => import('./backoffice/trees/media/tree-media.element'),
+		loader: () => import('../backoffice/trees/media/tree-media.element'),
 		meta: {
 			weight: 100,
 			sections: ['Umb.Section.Media'],
@@ -431,7 +346,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'tree',
 		alias: 'Umb.Tree.Content',
 		name: 'Content Tree',
-		loader: () => import('./backoffice/trees/documents/tree-documents.element'),
+		loader: () => import('../backoffice/trees/documents/tree-documents.element'),
 		meta: {
 			weight: 100,
 			sections: ['Umb.Section.Content'],
@@ -441,7 +356,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editor',
 		alias: 'Umb.Editor.Member',
 		name: 'Member Editor',
-		loader: () => import('./backoffice/editors/member/editor-member.element'),
+		loader: () => import('../backoffice/editors/member/editor-member.element'),
 		meta: {
 			entityType: 'member',
 		},
@@ -450,7 +365,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editor',
 		alias: 'Umb.Editor.MemberGroup',
 		name: 'Member Group Editor',
-		loader: () => import('./backoffice/editors/member-group/editor-member-group.element'),
+		loader: () => import('../backoffice/editors/member-group/editor-member-group.element'),
 		meta: {
 			entityType: 'memberGroup',
 		},
@@ -459,7 +374,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editor',
 		alias: 'Umb.Editor.DataType',
 		name: 'Data Type Editor',
-		loader: () => import('./backoffice/editors/data-type/editor-data-type.element'),
+		loader: () => import('../backoffice/editors/data-type/editor-data-type.element'),
 		meta: {
 			entityType: 'dataType',
 		},
@@ -468,7 +383,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editor',
 		alias: 'Umb.Editor.DocumentType',
 		name: 'Document Type Editor',
-		loader: () => import('./backoffice/editors/document-type/editor-document-type.element'),
+		loader: () => import('../backoffice/editors/document-type/editor-document-type.element'),
 		meta: {
 			entityType: 'documentType',
 		},
@@ -477,7 +392,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editor',
 		alias: 'Umb.Editor.Extensions',
 		name: 'Extensions Editor',
-		loader: () => import('./backoffice/editors/extensions/editor-extensions.element'),
+		loader: () => import('../backoffice/editors/extensions/editor-extensions.element'),
 		meta: {
 			entityType: 'extensionsList',
 		},
@@ -486,7 +401,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editor',
 		alias: 'Umb.Editor.Media',
 		name: 'Media Editor',
-		loader: () => import('./backoffice/editors/media/editor-media.element'),
+		loader: () => import('../backoffice/editors/media/editor-media.element'),
 		meta: {
 			entityType: 'media',
 		},
@@ -495,7 +410,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'editor',
 		alias: 'Umb.Editor.Document',
 		name: 'Content Editor',
-		loader: () => import('./backoffice/editors/document/editor-document.element'),
+		loader: () => import('../backoffice/editors/document/editor-document.element'),
 		meta: {
 			entityType: 'document',
 		},
@@ -504,7 +419,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'treeItemAction',
 		alias: 'Umb.TreeItemAction.Document.Create',
 		name: 'Document Tree Item Action Create',
-		loader: () => import('./backoffice/trees/documents/actions/action-document-create.element'),
+		loader: () => import('../backoffice/trees/documents/actions/action-document-create.element'),
 		meta: {
 			trees: ['Umb.Tree.Content'],
 			label: 'Create',
@@ -516,7 +431,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'treeItemAction',
 		alias: 'Umb.TreeItemAction.Document.Delete',
 		name: 'Document Tree Item Action Delete',
-		loader: () => import('./backoffice/trees/documents/actions/action-document-delete.element'),
+		loader: () => import('../backoffice/trees/documents/actions/action-document-delete.element'),
 		meta: {
 			trees: ['Umb.Tree.Content'],
 			label: 'Delete',
@@ -528,7 +443,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'treeItemAction',
 		alias: 'Umb.TreeItemAction.Document.Paged',
 		name: 'Document Tree Item Action Paged',
-		loader: () => import('./backoffice/trees/documents/actions/action-document-paged.element'),
+		loader: () => import('../backoffice/trees/documents/actions/action-document-paged.element'),
 		meta: {
 			trees: ['Umb.Tree.Content'],
 			label: 'Paged',
@@ -540,7 +455,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'treeItemAction',
 		alias: 'Umb.TreeItemAction.DataType.Create',
 		name: 'Tree Item Action Create',
-		loader: () => import('./backoffice/trees/data-types/actions/action-data-type-create.element'),
+		loader: () => import('../backoffice/trees/data-types/actions/action-data-type-create.element'),
 		meta: {
 			trees: ['Umb.Tree.DataTypes'],
 			label: 'Create',
@@ -552,7 +467,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		type: 'treeItemAction',
 		alias: 'Umb.TreeItemAction.DataType.Delete',
 		name: 'Tree Item Action Delete',
-		loader: () => import('./backoffice/trees/data-types/actions/action-data-type-delete.element'),
+		loader: () => import('../backoffice/trees/data-types/actions/action-data-type-delete.element'),
 		meta: {
 			trees: ['Umb.Tree.DataTypes'],
 			label: 'Delete',
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
new file mode 100644
index 0000000000..e4119f060f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -0,0 +1,91 @@
+import type { ManifestTypes } from '../core/models';
+
+export const manifests: Array<ManifestTypes & { loader: () => Promise<object | HTMLElement> }> = [
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.Text',
+		name: 'Text Property Editor UI',
+		loader: () => import('../backoffice/property-editors/text/property-editor-text.element'),
+		meta: {
+			label: 'Text',
+			icon: 'umb:edit',
+			group: 'Common',
+			propertyEditor: 'Umbraco.TextBox',
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.Textarea',
+		name: 'Textarea Property Editor UI',
+		elementName: 'umb-property-editor-textarea',
+		loader: () => import('../backoffice/property-editors/textarea/property-editor-textarea.element'),
+		meta: {
+			label: 'Textarea',
+			icon: 'umb:edit',
+			group: 'Common',
+			propertyEditor: 'Umbraco.TextArea',
+			config: {
+				properties: [
+					{
+						alias: 'rows',
+						label: 'Number of rows',
+						description: 'If empty - 10 rows would be set as the default value',
+						propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+					},
+				],
+			},
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.ContextExample',
+		name: 'Context Example Property Editor UI',
+		loader: () => import('../backoffice/property-editors/context-example/property-editor-context-example.element'),
+		meta: {
+			label: 'Context Example',
+			icon: 'umb:favorite',
+			group: 'Common',
+			propertyEditor: 'Umbraco.Custom',
+			config: {
+				properties: [
+					{
+						label: 'Some Configuration',
+						alias: 'someConfiguration',
+						propertyEditorUI: 'Umb.PropertyEditorUI.Text',
+					},
+				],
+				defaultData: [
+					{
+						alias: 'someConfiguration',
+						value: 'Some default value',
+					},
+				],
+			},
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.Number',
+		name: 'Number Property Editor UI',
+		loader: () => import('../backoffice/property-editors/number/property-editor-number.element'),
+		meta: {
+			label: 'Number',
+			icon: 'umb:autofill',
+			group: 'Common',
+			propertyEditor: 'Umbraco.Integer',
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.ContentPicker',
+		name: 'Content Picker Property Editor UI',
+		elementName: 'umb-property-editor-content-picker',
+		loader: () => import('../backoffice/property-editors/content-picker/property-editor-content-picker.element'),
+		meta: {
+			label: 'Content Picker',
+			propertyEditor: 'Umbraco.ContentPicker',
+			icon: 'umb:document',
+			group: 'Common',
+		},
+	},
+];

From a4b7b07e54e5985c2c6441eb2ab583373e0340d2 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 14:45:44 +0200
Subject: [PATCH 08/28] add plop to generate property editor ui files

---
 .../devops/plop/plop.mjs                      |   64 +
 .../property-editor-ui/element.ts.hbs         |   29 +
 .../property-editor-ui/stories.ts.hbs         |   15 +
 .../templates/property-editor-ui/test.ts.hbs  |   21 +
 src/Umbraco.Web.UI.Client/package-lock.json   | 1423 +++++++++++++++++
 src/Umbraco.Web.UI.Client/package.json        |    4 +-
 6 files changed, 1555 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/devops/plop/plop.mjs
 create mode 100644 src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs
 create mode 100644 src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs
 create mode 100644 src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs

diff --git a/src/Umbraco.Web.UI.Client/devops/plop/plop.mjs b/src/Umbraco.Web.UI.Client/devops/plop/plop.mjs
new file mode 100644
index 0000000000..5a3b98a997
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/devops/plop/plop.mjs
@@ -0,0 +1,64 @@
+import lodash from 'lodash';
+const { kebabCase, camelCase, startCase } = lodash;
+const pascalCase = (str) => startCase(str).replace(/ /g, '');
+
+const tagNamePrefix = 'umb-';
+const classNamePrefix = 'Umb';
+
+const extensions = [
+	{
+		type: 'propertyEditorUI',
+		path: '../../src/backoffice/property-editor-uis',
+		templatePath: './templates/property-editor-ui',
+	},
+];
+
+export default function (plop) {
+	plop.setHelper('className', (type, name) => classNamePrefix + pascalCase(type) + pascalCase(name) + 'Element');
+	plop.setHelper('displayName', (name) => startCase(camelCase(name)));
+	plop.setHelper('extensionPath', (type, name) => extensions.find((e) => e.type === type).path + '/' + name);
+	plop.setHelper('extensionTemplatePath', (type) => extensions.find((e) => e.type === type).templatePath);
+	plop.setHelper('extensionFilename', (type, name) => kebabCase(type) + '-' + kebabCase(name));
+	plop.setHelper('extensionTagName', (type, name) => tagNamePrefix + kebabCase(type) + '-' + kebabCase(name));
+
+	plop.setGenerator('component', {
+		description: 'application controller logic',
+		prompts: [
+			{
+				type: 'list',
+				name: 'extensionType',
+				message: 'Select extension type',
+				choices: extensions.map((e) => e.type),
+			},
+			{
+				type: 'input',
+				name: 'name',
+				message: 'Enter extension name (i.e. color-picker)',
+				validate: (answer) => {
+					if (answer.length < 1) {
+						return 'Please enter a name for the extension';
+					} else return true;
+				},
+				// Convert the input into kebab case if not provided as such and strip prefix
+				filter: (response) => kebabCase(response.replace(/^umb-/, '')),
+			},
+		],
+		actions: [
+			{
+				type: 'add',
+				path: '{{ extensionPath extensionType name }}/{{extensionFilename extensionType name }}.element.ts',
+				templateFile: '{{extensionTemplatePath extensionType}}/element.ts.hbs',
+			},
+			{
+				type: 'add',
+				path: '{{ extensionPath extensionType name }}/{{ extensionFilename extensionType name }}.test.ts',
+				templateFile: '{{extensionTemplatePath extensionType}}/test.ts.hbs',
+			},
+			{
+				type: 'add',
+				path: '{{ extensionPath extensionType name }}/{{ extensionFilename extensionType name }}.stories.ts',
+				templateFile: '{{extensionTemplatePath extensionType}}/stories.ts.hbs',
+			},
+		],
+	});
+}
diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs
new file mode 100644
index 0000000000..d33b4a38fa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element {{ extensionTagName extensionType name }}
+ */
+@customElement('{{ extensionTagName extensionType name }}')
+export class {{className extensionType name }} extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>{{ extensionTagName extensionType name }}</div>`;
+	}
+}
+
+export default {{className extensionType name}};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'{{extensionTagName extensionType name }}': {{className extensionType name}};
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs
new file mode 100644
index 0000000000..639e3b1fa8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/stories.ts.hbs
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { {{className extensionType name}} } from './{{ extensionFilename extensionType name }}.element';
+import './{{ extensionFilename extensionType name }}.element';
+
+export default {
+	title: 'Property Editor UIs/{{ displayName name }}',
+	component: '{{ extensionTagName extensionType name }}',
+	id: '{{extensionTagName extensionType name }}',
+} as Meta;
+
+export const AAAOverview: Story<{{className extensionType name}}> = () =>
+	html`<{{ extensionTagName extensionType name }}></{{ extensionTagName extensionType name }}>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs
new file mode 100644
index 0000000000..43acdc9be2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { {{ className extensionType name }} } from './{{ extensionTagName extensionType name }}.element';
+
+describe('{{className extensionType name}}', () => {
+  let element: {{className extensionType name}};
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <{{ extensionTagName extensionType name }}></{{ extensionTagName extensionType name }}> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf({{ className extensionType name }});
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index b61f45d481..23279e43ff 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -56,6 +56,7 @@
 				"msw": "^0.47.3",
 				"msw-storybook-addon": "^1.6.3",
 				"playwright-msw": "^1.0.0",
+				"plop": "^3.1.1",
 				"prettier": "2.7.1",
 				"tiny-glob": "^0.2.9",
 				"typescript": "^4.8.3",
@@ -5178,6 +5179,12 @@
 				"@types/range-parser": "*"
 			}
 		},
+		"node_modules/@types/fined": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@types/fined/-/fined-1.1.3.tgz",
+			"integrity": "sha512-CWYnSRnun3CGbt6taXeVo2lCbuaj4mchVJ4UF/BdU5TSuIn3AmS13pGMwCsBUoehGbhZrBrpNJZSZI5EVilXww==",
+			"dev": true
+		},
 		"node_modules/@types/glob": {
 			"version": "7.2.0",
 			"dev": true,
@@ -5220,6 +5227,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/inquirer": {
+			"version": "8.2.4",
+			"resolved": "https://registry.npmjs.org/@types/inquirer/-/inquirer-8.2.4.tgz",
+			"integrity": "sha512-Pxxx3i3AyK7vKAj3LRM/vF7ETcHKiLJ/u5CnNgbz/eYj/vB3xGAYtRxI5IKtq0hpe5iFHD22BKV3n6WHUu0k4Q==",
+			"dev": true,
+			"dependencies": {
+				"@types/through": "*"
+			}
+		},
 		"node_modules/@types/is-function": {
 			"version": "1.0.1",
 			"dev": true,
@@ -5289,6 +5305,16 @@
 				"@types/koa": "*"
 			}
 		},
+		"node_modules/@types/liftoff": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@types/liftoff/-/liftoff-4.0.0.tgz",
+			"integrity": "sha512-Ny/PJkO6nxWAQnaet8q/oWz15lrfwvdvBpuY4treB0CSsBO1CG0fVuNLngR3m3bepQLd+E4c3Y3DlC2okpUvPw==",
+			"dev": true,
+			"dependencies": {
+				"@types/fined": "*",
+				"@types/node": "*"
+			}
+		},
 		"node_modules/@types/lodash": {
 			"version": "4.14.182",
 			"dev": true,
@@ -5462,6 +5488,15 @@
 			"integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
 			"dev": true
 		},
+		"node_modules/@types/through": {
+			"version": "0.0.30",
+			"resolved": "https://registry.npmjs.org/@types/through/-/through-0.0.30.tgz",
+			"integrity": "sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/@types/trusted-types": {
 			"version": "2.0.2",
 			"license": "MIT"
@@ -7608,6 +7643,15 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/array-each": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+			"integrity": "sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/array-find-index": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -7641,6 +7685,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/array-slice": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+			"integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/array-union": {
 			"version": "2.1.0",
 			"dev": true,
@@ -8910,6 +8963,17 @@
 			],
 			"license": "CC-BY-4.0"
 		},
+		"node_modules/capital-case": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+			"dev": true,
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
+		},
 		"node_modules/capture-exit": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -8961,6 +9025,26 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/change-case": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+			"dev": true,
+			"dependencies": {
+				"camel-case": "^4.1.2",
+				"capital-case": "^1.0.4",
+				"constant-case": "^3.0.4",
+				"dot-case": "^3.0.4",
+				"header-case": "^2.0.4",
+				"no-case": "^3.0.4",
+				"param-case": "^3.0.4",
+				"pascal-case": "^3.1.2",
+				"path-case": "^3.0.4",
+				"sentence-case": "^3.0.4",
+				"snake-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/character-entities": {
 			"version": "2.0.2",
 			"dev": true,
@@ -9534,6 +9618,17 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/constant-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+			"dev": true,
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case": "^2.0.2"
+			}
+		},
 		"node_modules/constants-browserify": {
 			"version": "1.0.0",
 			"dev": true,
@@ -10394,6 +10489,43 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/del": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+			"integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
+			"dev": true,
+			"dependencies": {
+				"globby": "^11.0.1",
+				"graceful-fs": "^4.2.4",
+				"is-glob": "^4.0.1",
+				"is-path-cwd": "^2.2.0",
+				"is-path-inside": "^3.0.2",
+				"p-map": "^4.0.0",
+				"rimraf": "^3.0.2",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/del/node_modules/p-map": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+			"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+			"dev": true,
+			"dependencies": {
+				"aggregate-error": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/delayed-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -10462,6 +10594,15 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/detect-file": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+			"integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/detect-package-manager": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
@@ -11860,6 +12001,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/expand-tilde": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+			"integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
+			"dev": true,
+			"dependencies": {
+				"homedir-polyfill": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/express": {
 			"version": "4.18.1",
 			"dev": true,
@@ -12362,6 +12515,55 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/findup-sync": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz",
+			"integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==",
+			"dev": true,
+			"dependencies": {
+				"detect-file": "^1.0.0",
+				"is-glob": "^4.0.3",
+				"micromatch": "^4.0.4",
+				"resolve-dir": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
+		"node_modules/fined": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/fined/-/fined-2.0.0.tgz",
+			"integrity": "sha512-OFRzsL6ZMHz5s0JrsEr+TpdGNCtrVtnuG3x1yzGNiQHT0yaDnXAj8V/lWcpJVrnoDpcwXcASxAZYbuXda2Y82A==",
+			"dev": true,
+			"dependencies": {
+				"expand-tilde": "^2.0.2",
+				"is-plain-object": "^5.0.0",
+				"object.defaults": "^1.1.0",
+				"object.pick": "^1.3.0",
+				"parse-filepath": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
+		"node_modules/fined/node_modules/is-plain-object": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/flagged-respawn": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-2.0.0.tgz",
+			"integrity": "sha512-Gq/a6YCi8zexmGHMuJwahTGzXlAZAOsbCVKduWXC6TlLCjjFRlExMJc4GC2NYPYZ0r/brw9P7CpRgQmlPVeOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
 		"node_modules/flat-cache": {
 			"version": "3.0.4",
 			"dev": true,
@@ -12432,6 +12634,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/for-own": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+			"integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==",
+			"dev": true,
+			"dependencies": {
+				"for-in": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/foreground-child": {
 			"version": "2.0.0",
 			"dev": true,
@@ -12981,6 +13195,48 @@
 				"process": "^0.11.10"
 			}
 		},
+		"node_modules/global-modules": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+			"integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+			"dev": true,
+			"dependencies": {
+				"global-prefix": "^1.0.1",
+				"is-windows": "^1.0.1",
+				"resolve-dir": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/global-prefix": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+			"integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
+			"dev": true,
+			"dependencies": {
+				"expand-tilde": "^2.0.2",
+				"homedir-polyfill": "^1.0.1",
+				"ini": "^1.3.4",
+				"is-windows": "^1.0.1",
+				"which": "^1.2.14"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/global-prefix/node_modules/which": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+			"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"which": "bin/which"
+			}
+		},
 		"node_modules/globals": {
 			"version": "11.12.0",
 			"dev": true,
@@ -13479,6 +13735,16 @@
 				"he": "bin/he"
 			}
 		},
+		"node_modules/header-case": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+			"dev": true,
+			"dependencies": {
+				"capital-case": "^1.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/headers-polyfill": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.1.0.tgz",
@@ -13495,6 +13761,18 @@
 				"minimalistic-crypto-utils": "^1.0.1"
 			}
 		},
+		"node_modules/homedir-polyfill": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+			"integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+			"dev": true,
+			"dependencies": {
+				"parse-passwd": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/hosted-git-info": {
 			"version": "2.8.9",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -13859,6 +14137,12 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/ini": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+			"dev": true
+		},
 		"node_modules/inline-style-parser": {
 			"version": "0.1.1",
 			"dev": true,
@@ -13996,6 +14280,19 @@
 				"node": ">= 0.10"
 			}
 		},
+		"node_modules/is-absolute": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+			"integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+			"dev": true,
+			"dependencies": {
+				"is-relative": "^1.0.0",
+				"is-windows": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/is-absolute-url": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
@@ -14383,6 +14680,24 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/is-path-cwd": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+			"integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/is-path-inside": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+			"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/is-plain-obj": {
 			"version": "2.1.0",
 			"dev": true,
@@ -14425,6 +14740,18 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/is-relative": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+			"integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+			"dev": true,
+			"dependencies": {
+				"is-unc-path": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/is-set": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
@@ -14509,6 +14836,18 @@
 			"integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
 			"dev": true
 		},
+		"node_modules/is-unc-path": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+			"integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+			"dev": true,
+			"dependencies": {
+				"unc-path-regex": "^0.1.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/is-unicode-supported": {
 			"version": "0.1.0",
 			"dev": true,
@@ -15229,6 +15568,34 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/liftoff": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/liftoff/-/liftoff-4.0.0.tgz",
+			"integrity": "sha512-rMGwYF8q7g2XhG2ulBmmJgWv25qBsqRbDn5gH0+wnuyeFt7QBJlHJmtg5qEdn4pN6WVAUMgXnIxytMFRX9c1aA==",
+			"dev": true,
+			"dependencies": {
+				"extend": "^3.0.2",
+				"findup-sync": "^5.0.0",
+				"fined": "^2.0.0",
+				"flagged-respawn": "^2.0.0",
+				"is-plain-object": "^5.0.0",
+				"object.map": "^1.0.1",
+				"rechoir": "^0.8.0",
+				"resolve": "^1.20.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/liftoff/node_modules/is-plain-object": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/lighthouse-logger": {
 			"version": "1.3.0",
 			"dev": true,
@@ -15382,6 +15749,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/lodash.get": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+			"integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+			"dev": true
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"dev": true,
@@ -15616,6 +15989,18 @@
 				"semver": "bin/semver"
 			}
 		},
+		"node_modules/make-iterator": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
+			"integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
+			"dev": true,
+			"dependencies": {
+				"kind-of": "^6.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/makeerror": {
 			"version": "1.0.12",
 			"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -17538,6 +17923,61 @@
 				"inherits": "2.0.3"
 			}
 		},
+		"node_modules/node-plop": {
+			"version": "0.31.0",
+			"resolved": "https://registry.npmjs.org/node-plop/-/node-plop-0.31.0.tgz",
+			"integrity": "sha512-aKLPxiBoFTNUovvtK8j/Whc4PZREkYx6htw2HJPiU8wYquXmN8pkd9B3xlFo6AJ4ZlzFsQSf/NXR5xET8EqRYw==",
+			"dev": true,
+			"dependencies": {
+				"@types/inquirer": "^8.2.1",
+				"change-case": "^4.1.2",
+				"del": "^6.0.0",
+				"globby": "^13.1.1",
+				"handlebars": "^4.4.3",
+				"inquirer": "^8.2.2",
+				"isbinaryfile": "^4.0.8",
+				"lodash.get": "^4.4.2",
+				"lower-case": "^2.0.2",
+				"mkdirp": "^1.0.4",
+				"resolve": "^1.20.0",
+				"title-case": "^3.0.3",
+				"upper-case": "^2.0.2"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/node-plop/node_modules/globby": {
+			"version": "13.1.2",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz",
+			"integrity": "sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==",
+			"dev": true,
+			"dependencies": {
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.11",
+				"ignore": "^5.2.0",
+				"merge2": "^1.4.1",
+				"slash": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/node-plop/node_modules/slash": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+			"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/node-releases": {
 			"version": "2.0.6",
 			"dev": true,
@@ -17757,6 +18197,21 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/object.defaults": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+			"integrity": "sha512-c/K0mw/F11k4dEUBMW8naXUuBuhxRCfG7W+yFy8EcijU/rSmazOUd1XAEEe6bC0OuXY4HUKjTJv7xbxIMqdxrA==",
+			"dev": true,
+			"dependencies": {
+				"array-each": "^1.0.1",
+				"array-slice": "^1.0.0",
+				"for-own": "^1.0.0",
+				"isobject": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/object.entries": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
@@ -17806,6 +18261,19 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/object.map": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
+			"integrity": "sha512-3+mAJu2PLfnSVGHwIWubpOFLscJANBKuB/6A4CxBstc4aqwQY0FWcsppuy4jU5GSB95yES5JHSI+33AWuS4k6w==",
+			"dev": true,
+			"dependencies": {
+				"for-own": "^1.0.0",
+				"make-iterator": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/object.pick": {
 			"version": "1.3.0",
 			"dev": true,
@@ -18261,6 +18729,20 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/parse-filepath": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+			"integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==",
+			"dev": true,
+			"dependencies": {
+				"is-absolute": "^1.0.0",
+				"map-cache": "^0.2.0",
+				"path-root": "^0.1.1"
+			},
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
 		"node_modules/parse-json": {
 			"version": "5.2.0",
 			"dev": true,
@@ -18278,6 +18760,15 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/parse-passwd": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+			"integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/parse5": {
 			"version": "6.0.1",
 			"dev": true,
@@ -18322,6 +18813,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/path-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+			"dev": true,
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/path-dirname": {
 			"version": "1.0.2",
 			"dev": true,
@@ -18356,6 +18857,27 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/path-root": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+			"integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==",
+			"dev": true,
+			"dependencies": {
+				"path-root-regex": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/path-root-regex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+			"integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/path-to-regexp": {
 			"version": "0.1.7",
 			"dev": true,
@@ -18508,6 +19030,196 @@
 				"msw": ">=0.44.0"
 			}
 		},
+		"node_modules/plop": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/plop/-/plop-3.1.1.tgz",
+			"integrity": "sha512-NuctKmuNUACXBQn25bBr5oj/75nHxdKGwjA/+b7cVoj1sp+gTVqcc8eAr4QcNJgMPsZWRJBN2kMkgmsqbqV9gg==",
+			"dev": true,
+			"dependencies": {
+				"@types/liftoff": "^4.0.0",
+				"chalk": "^5.0.1",
+				"interpret": "^2.2.0",
+				"liftoff": "^4.0.0",
+				"minimist": "^1.2.6",
+				"node-plop": "^0.31.0",
+				"ora": "^6.0.1",
+				"v8flags": "^4.0.0"
+			},
+			"bin": {
+				"plop": "bin/plop.js"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/plop/node_modules/ansi-regex": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/plop/node_modules/bl": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/bl/-/bl-5.0.0.tgz",
+			"integrity": "sha512-8vxFNZ0pflFfi0WXA3WQXlj6CaMEwsmh63I1CNp0q+wWv8sD0ARx1KovSQd0l2GkwrMIOyedq0EF1FxI+RCZLQ==",
+			"dev": true,
+			"dependencies": {
+				"buffer": "^6.0.3",
+				"inherits": "^2.0.4",
+				"readable-stream": "^3.4.0"
+			}
+		},
+		"node_modules/plop/node_modules/buffer": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+			"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.2.1"
+			}
+		},
+		"node_modules/plop/node_modules/chalk": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
+			"integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==",
+			"dev": true,
+			"engines": {
+				"node": "^12.17.0 || ^14.13 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/plop/node_modules/cli-cursor": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+			"integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+			"dev": true,
+			"dependencies": {
+				"restore-cursor": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/plop/node_modules/is-interactive": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+			"integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/plop/node_modules/is-unicode-supported": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
+			"integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/plop/node_modules/log-symbols": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
+			"integrity": "sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^5.0.0",
+				"is-unicode-supported": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/plop/node_modules/ora": {
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-6.1.2.tgz",
+			"integrity": "sha512-EJQ3NiP5Xo94wJXIzAyOtSb0QEIAUu7m8t6UZ9krbz0vAJqr92JpcK/lEXg91q6B9pEGqrykkd2EQplnifDSBw==",
+			"dev": true,
+			"dependencies": {
+				"bl": "^5.0.0",
+				"chalk": "^5.0.0",
+				"cli-cursor": "^4.0.0",
+				"cli-spinners": "^2.6.1",
+				"is-interactive": "^2.0.0",
+				"is-unicode-supported": "^1.1.0",
+				"log-symbols": "^5.1.0",
+				"strip-ansi": "^7.0.1",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/plop/node_modules/restore-cursor": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+			"integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+			"dev": true,
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/plop/node_modules/strip-ansi": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+			"integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
 		"node_modules/pnp-webpack-plugin": {
 			"version": "1.6.4",
 			"resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -19418,6 +20130,18 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/rechoir": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+			"integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+			"dev": true,
+			"dependencies": {
+				"resolve": "^1.20.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
 		"node_modules/redent": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -20074,6 +20798,19 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/resolve-dir": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+			"integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+			"dev": true,
+			"dependencies": {
+				"expand-tilde": "^2.0.0",
+				"global-modules": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "5.0.0",
 			"dev": true,
@@ -20673,6 +21410,17 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/sentence-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+			"dev": true,
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
+		},
 		"node_modules/serialize-javascript": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
@@ -20902,6 +21650,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/snake-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+			"dev": true,
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/snapdragon": {
 			"version": "0.8.2",
 			"dev": true,
@@ -22357,6 +23115,15 @@
 				"globrex": "^0.1.2"
 			}
 		},
+		"node_modules/title-case": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/title-case/-/title-case-3.0.3.tgz",
+			"integrity": "sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==",
+			"dev": true,
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/tmp": {
 			"version": "0.0.33",
 			"dev": true,
@@ -22701,6 +23468,15 @@
 				"through": "^2.3.8"
 			}
 		},
+		"node_modules/unc-path-regex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+			"integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/unfetch": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
@@ -23040,6 +23816,24 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/upper-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+			"dev": true,
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/upper-case-first": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+			"dev": true,
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
 		"node_modules/uri-js": {
 			"version": "4.4.1",
 			"dev": true,
@@ -23226,6 +24020,15 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/v8flags": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-4.0.0.tgz",
+			"integrity": "sha512-83N0OkTbn6gOjJ2awNuzuK4czeGxwEwBoTqlhBZhnp8o0IJ72mXRQKphj/azwRf3acbDJZYZhbOPEJHd884ELg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
 		"node_modules/validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -28087,6 +28890,12 @@
 				"@types/range-parser": "*"
 			}
 		},
+		"@types/fined": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@types/fined/-/fined-1.1.3.tgz",
+			"integrity": "sha512-CWYnSRnun3CGbt6taXeVo2lCbuaj4mchVJ4UF/BdU5TSuIn3AmS13pGMwCsBUoehGbhZrBrpNJZSZI5EVilXww==",
+			"dev": true
+		},
 		"@types/glob": {
 			"version": "7.2.0",
 			"dev": true,
@@ -28125,6 +28934,15 @@
 			"version": "1.8.2",
 			"dev": true
 		},
+		"@types/inquirer": {
+			"version": "8.2.4",
+			"resolved": "https://registry.npmjs.org/@types/inquirer/-/inquirer-8.2.4.tgz",
+			"integrity": "sha512-Pxxx3i3AyK7vKAj3LRM/vF7ETcHKiLJ/u5CnNgbz/eYj/vB3xGAYtRxI5IKtq0hpe5iFHD22BKV3n6WHUu0k4Q==",
+			"dev": true,
+			"requires": {
+				"@types/through": "*"
+			}
+		},
 		"@types/is-function": {
 			"version": "1.0.1",
 			"dev": true
@@ -28184,6 +29002,16 @@
 				"@types/koa": "*"
 			}
 		},
+		"@types/liftoff": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@types/liftoff/-/liftoff-4.0.0.tgz",
+			"integrity": "sha512-Ny/PJkO6nxWAQnaet8q/oWz15lrfwvdvBpuY4treB0CSsBO1CG0fVuNLngR3m3bepQLd+E4c3Y3DlC2okpUvPw==",
+			"dev": true,
+			"requires": {
+				"@types/fined": "*",
+				"@types/node": "*"
+			}
+		},
 		"@types/lodash": {
 			"version": "4.14.182",
 			"dev": true
@@ -28333,6 +29161,15 @@
 			"integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
 			"dev": true
 		},
+		"@types/through": {
+			"version": "0.0.30",
+			"resolved": "https://registry.npmjs.org/@types/through/-/through-0.0.30.tgz",
+			"integrity": "sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==",
+			"dev": true,
+			"requires": {
+				"@types/node": "*"
+			}
+		},
 		"@types/trusted-types": {
 			"version": "2.0.2"
 		},
@@ -29939,6 +30776,12 @@
 			"version": "3.1.0",
 			"dev": true
 		},
+		"array-each": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+			"integrity": "sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==",
+			"dev": true
+		},
 		"array-find-index": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -29961,6 +30804,12 @@
 				"is-string": "^1.0.7"
 			}
 		},
+		"array-slice": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+			"integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
+			"dev": true
+		},
 		"array-union": {
 			"version": "2.1.0",
 			"dev": true
@@ -30827,6 +31676,17 @@
 			"version": "1.0.30001375",
 			"dev": true
 		},
+		"capital-case": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+			"dev": true,
+			"requires": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
+		},
 		"capture-exit": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -30862,6 +31722,26 @@
 				"supports-color": "^5.3.0"
 			}
 		},
+		"change-case": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+			"dev": true,
+			"requires": {
+				"camel-case": "^4.1.2",
+				"capital-case": "^1.0.4",
+				"constant-case": "^3.0.4",
+				"dot-case": "^3.0.4",
+				"header-case": "^2.0.4",
+				"no-case": "^3.0.4",
+				"param-case": "^3.0.4",
+				"pascal-case": "^3.1.2",
+				"path-case": "^3.0.4",
+				"sentence-case": "^3.0.4",
+				"snake-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"character-entities": {
 			"version": "2.0.2",
 			"dev": true
@@ -31257,6 +32137,17 @@
 			"version": "1.1.0",
 			"dev": true
 		},
+		"constant-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+			"dev": true,
+			"requires": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case": "^2.0.2"
+			}
+		},
 		"constants-browserify": {
 			"version": "1.0.0",
 			"dev": true
@@ -31887,6 +32778,33 @@
 				"isobject": "^3.0.1"
 			}
 		},
+		"del": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+			"integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
+			"dev": true,
+			"requires": {
+				"globby": "^11.0.1",
+				"graceful-fs": "^4.2.4",
+				"is-glob": "^4.0.1",
+				"is-path-cwd": "^2.2.0",
+				"is-path-inside": "^3.0.2",
+				"p-map": "^4.0.0",
+				"rimraf": "^3.0.2",
+				"slash": "^3.0.0"
+			},
+			"dependencies": {
+				"p-map": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+					"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+					"dev": true,
+					"requires": {
+						"aggregate-error": "^3.0.0"
+					}
+				}
+			}
+		},
 		"delayed-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -31928,6 +32846,12 @@
 				"repeat-string": "^1.5.4"
 			}
 		},
+		"detect-file": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+			"integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
+			"dev": true
+		},
 		"detect-package-manager": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
@@ -32908,6 +33832,15 @@
 				}
 			}
 		},
+		"expand-tilde": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+			"integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
+			"dev": true,
+			"requires": {
+				"homedir-polyfill": "^1.0.1"
+			}
+		},
 		"express": {
 			"version": "4.18.1",
 			"dev": true,
@@ -33259,6 +34192,45 @@
 				"path-exists": "^4.0.0"
 			}
 		},
+		"findup-sync": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz",
+			"integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==",
+			"dev": true,
+			"requires": {
+				"detect-file": "^1.0.0",
+				"is-glob": "^4.0.3",
+				"micromatch": "^4.0.4",
+				"resolve-dir": "^1.0.1"
+			}
+		},
+		"fined": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/fined/-/fined-2.0.0.tgz",
+			"integrity": "sha512-OFRzsL6ZMHz5s0JrsEr+TpdGNCtrVtnuG3x1yzGNiQHT0yaDnXAj8V/lWcpJVrnoDpcwXcASxAZYbuXda2Y82A==",
+			"dev": true,
+			"requires": {
+				"expand-tilde": "^2.0.2",
+				"is-plain-object": "^5.0.0",
+				"object.defaults": "^1.1.0",
+				"object.pick": "^1.3.0",
+				"parse-filepath": "^1.0.2"
+			},
+			"dependencies": {
+				"is-plain-object": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+					"dev": true
+				}
+			}
+		},
+		"flagged-respawn": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-2.0.0.tgz",
+			"integrity": "sha512-Gq/a6YCi8zexmGHMuJwahTGzXlAZAOsbCVKduWXC6TlLCjjFRlExMJc4GC2NYPYZ0r/brw9P7CpRgQmlPVeOoA==",
+			"dev": true
+		},
 		"flat-cache": {
 			"version": "3.0.4",
 			"dev": true,
@@ -33318,6 +34290,15 @@
 			"version": "1.0.2",
 			"dev": true
 		},
+		"for-own": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+			"integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==",
+			"dev": true,
+			"requires": {
+				"for-in": "^1.0.1"
+			}
+		},
 		"foreground-child": {
 			"version": "2.0.0",
 			"dev": true,
@@ -33680,6 +34661,41 @@
 				"process": "^0.11.10"
 			}
 		},
+		"global-modules": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+			"integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+			"dev": true,
+			"requires": {
+				"global-prefix": "^1.0.1",
+				"is-windows": "^1.0.1",
+				"resolve-dir": "^1.0.0"
+			}
+		},
+		"global-prefix": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+			"integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
+			"dev": true,
+			"requires": {
+				"expand-tilde": "^2.0.2",
+				"homedir-polyfill": "^1.0.1",
+				"ini": "^1.3.4",
+				"is-windows": "^1.0.1",
+				"which": "^1.2.14"
+			},
+			"dependencies": {
+				"which": {
+					"version": "1.3.1",
+					"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+					"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+					"dev": true,
+					"requires": {
+						"isexe": "^2.0.0"
+					}
+				}
+			}
+		},
 		"globals": {
 			"version": "11.12.0",
 			"dev": true
@@ -34003,6 +35019,16 @@
 			"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
 			"dev": true
 		},
+		"header-case": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+			"dev": true,
+			"requires": {
+				"capital-case": "^1.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"headers-polyfill": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.1.0.tgz",
@@ -34018,6 +35044,15 @@
 				"minimalistic-crypto-utils": "^1.0.1"
 			}
 		},
+		"homedir-polyfill": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+			"integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+			"dev": true,
+			"requires": {
+				"parse-passwd": "^1.0.0"
+			}
+		},
 		"hosted-git-info": {
 			"version": "2.8.9",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -34267,6 +35302,12 @@
 			"version": "2.0.4",
 			"dev": true
 		},
+		"ini": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+			"dev": true
+		},
 		"inline-style-parser": {
 			"version": "0.1.1",
 			"dev": true
@@ -34361,6 +35402,16 @@
 			"version": "1.9.1",
 			"dev": true
 		},
+		"is-absolute": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+			"integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+			"dev": true,
+			"requires": {
+				"is-relative": "^1.0.0",
+				"is-windows": "^1.0.1"
+			}
+		},
 		"is-absolute-url": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
@@ -34573,6 +35624,18 @@
 			"version": "1.0.2",
 			"dev": true
 		},
+		"is-path-cwd": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+			"integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+			"dev": true
+		},
+		"is-path-inside": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+			"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+			"dev": true
+		},
 		"is-plain-obj": {
 			"version": "2.1.0",
 			"dev": true
@@ -34599,6 +35662,15 @@
 				"has-tostringtag": "^1.0.0"
 			}
 		},
+		"is-relative": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+			"integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+			"dev": true,
+			"requires": {
+				"is-unc-path": "^1.0.0"
+			}
+		},
 		"is-set": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
@@ -34649,6 +35721,15 @@
 			"integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
 			"dev": true
 		},
+		"is-unc-path": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+			"integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+			"dev": true,
+			"requires": {
+				"unc-path-regex": "^0.1.2"
+			}
+		},
 		"is-unicode-supported": {
 			"version": "0.1.0",
 			"dev": true
@@ -35156,6 +36237,30 @@
 				"type-check": "~0.4.0"
 			}
 		},
+		"liftoff": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/liftoff/-/liftoff-4.0.0.tgz",
+			"integrity": "sha512-rMGwYF8q7g2XhG2ulBmmJgWv25qBsqRbDn5gH0+wnuyeFt7QBJlHJmtg5qEdn4pN6WVAUMgXnIxytMFRX9c1aA==",
+			"dev": true,
+			"requires": {
+				"extend": "^3.0.2",
+				"findup-sync": "^5.0.0",
+				"fined": "^2.0.0",
+				"flagged-respawn": "^2.0.0",
+				"is-plain-object": "^5.0.0",
+				"object.map": "^1.0.1",
+				"rechoir": "^0.8.0",
+				"resolve": "^1.20.0"
+			},
+			"dependencies": {
+				"is-plain-object": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+					"dev": true
+				}
+			}
+		},
 		"lighthouse-logger": {
 			"version": "1.3.0",
 			"dev": true,
@@ -35276,6 +36381,12 @@
 			"version": "4.0.8",
 			"dev": true
 		},
+		"lodash.get": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+			"integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+			"dev": true
+		},
 		"lodash.merge": {
 			"version": "4.6.2",
 			"dev": true
@@ -35429,6 +36540,15 @@
 				}
 			}
 		},
+		"make-iterator": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
+			"integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
+			"dev": true,
+			"requires": {
+				"kind-of": "^6.0.2"
+			}
+		},
 		"makeerror": {
 			"version": "1.0.12",
 			"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -36667,6 +37787,48 @@
 				}
 			}
 		},
+		"node-plop": {
+			"version": "0.31.0",
+			"resolved": "https://registry.npmjs.org/node-plop/-/node-plop-0.31.0.tgz",
+			"integrity": "sha512-aKLPxiBoFTNUovvtK8j/Whc4PZREkYx6htw2HJPiU8wYquXmN8pkd9B3xlFo6AJ4ZlzFsQSf/NXR5xET8EqRYw==",
+			"dev": true,
+			"requires": {
+				"@types/inquirer": "^8.2.1",
+				"change-case": "^4.1.2",
+				"del": "^6.0.0",
+				"globby": "^13.1.1",
+				"handlebars": "^4.4.3",
+				"inquirer": "^8.2.2",
+				"isbinaryfile": "^4.0.8",
+				"lodash.get": "^4.4.2",
+				"lower-case": "^2.0.2",
+				"mkdirp": "^1.0.4",
+				"resolve": "^1.20.0",
+				"title-case": "^3.0.3",
+				"upper-case": "^2.0.2"
+			},
+			"dependencies": {
+				"globby": {
+					"version": "13.1.2",
+					"resolved": "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz",
+					"integrity": "sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==",
+					"dev": true,
+					"requires": {
+						"dir-glob": "^3.0.1",
+						"fast-glob": "^3.2.11",
+						"ignore": "^5.2.0",
+						"merge2": "^1.4.1",
+						"slash": "^4.0.0"
+					}
+				},
+				"slash": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+					"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+					"dev": true
+				}
+			}
+		},
 		"node-releases": {
 			"version": "2.0.6",
 			"dev": true
@@ -36822,6 +37984,18 @@
 				"object-keys": "^1.1.1"
 			}
 		},
+		"object.defaults": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+			"integrity": "sha512-c/K0mw/F11k4dEUBMW8naXUuBuhxRCfG7W+yFy8EcijU/rSmazOUd1XAEEe6bC0OuXY4HUKjTJv7xbxIMqdxrA==",
+			"dev": true,
+			"requires": {
+				"array-each": "^1.0.1",
+				"array-slice": "^1.0.0",
+				"for-own": "^1.0.0",
+				"isobject": "^3.0.0"
+			}
+		},
 		"object.entries": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
@@ -36856,6 +38030,16 @@
 				"es-abstract": "^1.20.1"
 			}
 		},
+		"object.map": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
+			"integrity": "sha512-3+mAJu2PLfnSVGHwIWubpOFLscJANBKuB/6A4CxBstc4aqwQY0FWcsppuy4jU5GSB95yES5JHSI+33AWuS4k6w==",
+			"dev": true,
+			"requires": {
+				"for-own": "^1.0.0",
+				"make-iterator": "^1.0.0"
+			}
+		},
 		"object.pick": {
 			"version": "1.3.0",
 			"dev": true,
@@ -37172,6 +38356,17 @@
 				}
 			}
 		},
+		"parse-filepath": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+			"integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==",
+			"dev": true,
+			"requires": {
+				"is-absolute": "^1.0.0",
+				"map-cache": "^0.2.0",
+				"path-root": "^0.1.1"
+			}
+		},
 		"parse-json": {
 			"version": "5.2.0",
 			"dev": true,
@@ -37182,6 +38377,12 @@
 				"lines-and-columns": "^1.1.6"
 			}
 		},
+		"parse-passwd": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+			"integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+			"dev": true
+		},
 		"parse5": {
 			"version": "6.0.1",
 			"dev": true
@@ -37215,6 +38416,16 @@
 			"version": "0.0.1",
 			"dev": true
 		},
+		"path-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+			"dev": true,
+			"requires": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"path-dirname": {
 			"version": "1.0.2",
 			"dev": true
@@ -37235,6 +38446,21 @@
 			"version": "1.0.7",
 			"dev": true
 		},
+		"path-root": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+			"integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==",
+			"dev": true,
+			"requires": {
+				"path-root-regex": "^0.1.0"
+			}
+		},
+		"path-root-regex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+			"integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==",
+			"dev": true
+		},
 		"path-to-regexp": {
 			"version": "0.1.7",
 			"dev": true
@@ -37329,6 +38555,124 @@
 			"version": "1.0.0",
 			"dev": true
 		},
+		"plop": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/plop/-/plop-3.1.1.tgz",
+			"integrity": "sha512-NuctKmuNUACXBQn25bBr5oj/75nHxdKGwjA/+b7cVoj1sp+gTVqcc8eAr4QcNJgMPsZWRJBN2kMkgmsqbqV9gg==",
+			"dev": true,
+			"requires": {
+				"@types/liftoff": "^4.0.0",
+				"chalk": "^5.0.1",
+				"interpret": "^2.2.0",
+				"liftoff": "^4.0.0",
+				"minimist": "^1.2.6",
+				"node-plop": "^0.31.0",
+				"ora": "^6.0.1",
+				"v8flags": "^4.0.0"
+			},
+			"dependencies": {
+				"ansi-regex": {
+					"version": "6.0.1",
+					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+					"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+					"dev": true
+				},
+				"bl": {
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/bl/-/bl-5.0.0.tgz",
+					"integrity": "sha512-8vxFNZ0pflFfi0WXA3WQXlj6CaMEwsmh63I1CNp0q+wWv8sD0ARx1KovSQd0l2GkwrMIOyedq0EF1FxI+RCZLQ==",
+					"dev": true,
+					"requires": {
+						"buffer": "^6.0.3",
+						"inherits": "^2.0.4",
+						"readable-stream": "^3.4.0"
+					}
+				},
+				"buffer": {
+					"version": "6.0.3",
+					"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+					"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+					"dev": true,
+					"requires": {
+						"base64-js": "^1.3.1",
+						"ieee754": "^1.2.1"
+					}
+				},
+				"chalk": {
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz",
+					"integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==",
+					"dev": true
+				},
+				"cli-cursor": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+					"integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+					"dev": true,
+					"requires": {
+						"restore-cursor": "^4.0.0"
+					}
+				},
+				"is-interactive": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+					"integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+					"dev": true
+				},
+				"is-unicode-supported": {
+					"version": "1.3.0",
+					"resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
+					"integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
+					"dev": true
+				},
+				"log-symbols": {
+					"version": "5.1.0",
+					"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
+					"integrity": "sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==",
+					"dev": true,
+					"requires": {
+						"chalk": "^5.0.0",
+						"is-unicode-supported": "^1.1.0"
+					}
+				},
+				"ora": {
+					"version": "6.1.2",
+					"resolved": "https://registry.npmjs.org/ora/-/ora-6.1.2.tgz",
+					"integrity": "sha512-EJQ3NiP5Xo94wJXIzAyOtSb0QEIAUu7m8t6UZ9krbz0vAJqr92JpcK/lEXg91q6B9pEGqrykkd2EQplnifDSBw==",
+					"dev": true,
+					"requires": {
+						"bl": "^5.0.0",
+						"chalk": "^5.0.0",
+						"cli-cursor": "^4.0.0",
+						"cli-spinners": "^2.6.1",
+						"is-interactive": "^2.0.0",
+						"is-unicode-supported": "^1.1.0",
+						"log-symbols": "^5.1.0",
+						"strip-ansi": "^7.0.1",
+						"wcwidth": "^1.0.1"
+					}
+				},
+				"restore-cursor": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+					"integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+					"dev": true,
+					"requires": {
+						"onetime": "^5.1.0",
+						"signal-exit": "^3.0.2"
+					}
+				},
+				"strip-ansi": {
+					"version": "7.0.1",
+					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+					"integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+					"dev": true,
+					"requires": {
+						"ansi-regex": "^6.0.1"
+					}
+				}
+			}
+		},
 		"pnp-webpack-plugin": {
 			"version": "1.6.4",
 			"resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -37953,6 +39297,15 @@
 				"picomatch": "^2.2.1"
 			}
 		},
+		"rechoir": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+			"integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+			"dev": true,
+			"requires": {
+				"resolve": "^1.20.0"
+			}
+		},
 		"redent": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -38396,6 +39749,16 @@
 				"supports-preserve-symlinks-flag": "^1.0.0"
 			}
 		},
+		"resolve-dir": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+			"integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+			"dev": true,
+			"requires": {
+				"expand-tilde": "^2.0.0",
+				"global-modules": "^1.0.0"
+			}
+		},
 		"resolve-from": {
 			"version": "5.0.0",
 			"dev": true
@@ -38841,6 +40204,17 @@
 				}
 			}
 		},
+		"sentence-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+			"dev": true,
+			"requires": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
+		},
 		"serialize-javascript": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
@@ -39008,6 +40382,16 @@
 				}
 			}
 		},
+		"snake-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+			"dev": true,
+			"requires": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
 		"snapdragon": {
 			"version": "0.8.2",
 			"dev": true,
@@ -40049,6 +41433,15 @@
 				"globrex": "^0.1.2"
 			}
 		},
+		"title-case": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/title-case/-/title-case-3.0.3.tgz",
+			"integrity": "sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==",
+			"dev": true,
+			"requires": {
+				"tslib": "^2.0.3"
+			}
+		},
 		"tmp": {
 			"version": "0.0.33",
 			"dev": true,
@@ -40263,6 +41656,12 @@
 				"through": "^2.3.8"
 			}
 		},
+		"unc-path-regex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+			"integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
+			"dev": true
+		},
 		"unfetch": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
@@ -40473,6 +41872,24 @@
 				}
 			}
 		},
+		"upper-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+			"dev": true,
+			"requires": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"upper-case-first": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+			"dev": true,
+			"requires": {
+				"tslib": "^2.0.3"
+			}
+		},
 		"uri-js": {
 			"version": "4.4.1",
 			"dev": true,
@@ -40606,6 +42023,12 @@
 				}
 			}
 		},
+		"v8flags": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-4.0.0.tgz",
+			"integrity": "sha512-83N0OkTbn6gOjJ2awNuzuK4czeGxwEwBoTqlhBZhnp8o0IJ72mXRQKphj/azwRf3acbDJZYZhbOPEJHd884ELg==",
+			"dev": true
+		},
 		"validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 60cf68d69a..690c03758d 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -31,7 +31,8 @@
 		"generate:api": "npx openapi-typescript schemas/**/*.yml --output schemas/generated-schema.ts",
 		"storybook": "npm run pre-run && start-storybook -p 6006",
 		"build-storybook": "npm run pre-run && build-storybook",
-		"generate:icons": "node ./scripts/generate-icons.mjs"
+		"generate:icons": "node ./scripts/generate-icons.mjs",
+		"new:extension": "plop  --plopfile ./devops/plop/plop.mjs"
 	},
 	"engines": {
 		"node": ">=16.0.0 <17",
@@ -85,6 +86,7 @@
 		"msw": "^0.47.3",
 		"msw-storybook-addon": "^1.6.3",
 		"playwright-msw": "^1.0.0",
+		"plop": "^3.1.1",
 		"prettier": "2.7.1",
 		"tiny-glob": "^0.2.9",
 		"typescript": "^4.8.3",

From 7a85407010dd9fe23327f7c0c64449af661824fe Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 14:51:37 +0200
Subject: [PATCH 09/28] add files for block list, checkbox-list and toggle
 property editor ui's

---
 .../property-editor-ui-block-list.element.ts  | 29 +++++++++++++++++++
 .../property-editor-ui-block-list.stories.ts  | 15 ++++++++++
 .../property-editor-ui-block-list.test.ts     | 21 ++++++++++++++
 ...roperty-editor-ui-checkbox-list.element.ts | 29 +++++++++++++++++++
 ...roperty-editor-ui-checkbox-list.stories.ts | 15 ++++++++++
 .../property-editor-ui-checkbox-list.test.ts  | 21 ++++++++++++++
 .../property-editor-ui-toggle.element.ts      | 29 +++++++++++++++++++
 .../property-editor-ui-toggle.stories.ts      | 15 ++++++++++
 .../toggle/property-editor-ui-toggle.test.ts  | 21 ++++++++++++++
 9 files changed, 195 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.element.ts
new file mode 100644
index 0000000000..992d8a081a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-block-list
+ */
+@customElement('umb-property-editor-ui-block-list')
+export class UmbPropertyEditorUIBlockListElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-block-list</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIBlockListElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-block-list': UmbPropertyEditorUIBlockListElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.stories.ts
new file mode 100644
index 0000000000..c04c90de3a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIBlockListElement } from './property-editor-ui-block-list.element';
+import './property-editor-ui-block-list.element';
+
+export default {
+	title: 'Property Editor UIs/Block List',
+	component: 'umb-property-editor-ui-block-list',
+	id: 'umb-property-editor-ui-block-list',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIBlockListElement> = () =>
+	html`<umb-property-editor-ui-block-list></umb-property-editor-ui-block-list>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts
new file mode 100644
index 0000000000..c126ad62e5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbPropertyEditorUIBlockListElement } from './umb-property-editor-ui-block-list.element';
+
+describe('UmbPropertyEditorUIBlockListElement', () => {
+  let element: UmbPropertyEditorUIBlockListElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-block-list></umb-property-editor-ui-block-list> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockListElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
new file mode 100644
index 0000000000..55999e60dc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-checkbox-list
+ */
+@customElement('umb-property-editor-ui-checkbox-list')
+export class UmbPropertyEditorUICheckboxListElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-checkbox-list</div>`;
+	}
+}
+
+export default UmbPropertyEditorUICheckboxListElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-checkbox-list': UmbPropertyEditorUICheckboxListElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts
new file mode 100644
index 0000000000..e47e8c68c2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUICheckboxListElement } from './property-editor-ui-checkbox-list.element';
+import './property-editor-ui-checkbox-list.element';
+
+export default {
+	title: 'Property Editor UIs/Checkbox List',
+	component: 'umb-property-editor-ui-checkbox-list',
+	id: 'umb-property-editor-ui-checkbox-list',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUICheckboxListElement> = () =>
+	html`<umb-property-editor-ui-checkbox-list></umb-property-editor-ui-checkbox-list>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts
new file mode 100644
index 0000000000..34363187d5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbPropertyEditorUICheckboxListElement } from './umb-property-editor-ui-checkbox-list.element';
+
+describe('UmbPropertyEditorUICheckboxListElement', () => {
+  let element: UmbPropertyEditorUICheckboxListElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-checkbox-list></umb-property-editor-ui-checkbox-list> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUICheckboxListElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.element.ts
new file mode 100644
index 0000000000..5488b9b2ee
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-toggle
+ */
+@customElement('umb-property-editor-ui-toggle')
+export class UmbPropertyEditorUIToggleElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-toggle</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIToggleElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-toggle': UmbPropertyEditorUIToggleElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.stories.ts
new file mode 100644
index 0000000000..4720a23399
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIToggleElement } from './property-editor-ui-toggle.element';
+import './property-editor-ui-toggle.element';
+
+export default {
+	title: 'Property Editor UIs/Toggle',
+	component: 'umb-property-editor-ui-toggle',
+	id: 'umb-property-editor-ui-toggle',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIToggleElement> = () =>
+	html`<umb-property-editor-ui-toggle></umb-property-editor-ui-toggle>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts
new file mode 100644
index 0000000000..41524ff436
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbPropertyEditorUIToggleElement } from './umb-property-editor-ui-toggle.element';
+
+describe('UmbPropertyEditorUIToggleElement', () => {
+  let element: UmbPropertyEditorUIToggleElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-toggle></umb-property-editor-ui-toggle> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIToggleElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});

From ea7944e6336859bc905627903f4bce1c43a87de6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 15:03:29 +0200
Subject: [PATCH 10/28] add new property editor ui's to manifest

---
 .../property-editor-ui.ts                     | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
index e4119f060f..8b75853d91 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -1,6 +1,42 @@
 import type { ManifestTypes } from '../core/models';
 
 export const manifests: Array<ManifestTypes & { loader: () => Promise<object | HTMLElement> }> = [
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.BlockList',
+		name: 'Block List Property Editor UI',
+		loader: () => import('../backoffice/property-editor-uis/block-list/property-editor-ui-block-list.element'),
+		meta: {
+			label: 'Block List',
+			icon: 'umb:thumbnail-list',
+			group: 'Lists',
+			propertyEditor: 'Umbraco.BlockList',
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.Toggle',
+		name: 'Toggle Property Editor UI',
+		loader: () => import('../backoffice/property-editor-uis/toggle/property-editor-ui-toggle.element'),
+		meta: {
+			label: 'Toggle',
+			icon: 'umb:checkbox',
+			group: 'Common',
+			propertyEditor: 'Umbraco.TrueFalse',
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.CheckboxList',
+		name: 'Checkbox List Property Editor UI',
+		loader: () => import('../backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.element'),
+		meta: {
+			label: 'Checkbox List',
+			icon: 'umb:bulleted-list',
+			group: 'Lists',
+			propertyEditor: 'Umbraco.CheckBoxList',
+		},
+	},
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Text',

From ce14e78df26e4a23c13ce52ab9c509be680edc3c Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 15:03:42 +0200
Subject: [PATCH 11/28] move content picker into ui folder

---
 .../property-editor-ui-checkbox-list.test.ts  | 19 +++++++++++++++
 ...perty-editor-ui-content-picker.element.ts} |  8 ++++---
 ...operty-editor-ui-content-picker.stories.ts | 24 +++++++++++++++++++
 .../property-editor-content-picker.stories.ts | 24 -------------------
 .../property-editor-ui.ts                     |  3 +--
 5 files changed, 49 insertions(+), 29 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts
 rename src/Umbraco.Web.UI.Client/src/backoffice/{property-editors/content-picker/property-editor-content-picker.element.ts => property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts} (91%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/content-picker/property-editor-content-picker.stories.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts
new file mode 100644
index 0000000000..8d91848d0c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts
@@ -0,0 +1,19 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbPropertyEditorUIContentPickerElement } from './umb-property-editor-ui-content-picker.element';
+
+describe('UmbPropertyEditorUIContentPickerElement', () => {
+	let element: UmbPropertyEditorUIContentPickerElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-content-picker></umb-property-editor-ui-content-picker> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUIContentPickerElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/content-picker/property-editor-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts
similarity index 91%
rename from src/Umbraco.Web.UI.Client/src/backoffice/property-editors/content-picker/property-editor-content-picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts
index 35325101f2..e32e2f2d38 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/content-picker/property-editor-content-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts
@@ -8,8 +8,8 @@ import type { UmbModalService } from '../../../core/services/modal';
 import type { UmbEntityStore } from '../../../core/stores/entity.store';
 import type { Entity } from '../../../mocks/data/entities';
 
-@customElement('umb-property-editor-content-picker')
-export class UmbPropertyEditorContentPickerElement extends UmbContextConsumerMixin(LitElement) {
+@customElement('umb-property-editor-ui-content-picker')
+export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -117,8 +117,10 @@ export class UmbPropertyEditorContentPickerElement extends UmbContextConsumerMix
 	}
 }
 
+export default UmbPropertyEditorUIContentPickerElement;
+
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-content-picker': UmbPropertyEditorContentPickerElement;
+		'umb-property-editor-ui-content-picker': UmbPropertyEditorUIContentPickerElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts
new file mode 100644
index 0000000000..5321c23b9a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts
@@ -0,0 +1,24 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-content-picker.element';
+import './property-editor-ui-content-picker.element';
+import { UmbModalService } from '../../../core/services/modal';
+import '../../components/backoffice-modal-container.element';
+
+export default {
+	title: 'Property Editor UIs/Content Picker',
+	component: 'umb-property-editor-ui-content-picker',
+	id: 'umb-property-editor-ui-content-picker',
+	decorators: [
+		(story) =>
+			html`<umb-context-provider key="umbModalService" .value=${new UmbModalService()}>
+				${story()}
+				<umb-backoffice-modal-container></umb-backoffice-modal-container>
+			</umb-context-provider>`,
+	],
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIContentPickerElement> = () =>
+	html` <umb-property-editor-ui-content-picker></umb-property-editor-ui-content-picker>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/content-picker/property-editor-content-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/content-picker/property-editor-content-picker.stories.ts
deleted file mode 100644
index a4bb291730..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/content-picker/property-editor-content-picker.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
-
-import type { UmbPropertyEditorContentPickerElement } from './property-editor-content-picker.element';
-import './property-editor-content-picker.element';
-import { UmbModalService } from '../../../core/services/modal';
-import '../../../backoffice/components/backoffice-modal-container.element';
-
-export default {
-	title: 'Property Editors/Content Picker',
-	component: 'umb-property-editor-content-picker',
-	id: 'umb-property-editor-content-picker',
-	decorators: [
-		(story) =>
-			html`<umb-context-provider key="umbModalService" .value=${new UmbModalService()}>
-				${story()}
-				<umb-backoffice-modal-container></umb-backoffice-modal-container>
-			</umb-context-provider>`,
-	],
-} as Meta;
-
-export const AAAOverview: Story<UmbPropertyEditorContentPickerElement> = () =>
-	html` <umb-property-editor-content-picker></umb-property-editor-content-picker>`;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
index 8b75853d91..866692f150 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -115,8 +115,7 @@ export const manifests: Array<ManifestTypes & { loader: () => Promise<object | H
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.ContentPicker',
 		name: 'Content Picker Property Editor UI',
-		elementName: 'umb-property-editor-content-picker',
-		loader: () => import('../backoffice/property-editors/content-picker/property-editor-content-picker.element'),
+		loader: () => import('../backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element'),
 		meta: {
 			label: 'Content Picker',
 			propertyEditor: 'Umbraco.ContentPicker',

From a2a3336ffa361b6eff267057210f70e225677fa7 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 15:11:01 +0200
Subject: [PATCH 12/28] move number into ui folder

---
 .../number/property-editor-ui-number.element.ts}  |  8 ++++----
 .../number/property-editor-ui-number.stories.ts   | 15 +++++++++++++++
 .../number/property-editor-number.stories.ts      | 15 ---------------
 .../temp-internal-manifests/property-editor-ui.ts |  2 +-
 4 files changed, 20 insertions(+), 20 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/backoffice/{property-editors/number/property-editor-number.element.ts => property-editor-uis/number/property-editor-ui-number.element.ts} (75%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/number/property-editor-ui-number.stories.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/number/property-editor-ui-number.element.ts
similarity index 75%
rename from src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/number/property-editor-ui-number.element.ts
index a979e6ef9f..8461d2c513 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/number/property-editor-ui-number.element.ts
@@ -2,8 +2,8 @@ import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 
-@customElement('umb-property-editor-number')
-export class UmbPropertyEditorNumberElement extends LitElement {
+@customElement('umb-property-editor-ui-number')
+export class UmbPropertyEditorUINumberElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -29,10 +29,10 @@ export class UmbPropertyEditorNumberElement extends LitElement {
 	}
 }
 
-export default UmbPropertyEditorNumberElement;
+export default UmbPropertyEditorUINumberElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-number': UmbPropertyEditorNumberElement;
+		'umb-property-editor-ui-number': UmbPropertyEditorUINumberElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/number/property-editor-ui-number.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/number/property-editor-ui-number.stories.ts
new file mode 100644
index 0000000000..be74c018be
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/number/property-editor-ui-number.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUINumberElement } from './property-editor-ui-number.element';
+import './property-editor-ui-number.element';
+
+export default {
+	title: 'Property Editor UIs/Number',
+	component: 'umb-property-editor-ui-number',
+	id: 'umb-property-editor-ui-number',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUINumberElement> = () =>
+	html` <umb-property-editor-ui-number></umb-property-editor-ui-number>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts
deleted file mode 100644
index d9d2915599..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/number/property-editor-number.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
-
-import type { UmbPropertyEditorNumberElement } from './property-editor-number.element';
-import './property-editor-number.element';
-
-export default {
-	title: 'Property Editors/Number',
-	component: 'umb-property-editor-number',
-	id: 'umb-property-editor-number',
-} as Meta;
-
-export const AAAOverview: Story<UmbPropertyEditorNumberElement> = () =>
-	html` <umb-property-editor-number></umb-property-editor-number>`;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
index 866692f150..cc9fbd176c 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -103,7 +103,7 @@ export const manifests: Array<ManifestTypes & { loader: () => Promise<object | H
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Number',
 		name: 'Number Property Editor UI',
-		loader: () => import('../backoffice/property-editors/number/property-editor-number.element'),
+		loader: () => import('../backoffice/property-editor-uis/number/property-editor-ui-number.element'),
 		meta: {
 			label: 'Number',
 			icon: 'umb:autofill',

From 2f29fef2f08bdffcd39edbe14fa5d046a7eae712 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 15:12:45 +0200
Subject: [PATCH 13/28] delete context example property editor

---
 ...property-editor-context-example.element.ts | 34 -------------------
 ...property-editor-context-example.stories.ts | 24 -------------
 .../src/mocks/data/data-type.data.ts          | 12 -------
 .../src/mocks/data/entities.ts                |  9 -----
 .../src/mocks/data/node.data.ts               |  6 ----
 .../property-editor-ui.ts                     | 27 ---------------
 6 files changed, 112 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.element.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.stories.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.element.ts
deleted file mode 100644
index e1a4bdfe65..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.element.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { UmbContextConsumerMixin } from '../../../core/context';
-import type { UmbNotificationDefaultData } from '../../../core/services/notification/layouts/default';
-import type { UmbNotificationService } from '../../../core/services/notification';
-
-@customElement('umb-property-editor-context-example')
-export class UmbPropertyEditorContextExampleElement extends UmbContextConsumerMixin(LitElement) {
-	private _notificationService?: UmbNotificationService;
-
-	constructor() {
-		super();
-		// TODO: how to deal with single consumption, or situation where you dont want to store the service..
-		this.consumeContext('umbNotificationService', (service: UmbNotificationService) => {
-			this._notificationService = service;
-		});
-	}
-	private _onClick = () => {
-		const data: UmbNotificationDefaultData = { message: 'Hello from property editor' };
-		this._notificationService?.peek('positive', { data });
-	};
-
-	render() {
-		return html`<uui-button look="secondary" label="Click to notify" @click=${this._onClick}></uui-button>`;
-	}
-}
-
-export default UmbPropertyEditorContextExampleElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-property-editor-context-example': UmbPropertyEditorContextExampleElement;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.stories.ts
deleted file mode 100644
index 59a092b0d4..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/context-example/property-editor-context-example.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
-
-import type { UmbPropertyEditorContextExampleElement } from './property-editor-context-example.element';
-import './property-editor-context-example.element';
-import { UmbNotificationService } from '../../../core/services/notification';
-import '../../../backoffice/components/backoffice-notification-container.element';
-
-export default {
-	title: 'Property Editors/Context Example',
-	component: 'umb-property-editor-context-example',
-	id: 'umb-property-editor-context-example',
-	decorators: [
-		(story) =>
-			html`<umb-context-provider key="umbNotificationService" .value=${new UmbNotificationService()}>
-				${story()}
-				<umb-backoffice-notification-container></umb-backoffice-notification-container>
-			</umb-context-provider>`,
-	],
-} as Meta;
-
-export const AAAOverview: Story<UmbPropertyEditorContextExampleElement> = () =>
-	html` <umb-property-editor-context-example></umb-property-editor-context-example>`;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index 9c8aabd08a..5bd9bbd006 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -67,18 +67,6 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'My.PropertyEditorUI.Custom',
 		data: [],
 	},
-	{
-		key: 'dt-4',
-		name: 'Context Example',
-		type: 'dataType',
-		parentKey: '29d78e6c-c1bf-4c15-b820-d511c237ffae',
-		isTrashed: false,
-		hasChildren: false,
-		icon: 'umb:autofill',
-		propertyEditorAlias: 'Umbraco.Custom',
-		propertyEditorUIAlias: 'Umb.PropertyEditorUI.ContextExample',
-		data: [],
-	},
 	{
 		key: 'dt-5',
 		name: 'Content Picker (DataType)',
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/entities.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/entities.ts
index 81fe78ff9c..86620816ac 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/entities.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/entities.ts
@@ -99,15 +99,6 @@ export const entities: Array<Entity> = [
 		type: 'dataType',
 		icon: 'umb:autofill',
 	},
-	{
-		key: 'dt-4',
-		parentKey: '29d78e6c-c1bf-4c15-b820-d511c237ffae',
-		name: 'Context Example',
-		hasChildren: false,
-		isTrashed: false,
-		type: 'dataType',
-		icon: 'umb:autofill',
-	},
 	{
 		key: 'dt-5',
 		parentKey: '29d78e6c-c1bf-4c15-b820-d511c237ffae',
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts
index 2384ee0f3f..5784ddf8c9 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts
@@ -107,12 +107,6 @@ export const data: Array<NodeEntity> = [
 				description: 'This is the a external property',
 				dataTypeKey: 'dt-3',
 			},
-			{
-				alias: 'myContextExampleEditor',
-				label: 'Context example label',
-				description: 'This is the a example property',
-				dataTypeKey: 'dt-4',
-			},
 			{
 				alias: 'myContentPicker',
 				label: 'Content Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
index cc9fbd176c..6d095dfb4c 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -72,33 +72,6 @@ export const manifests: Array<ManifestTypes & { loader: () => Promise<object | H
 			},
 		},
 	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.ContextExample',
-		name: 'Context Example Property Editor UI',
-		loader: () => import('../backoffice/property-editors/context-example/property-editor-context-example.element'),
-		meta: {
-			label: 'Context Example',
-			icon: 'umb:favorite',
-			group: 'Common',
-			propertyEditor: 'Umbraco.Custom',
-			config: {
-				properties: [
-					{
-						label: 'Some Configuration',
-						alias: 'someConfiguration',
-						propertyEditorUI: 'Umb.PropertyEditorUI.Text',
-					},
-				],
-				defaultData: [
-					{
-						alias: 'someConfiguration',
-						value: 'Some default value',
-					},
-				],
-			},
-		},
-	},
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Number',

From c0d82eb210704cad052e93bbef8c5f876bfb88ab Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 15:23:52 +0200
Subject: [PATCH 14/28] move textarea and textbox + align naming

---
 .../entity-property/entity-propery.stories.ts     |  2 +-
 .../property-editor-ui-text-box.element.ts}       |  8 ++++----
 .../property-editor-ui-text-box.stories.ts        | 15 +++++++++++++++
 .../property-editor-ui-textarea.element.ts}       |  8 ++++----
 .../property-editor-ui-textarea.stories.ts        | 15 +++++++++++++++
 .../property-editor-config.stories.ts             |  2 +-
 .../text/property-editor-text.stories.ts          | 15 ---------------
 .../textarea/property-editor-textarea.stories.ts  | 15 ---------------
 .../src/mocks/data/data-type.data.ts              |  2 +-
 .../src/temp-internal-manifests/index.ts          |  4 ++--
 .../temp-internal-manifests/property-editor-ui.ts |  7 +++----
 11 files changed, 46 insertions(+), 47 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/backoffice/{property-editors/text/property-editor-text.element.ts => property-editor-uis/text-box/property-editor-ui-text-box.element.ts} (74%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/text-box/property-editor-ui-text-box.stories.ts
 rename src/Umbraco.Web.UI.Client/src/backoffice/{property-editors/textarea/property-editor-textarea.element.ts => property-editor-uis/textarea/property-editor-ui-textarea.element.ts} (76%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/textarea/property-editor-ui-textarea.stories.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/text/property-editor-text.stories.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/textarea/property-editor-textarea.stories.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-propery.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-propery.stories.ts
index 7c4796f6c9..f0e4721217 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-propery.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-propery.stories.ts
@@ -15,6 +15,6 @@ export const AAAOverview: Story<UmbEntityPropertyElement> = () =>
 		label="Property"
 		description="Description"
 		alias="textProperty"
-		property-editor-ui-alias="Umb.PropertyEditorUI.Text"
+		property-editor-ui-alias="Umb.PropertyEditorUI.TextBox"
 		.value="${'Hello'}"></umb-entity-property>`;
 AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/text/property-editor-text.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/text-box/property-editor-ui-text-box.element.ts
similarity index 74%
rename from src/Umbraco.Web.UI.Client/src/backoffice/property-editors/text/property-editor-text.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/text-box/property-editor-ui-text-box.element.ts
index c67cc20595..4ea729ad37 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/text/property-editor-text.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/text-box/property-editor-ui-text-box.element.ts
@@ -2,8 +2,8 @@ import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 
-@customElement('umb-property-editor-text')
-export class UmbPropertyEditorTextElement extends LitElement {
+@customElement('umb-property-editor-ui-text-box')
+export class UmbPropertyEditorUITextBoxElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -29,10 +29,10 @@ export class UmbPropertyEditorTextElement extends LitElement {
 	}
 }
 
-export default UmbPropertyEditorTextElement;
+export default UmbPropertyEditorUITextBoxElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-text': UmbPropertyEditorTextElement;
+		'umb-property-editor-ui-text-box': UmbPropertyEditorUITextBoxElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/text-box/property-editor-ui-text-box.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/text-box/property-editor-ui-text-box.stories.ts
new file mode 100644
index 0000000000..a636a73f31
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/text-box/property-editor-ui-text-box.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITextBoxElement } from './property-editor-ui-text-box.element';
+import './property-editor-ui-text-box.element';
+
+export default {
+	title: 'Property Editor UIs/Text Box',
+	component: 'umb-property-editor-ui-text-box',
+	id: 'umb-property-editor-ui-text-box',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITextBoxElement> = () =>
+	html` <umb-property-editor-ui-text-box></umb-property-editor-ui-text-box>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/textarea/property-editor-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/textarea/property-editor-ui-textarea.element.ts
similarity index 76%
rename from src/Umbraco.Web.UI.Client/src/backoffice/property-editors/textarea/property-editor-textarea.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/textarea/property-editor-ui-textarea.element.ts
index 22f149043d..595ccadce4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/textarea/property-editor-textarea.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/textarea/property-editor-ui-textarea.element.ts
@@ -2,8 +2,8 @@ import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 
-@customElement('umb-property-editor-textarea')
-export class UmbPropertyEditorTextareaElement extends LitElement {
+@customElement('umb-property-editor-ui-textarea')
+export class UmbPropertyEditorUITextareaElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -30,10 +30,10 @@ export class UmbPropertyEditorTextareaElement extends LitElement {
 	}
 }
 
-export default UmbPropertyEditorTextareaElement;
+export default UmbPropertyEditorUITextareaElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-textarea': UmbPropertyEditorTextareaElement;
+		'umb-property-editor-ui-textarea': UmbPropertyEditorUITextareaElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/textarea/property-editor-ui-textarea.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/textarea/property-editor-ui-textarea.stories.ts
new file mode 100644
index 0000000000..49cfb72302
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/textarea/property-editor-ui-textarea.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITextareaElement } from './property-editor-ui-textarea.element';
+import './property-editor-ui-textarea.element';
+
+export default {
+	title: 'Property Editor UIs/Textarea',
+	component: 'umb-property-editor-ui-textarea',
+	id: 'umb-property-editor-ui-textarea',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITextareaElement> = () =>
+	html` <umb-property-editor-ui-textarea></umb-property-editor-ui-textarea>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts
index e467d25273..85e2f7a2df 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts
@@ -20,6 +20,6 @@ const data = [
 export const AAAOverview: Story<UmbPropertyEditorConfigElement> = () =>
 	html`<umb-property-editor-config
 		property-editor-alias="Umbraco.TextBox"
-		property-editor-ui-alias="Umb.PropertyEditorUI.Text"
+		property-editor-ui-alias="Umb.PropertyEditorUI.TextBox"
 		.data="${data}"></umb-property-editor-config>`;
 AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/text/property-editor-text.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/text/property-editor-text.stories.ts
deleted file mode 100644
index bf3048c69e..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/text/property-editor-text.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
-
-import type { UmbPropertyEditorTextElement } from './property-editor-text.element';
-import './property-editor-text.element';
-
-export default {
-	title: 'Property Editors/Text',
-	component: 'umb-property-editor-text',
-	id: 'umb-property-editor-text',
-} as Meta;
-
-export const AAAOverview: Story<UmbPropertyEditorTextElement> = () =>
-	html` <umb-property-editor-text></umb-property-editor-text>`;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/textarea/property-editor-textarea.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/textarea/property-editor-textarea.stories.ts
deleted file mode 100644
index f5248754a4..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/textarea/property-editor-textarea.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
-
-import type { UmbPropertyEditorTextareaElement } from './property-editor-textarea.element';
-import './property-editor-textarea.element';
-
-export default {
-	title: 'Property Editors/Textarea',
-	component: 'umb-property-editor-textarea',
-	id: 'umb-property-editor-textarea',
-} as Meta;
-
-export const AAAOverview: Story<UmbPropertyEditorTextareaElement> = () =>
-	html` <umb-property-editor-textarea></umb-property-editor-textarea>`;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index 5bd9bbd006..141c11296d 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -26,7 +26,7 @@ export const data: Array<DataTypeDetails> = [
 		hasChildren: false,
 		icon: 'umb:autofill',
 		propertyEditorAlias: 'Umbraco.TextBox',
-		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Text',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.TextBox',
 		data: [
 			{
 				alias: 'maxChars',
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
index 25dd130953..a8053a574a 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
@@ -257,7 +257,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		elementName: 'umb-property-action-copy',
 		loader: () => import('../backoffice/property-actions/copy/property-action-copy.element'),
 		meta: {
-			propertyEditors: ['Umb.PropertyEditorUI.Text'],
+			propertyEditors: ['Umb.PropertyEditorUI.TextBox'],
 		},
 	},
 	{
@@ -267,7 +267,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		elementName: 'umb-property-action-clear',
 		loader: () => import('../backoffice/property-actions/clear/property-action-clear.element'),
 		meta: {
-			propertyEditors: ['Umb.PropertyEditorUI.Text'],
+			propertyEditors: ['Umb.PropertyEditorUI.TextBox'],
 		},
 	},
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
index 6d095dfb4c..ff1f011fcb 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -39,9 +39,9 @@ export const manifests: Array<ManifestTypes & { loader: () => Promise<object | H
 	},
 	{
 		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.Text',
+		alias: 'Umb.PropertyEditorUI.TextBox',
 		name: 'Text Property Editor UI',
-		loader: () => import('../backoffice/property-editors/text/property-editor-text.element'),
+		loader: () => import('../backoffice/property-editor-uis/text-box/property-editor-ui-text-box.element'),
 		meta: {
 			label: 'Text',
 			icon: 'umb:edit',
@@ -53,8 +53,7 @@ export const manifests: Array<ManifestTypes & { loader: () => Promise<object | H
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Textarea',
 		name: 'Textarea Property Editor UI',
-		elementName: 'umb-property-editor-textarea',
-		loader: () => import('../backoffice/property-editors/textarea/property-editor-textarea.element'),
+		loader: () => import('../backoffice/property-editor-uis/textarea/property-editor-ui-textarea.element'),
 		meta: {
 			label: 'Textarea',
 			icon: 'umb:edit',

From be12bf474c77cf39e7b34d1ffdf0ccbbd71e6249 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 15:33:28 +0200
Subject: [PATCH 15/28] move icon picker into folder

---
 .../property-editor-ui-icon-picker.element.ts | 48 +++++++++++++++++++
 .../property-editor-ui-icon-picker.stories.ts | 15 ++++++
 .../property-editor-ui-icon-picker.test.ts    | 21 ++++++++
 .../property-editor-icon-picker.element.ts    | 41 ----------------
 .../src/core/services/modal/modal.service.ts  |  1 +
 .../src/mocks/data/property-editor.data.ts    |  8 ++++
 .../property-editor-ui.ts                     | 12 +++++
 7 files changed, 105 insertions(+), 41 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
new file mode 100644
index 0000000000..ddea6009e1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -0,0 +1,48 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../../core/context';
+import type { UmbModalService } from '../../../core/services/modal';
+
+/**
+ * @element umb-property-editor-ui-icon-picker
+ */
+@customElement('umb-property-editor-ui-icon-picker')
+export class UmbPropertyEditorUIIconPickerElement extends UmbContextConsumerMixin(LitElement) {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	private _modalService?: UmbModalService;
+
+	constructor() {
+		super();
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+		});
+	}
+
+	private _openModal() {
+		this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' });
+	}
+
+	render() {
+		return html`
+			<uui-button label="open-icon-picker" look="secondary" @click=${this._openModal} style="margin-right: 9px;">
+				Pick an icon
+			</uui-button>
+		`;
+	}
+}
+
+export default UmbPropertyEditorUIIconPickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-icon-picker': UmbPropertyEditorUIIconPickerElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts
new file mode 100644
index 0000000000..183d36a9f4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element';
+import './property-editor-ui-icon-picker.element';
+
+export default {
+	title: 'Property Editor UIs/Icon Picker',
+	component: 'umb-property-editor-ui-icon-picker',
+	id: 'umb-property-editor-ui-icon-picker',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIIconPickerElement> = () =>
+	html`<umb-property-editor-ui-icon-picker></umb-property-editor-ui-icon-picker>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
new file mode 100644
index 0000000000..c292f515da
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbPropertyEditorUIIconPickerElement } from './umb-property-editor-ui-icon-picker.element';
+
+describe('UmbPropertyEditorUIIconPickerElement', () => {
+  let element: UmbPropertyEditorUIIconPickerElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-icon-picker></umb-property-editor-ui-icon-picker> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIIconPickerElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts
deleted file mode 100644
index 9b3cbc3b92..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { UmbContextConsumerMixin } from '../../core/context';
-import { UmbModalService } from '../../core/services/modal';
-
-// TODO: remove these imports when they are part of UUI
-import '@umbraco-ui/uui-modal';
-import '@umbraco-ui/uui-modal-sidebar';
-import '@umbraco-ui/uui-modal-container';
-import '@umbraco-ui/uui-modal-dialog';
-
-@customElement('umb-property-editor-icon-picker')
-class UmbPropertyEditorIconPicker extends UmbContextConsumerMixin(LitElement) {
-	private _modalService?: UmbModalService;
-
-	constructor() {
-		super();
-		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
-			this._modalService = modalService;
-		});
-	}
-
-	private _openModal() {
-		this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' });
-	}
-
-	render() {
-		return html`
-			<uui-button label="open-icon-picker" look="secondary" @click=${this._openModal} style="margin-right: 9px;">
-				Pick an icon
-			</uui-button>
-		`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-property-editor-icon-picker': UmbPropertyEditorIconPicker;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
index 99ec1537cc..4eb94c0a0f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
@@ -2,6 +2,7 @@
 import './layouts/confirm/modal-layout-confirm.element';
 import './layouts/content-picker/modal-layout-content-picker.element';
 import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
+import './layouts/icon-picker/modal-layout-icon-picker.element';
 
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { BehaviorSubject, Observable } from 'rxjs';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
index 4fd61a9bff..878144f999 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
@@ -325,6 +325,14 @@ export const data: Array<PropertyEditor> = [
 		icon: 'umb:autofill',
 		alias: 'Umbraco.Custom',
 	},
+	{
+		isSystem: false,
+		group: 'Custom',
+		hasConfig: true,
+		name: 'Icon Picker',
+		icon: 'umb:autofill',
+		alias: 'Umbraco.IconPicker',
+	},
 ];
 
 // Temp mocked database
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
index ff1f011fcb..43fe6acdb3 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -95,4 +95,16 @@ export const manifests: Array<ManifestTypes & { loader: () => Promise<object | H
 			group: 'Common',
 		},
 	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.IconPicker',
+		name: 'Icon Picker Property Editor UI',
+		loader: () => import('../backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element'),
+		meta: {
+			label: 'Icon Picker',
+			propertyEditor: 'Umbraco.IconPicker',
+			icon: 'umb:document',
+			group: 'Common',
+		},
+	},
 ];

From b968211235aa5fd2e11e17eeefa8f432b1777724 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 30 Sep 2022 15:34:25 +0200
Subject: [PATCH 16/28] move shared folder

---
 .../data-type/views/edit/editor-view-data-type-edit.element.ts  | 2 +-
 .../property-editor-config/property-editor-config.element.ts    | 0
 .../property-editor-config/property-editor-config.stories.ts    | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/Umbraco.Web.UI.Client/src/backoffice/{property-editors => property-editor-uis}/shared/property-editor-config/property-editor-config.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/backoffice/{property-editors => property-editor-uis}/shared/property-editor-config/property-editor-config.stories.ts (100%)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
index c9415485e5..ba0d743335 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
@@ -12,7 +12,7 @@ import type { UmbExtensionRegistry } from '../../../../../core/extension';
 import type { UmbPropertyEditorStore } from '../../../../../core/stores/property-editor/property-editor.store';
 import type { ManifestPropertyEditorUI } from '../../../../../core/models';
 
-import '../../../../property-editors/shared/property-editor-config/property-editor-config.element';
+import '../../../../property-editor-uis/shared/property-editor-config/property-editor-config.element';
 
 @customElement('umb-editor-view-data-type-edit')
 export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(LitElement) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.stories.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/backoffice/property-editors/shared/property-editor-config/property-editor-config.stories.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/shared/property-editor-config/property-editor-config.stories.ts

From 02b395475f471d83cfba842b5efac0feb92e7b61 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 5 Oct 2022 10:23:45 +0200
Subject: [PATCH 17/28] fix wrong import in template

---
 .../devops/plop/templates/property-editor-ui/test.ts.hbs        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs
index 43acdc9be2..0a05a1b990 100644
--- a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs
+++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/test.ts.hbs
@@ -1,6 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { defaultA11yConfig } from '../../../core/helpers/chai';
-import { {{ className extensionType name }} } from './{{ extensionTagName extensionType name }}.element';
+import { {{ className extensionType name }} } from './{{ extensionFilename extensionType name }}.element';
 
 describe('{{className extensionType name}}', () => {
   let element: {{className extensionType name}};

From 68546c312da49bcb65d8fe09822afaf7557200f6 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 6 Oct 2022 11:02:00 +0200
Subject: [PATCH 18/28] buttonstates, api calls, popups

---
 src/Umbraco.Web.UI.Client/schemas/api/api.yml |  29 ++++
 .../schemas/generated-schema.ts               |  35 +++++
 .../dashboard-published-status.element.ts     | 127 ++++++++++++++++--
 .../shared/section-dashboards.element.ts      |   9 +-
 .../src/core/api/fetcher.ts                   |   2 +
 .../domains/published-status.handlers.ts      |  19 +++
 .../temp-schema-generator/publishedstatus.ts  |  27 ++++
 7 files changed, 234 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/schemas/api/api.yml b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
index cf8864266f..f8df04d366 100644
--- a/src/Umbraco.Web.UI.Client/schemas/api/api.yml
+++ b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
@@ -134,6 +134,35 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/ProblemDetails'
+  /published-cache/rebuild:
+    post:
+      operationId: PublishedCacheRebuild
+      parameters: []
+      responses:
+        '201':
+          description: 201 response
+        '400':
+          description: 400 response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
+  /published-cache/collect:
+    get:
+      operationId: PublishedCacheCollect
+      responses:
+        '200':
+          description: 200 response
+          content:
+            application/json:
+              schema:
+                type: string
+        default:
+          description: default response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
   /server/status:
     get:
       operationId: GetStatus
diff --git a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
index 2c4423664d..2352052cc2 100644
--- a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
+++ b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
@@ -28,6 +28,12 @@ export interface paths {
   "/published-cache/reload": {
     post: operations["PublishedCacheReload"];
   };
+  "/published-cache/rebuild": {
+    post: operations["PublishedCacheRebuild"];
+  };
+  "/published-cache/collect": {
+    get: operations["PublishedCacheCollect"];
+  };
   "/server/status": {
     get: operations["GetStatus"];
   };
@@ -453,6 +459,35 @@ export interface operations {
       };
     };
   };
+  PublishedCacheRebuild: {
+    parameters: {};
+    responses: {
+      /** 201 response */
+      201: unknown;
+      /** 400 response */
+      400: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+  };
+  PublishedCacheCollect: {
+    responses: {
+      /** 200 response */
+      200: {
+        content: {
+          "application/json": string;
+        };
+      };
+      /** default response */
+      default: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+  };
   GetStatus: {
     responses: {
       /** 200 response */
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
index 5b437546db..4d3eb4a8ed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
@@ -3,8 +3,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
-import { getPublishedCacheStatus, postPublishedCacheReload } from '../../../core/api/fetcher';
+import {
+	getPublishedCacheStatus,
+	postPublishedCacheReload,
+	postPublishedCacheRebuild,
+	getPublishedCacheCollect,
+} from '../../../core/api/fetcher';
 import { UmbContextConsumerMixin } from '../../../core/context';
+import { UmbModalService } from '../../../core/services/modal';
 import { UmbNotificationService } from '../../../core/services/notification';
 import { UmbNotificationDefaultData } from '../../../core/services/notification/layouts/default';
 
@@ -28,7 +34,17 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 	@state()
 	private _buttonState: UUIButtonState = undefined;
 
+	@state()
+	private _buttonStateReload: UUIButtonState = undefined;
+
+	@state()
+	private _buttonStateRebuild: UUIButtonState = undefined;
+
+	@state()
+	private _buttonStateCollect: UUIButtonState = undefined;
+
 	private _notificationService?: UmbNotificationService;
+	private _modalService?: UmbModalService;
 
 	constructor() {
 		super();
@@ -36,14 +52,18 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 		this.consumeContext('umbNotificationService', (notificationService: UmbNotificationService) => {
 			this._notificationService = notificationService;
 		});
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+		});
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-
 		this._getPublishedStatus();
 	}
 
+	// Refresh
+
 	private async _getPublishedStatus() {
 		try {
 			const { data } = await getPublishedCacheStatus({});
@@ -56,11 +76,9 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 			}
 		}
 	}
-
 	private async _onRefreshCacheHandler() {
 		this._buttonState = 'waiting';
 		try {
-			await postPublishedCacheReload({});
 			this._getPublishedStatus();
 			this._buttonState = 'success';
 		} catch (e) {
@@ -73,16 +91,90 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 		}
 	}
 
+	//Reload
+
+	private async _reloadMemoryCache() {
+		this._buttonStateReload = 'waiting';
+		try {
+			await postPublishedCacheReload({});
+			this._buttonStateReload = 'success';
+		} catch (e) {
+			this._buttonStateReload = 'failed';
+			if (e instanceof postPublishedCacheReload.Error) {
+				const error = e.getActualType();
+				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
+				this._notificationService?.peek('danger', { data });
+			}
+		}
+	}
 	private async _onReloadCacheHandler() {
-		await undefined;
+		const modalHandler = this._modalService?.confirm({
+			headline: 'Reload',
+			content: html` Trigger a in-memory and local file cache reload on all servers. `,
+			color: 'danger',
+			confirmLabel: 'Continue',
+		});
+		modalHandler?.onClose.then(({ confirmed }) => {
+			if (confirmed) this._reloadMemoryCache();
+		});
 	}
 
+	// Rebuild
+
+	private async _rebuildDatabaseCache() {
+		this._buttonStateRebuild = 'waiting';
+		try {
+			await postPublishedCacheRebuild({});
+			this._buttonStateRebuild = 'success';
+		} catch (e) {
+			this._buttonStateRebuild = 'failed';
+			if (e instanceof postPublishedCacheRebuild.Error) {
+				const error = e.getActualType();
+				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
+				this._notificationService?.peek('danger', { data });
+			}
+		}
+	}
 	private async _onRebuildCacheHandler() {
-		await undefined;
+		const modalHandler = this._modalService?.confirm({
+			headline: 'Rebuild',
+			content: html` Rebuild content in cmsContentNu database table. Expensive.`,
+			color: 'danger',
+			confirmLabel: 'Continue',
+		});
+		modalHandler?.onClose.then(({ confirmed }) => {
+			if (confirmed) this._rebuildDatabaseCache();
+		});
+	}
+
+	//Collect
+
+	private async _CacheCollect() {
+		try {
+			const { data } = await getPublishedCacheCollect({});
+			console.log(data);
+		} catch (e) {
+			if (e instanceof postPublishedCacheRebuild.Error) {
+				const error = e.getActualType();
+				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
+				this._notificationService?.peek('danger', { data });
+			}
+		}
 	}
 
 	private async _onSnapshotCacheHandler() {
-		await undefined;
+		this._buttonStateCollect = 'waiting';
+		try {
+			this._CacheCollect();
+			this._buttonStateCollect = 'success';
+		} catch (e) {
+			this._buttonStateCollect = 'failed';
+			if (e instanceof postPublishedCacheRebuild.Error) {
+				const error = e.getActualType();
+				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
+				this._notificationService?.peek('danger', { data });
+			}
+		}
 	}
 
 	render() {
@@ -106,7 +198,12 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 					been properly refreshed, after some events triggered—which would indicate a minor Umbraco issue. (note:
 					triggers the reload on all servers in an LB environment).
 				</p>
-				<uui-button type="button" look="primary" color="danger" @click=${this._onReloadCacheHandler}
+				<uui-button
+					type="button"
+					look="primary"
+					color="danger"
+					@click=${this._onReloadCacheHandler}
+					.state=${this._buttonStateReload}
 					>Reload Memory Cache</uui-button
 				>
 			</uui-box>
@@ -117,7 +214,12 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 					expensive. Use it when reloading is not enough, and you think that the database cache has not been properly
 					generated—which would indicate some critical Umbraco issue.
 				</p>
-				<uui-button type="button" look="primary" color="danger" @click=${this._onRebuildCacheHandler}
+				<uui-button
+					type="button"
+					look="primary"
+					color="danger"
+					@click=${this._onRebuildCacheHandler}
+					.state=${this._buttonStateRebuild}
 					>Rebuild Database Cache</uui-button
 				>
 			</uui-box>
@@ -127,7 +229,12 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 					This button lets you trigger a NuCache snapshots collection (after running a fullCLR GC). Unless you know what
 					that means, you probably do not need to use it.
 				</p>
-				<uui-button type="button" look="primary" color="danger" @click=${this._onSnapshotCacheHandler}
+				<uui-button
+					type="button"
+					look="primary"
+					color="danger"
+					@click=${this._onSnapshotCacheHandler}
+					.state=${this._buttonStateCollect}
 					>Snapshot Internal Cache</uui-button
 				>
 			</uui-box>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts
index 3f2ec93220..69f06da640 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts
@@ -25,16 +25,17 @@ export class UmbSectionDashboards extends UmbContextConsumerMixin(LitElement) {
 				height: 70px;
 			}
 
+			#scroll-container {
+				height: calc(100vh - 70px - 60px); // TODO: This is a temporary fix to get scrolling to work
+				// changed it so the height is correct but the fix is still not ideal. the 70px and 60px are the height of the blue top bar and the dashboard menu. Need a better solution still.
+			}
+
 			#router-slot {
 				width: 100%;
 				box-sizing: border-box;
 				padding: var(--uui-size-space-5);
 				display: block;
 			}
-
-			#scroll-container {
-				height: 500px; // TODO: This is a temporary fix to get scrolling to work
-			}
 		`,
 	];
 
diff --git a/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts b/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
index 4d8899883f..7a687f2826 100644
--- a/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
@@ -23,3 +23,5 @@ export const getManifests = fetcher.path('/manifests').method('get').create();
 export const getPackagesInstalled = fetcher.path('/manifests/packages/installed').method('get').create();
 export const getPublishedCacheStatus = fetcher.path('/published-cache/status').method('get').create();
 export const postPublishedCacheReload = fetcher.path('/published-cache/reload').method('post').create();
+export const postPublishedCacheRebuild = fetcher.path('/published-cache/rebuild').method('post').create();
+export const getPublishedCacheCollect = fetcher.path('/published-cache/collect').method('get').create();
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts
index 1cef7b9433..f1404e6771 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts
@@ -21,4 +21,23 @@ export const handlers = [
 			ctx.status(201)
 		);
 	}),
+
+	rest.post(umbracoPath('/published-cache/rebuild'), async (_req, res, ctx) => {
+		await new Promise((resolve) => setTimeout(resolve, (Math.random() + 1) * 1000)); // simulate a delay of 1-2 seconds
+
+		return res(
+			// Respond with a 200 status code
+			ctx.status(201)
+		);
+	}),
+
+	rest.get(umbracoPath('/published-cache/collect'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<string>(
+				'Database cache is ok. ContentStore contains 1 item and has 1 generation and 0 snapshot. MediaStore contains 5 items and has 1 generation and 0 snapshot.'
+			)
+		);
+	}),
 ];
diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/publishedstatus.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/publishedstatus.ts
index 7079625166..35e8dc52c4 100644
--- a/src/Umbraco.Web.UI.Client/temp-schema-generator/publishedstatus.ts
+++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/publishedstatus.ts
@@ -28,3 +28,30 @@ export class PublishedCacheReload {
 	@response({ status: 400 })
 	badRequest(@body body: ProblemDetails) {}
 }
+
+@endpoint({
+	method: 'POST',
+	path: '/published-cache/rebuild',
+})
+export class PublishedCacheRebuild {
+	@request
+	request() {}
+
+	@response({ status: 201 })
+	success() {}
+
+	@response({ status: 400 })
+	badRequest(@body body: ProblemDetails) {}
+}
+
+@endpoint({
+	method: 'GET',
+	path: '/published-cache/collect',
+})
+export class PublishedCacheCollect {
+	@response({ status: 200 })
+	success(@body body: string) {}
+
+	@defaultResponse
+	default(@body body: ProblemDetails) {}
+}

From fdcee8b4d90604ba342b720caea2518999632e9c Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 7 Oct 2022 09:28:15 +0200
Subject: [PATCH 19/28] build fix

---
 src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index c75c729eed..2f04f670b8 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -8,11 +8,9 @@ import { handlers as publishedStatusHandlers } from './domains/published-status.
 import * as serverHandlers from './domains/server.handlers';
 import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
 import { handlers as userHandlers } from './domains/user.handlers';
-import { handlers as treeHandlers } from './domains/entity.handlers';
 import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
 import { handlers as propertyEditorHandlers } from './domains/property-editor.handlers';
 
-
 const handlers = [
 	serverHandlers.serverVersionHandler,
 	...contentHandlers,

From 1ac4fee398f00425968013a0a053434938c599a5 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 7 Oct 2022 10:01:18 +0200
Subject: [PATCH 20/28] cleanup, collect call doesnt return string

---
 .../dashboard-published-status.element.ts     | 42 ++++++-------------
 .../domains/published-status.handlers.ts      |  9 ++--
 2 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
index 4d3eb4a8ed..499d103696 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
@@ -78,28 +78,22 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 	}
 	private async _onRefreshCacheHandler() {
 		this._buttonState = 'waiting';
-		try {
-			this._getPublishedStatus();
-			this._buttonState = 'success';
-		} catch (e) {
-			this._buttonState = 'failed';
-			if (e instanceof postPublishedCacheReload.Error) {
-				const error = e.getActualType();
-				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
-				this._notificationService?.peek('danger', { data });
-			}
-		}
+		await this._getPublishedStatus();
+		this._buttonState = 'success';
 	}
 
 	//Reload
-
 	private async _reloadMemoryCache() {
 		this._buttonStateReload = 'waiting';
+		this._buttonState = 'waiting';
 		try {
 			await postPublishedCacheReload({});
 			this._buttonStateReload = 'success';
+			this._getPublishedStatus();
+			this._buttonState = 'success';
 		} catch (e) {
 			this._buttonStateReload = 'failed';
+			this._buttonState = 'failed';
 			if (e instanceof postPublishedCacheReload.Error) {
 				const error = e.getActualType();
 				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
@@ -120,7 +114,6 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 	}
 
 	// Rebuild
-
 	private async _rebuildDatabaseCache() {
 		this._buttonStateRebuild = 'waiting';
 		try {
@@ -148,33 +141,22 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 	}
 
 	//Collect
-
-	private async _CacheCollect() {
+	private async _cacheCollect() {
 		try {
-			const { data } = await getPublishedCacheCollect({});
-			console.log(data);
+			await getPublishedCacheCollect({});
+			this._buttonStateCollect = 'success';
 		} catch (e) {
-			if (e instanceof postPublishedCacheRebuild.Error) {
+			this._buttonStateCollect = 'failed';
+			if (e instanceof getPublishedCacheCollect.Error) {
 				const error = e.getActualType();
 				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
 				this._notificationService?.peek('danger', { data });
 			}
 		}
 	}
-
 	private async _onSnapshotCacheHandler() {
 		this._buttonStateCollect = 'waiting';
-		try {
-			this._CacheCollect();
-			this._buttonStateCollect = 'success';
-		} catch (e) {
-			this._buttonStateCollect = 'failed';
-			if (e instanceof postPublishedCacheRebuild.Error) {
-				const error = e.getActualType();
-				const data: UmbNotificationDefaultData = { message: error.data.detail ?? 'Something went wrong' };
-				this._notificationService?.peek('danger', { data });
-			}
-		}
+		await this._cacheCollect();
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts
index f1404e6771..63c9207ddc 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/published-status.handlers.ts
@@ -18,7 +18,7 @@ export const handlers = [
 
 		return res(
 			// Respond with a 200 status code
-			ctx.status(201)
+			ctx.status(200)
 		);
 	}),
 
@@ -27,17 +27,14 @@ export const handlers = [
 
 		return res(
 			// Respond with a 200 status code
-			ctx.status(201)
+			ctx.status(200)
 		);
 	}),
 
 	rest.get(umbracoPath('/published-cache/collect'), (_req, res, ctx) => {
 		return res(
 			// Respond with a 200 status code
-			ctx.status(200),
-			ctx.json<string>(
-				'Database cache is ok. ContentStore contains 1 item and has 1 generation and 0 snapshot. MediaStore contains 5 items and has 1 generation and 0 snapshot.'
-			)
+			ctx.status(200)
 		);
 	}),
 ];

From b71087cbeb0825429d5df27629b3e6fb8967ccf7 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 7 Oct 2022 11:05:43 +0200
Subject: [PATCH 21/28] onclose promise

---
 .../published-status/dashboard-published-status.element.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
index 499d103696..8fa3ba2bd4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
@@ -108,7 +108,7 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 			color: 'danger',
 			confirmLabel: 'Continue',
 		});
-		modalHandler?.onClose.then(({ confirmed }) => {
+		modalHandler?.onClose.then(({ confirmed }: any) => {
 			if (confirmed) this._reloadMemoryCache();
 		});
 	}
@@ -135,7 +135,7 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 			color: 'danger',
 			confirmLabel: 'Continue',
 		});
-		modalHandler?.onClose.then(({ confirmed }) => {
+		modalHandler?.onClose.then(({ confirmed }: any) => {
 			if (confirmed) this._rebuildDatabaseCache();
 		});
 	}

From b5f342b51b5c3ea3b04b66042fbcaee2210b17cc Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 7 Oct 2022 11:09:49 +0200
Subject: [PATCH 22/28] onclose fix

---
 .../published-status/dashboard-published-status.element.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
index 8fa3ba2bd4..4080314d5c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/published-status/dashboard-published-status.element.ts
@@ -108,7 +108,7 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 			color: 'danger',
 			confirmLabel: 'Continue',
 		});
-		modalHandler?.onClose.then(({ confirmed }: any) => {
+		modalHandler?.onClose().then(({ confirmed }: any) => {
 			if (confirmed) this._reloadMemoryCache();
 		});
 	}
@@ -135,7 +135,7 @@ export class UmbDashboardPublishedStatusElement extends UmbContextConsumerMixin(
 			color: 'danger',
 			confirmLabel: 'Continue',
 		});
-		modalHandler?.onClose.then(({ confirmed }: any) => {
+		modalHandler?.onClose().then(({ confirmed }: any) => {
 			if (confirmed) this._rebuildDatabaseCache();
 		});
 	}

From 936630652380dcf1531ec2b10cc187826de2fc11 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 7 Oct 2022 16:03:42 +0200
Subject: [PATCH 23/28] fix imports

---
 src/Umbraco.Web.UI.Client/package.json        |  3 ++-
 .../property-editor-ui-block-list.test.ts     | 24 +++++++++----------
 .../property-editor-ui-checkbox-list.test.ts  | 24 +++++++++----------
 .../property-editor-ui-checkbox-list.test.ts  | 19 ---------------
 .../property-editor-ui-icon-picker.test.ts    | 24 +++++++++----------
 .../toggle/property-editor-ui-toggle.test.ts  | 24 +++++++++----------
 6 files changed, 46 insertions(+), 72 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts

diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 1b333786f1..654b555e5b 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -32,7 +32,8 @@
 		"build-storybook": "npm run wc-analyze && build-storybook",
 		"generate:icons": "node ./devops/icons/index.mjs",
 		"wc-analyze": "wca **/*.element.ts --outFile custom-elements.json",
-		"new-extension": "plop  --plopfile ./devops/plop/plop.mjs"
+		"new-extension": "plop  --plopfile ./devops/plop/plop.mjs",
+		"compile": "tsc"
 	},
 	"engines": {
 		"node": ">=16.0.0 <17",
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts
index c126ad62e5..de2b9b5778 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/block-list/property-editor-ui-block-list.test.ts
@@ -1,21 +1,19 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { defaultA11yConfig } from '../../../core/helpers/chai';
-import { UmbPropertyEditorUIBlockListElement } from './umb-property-editor-ui-block-list.element';
+import { UmbPropertyEditorUIBlockListElement } from './property-editor-ui-block-list.element';
 
 describe('UmbPropertyEditorUIBlockListElement', () => {
-  let element: UmbPropertyEditorUIBlockListElement;
+	let element: UmbPropertyEditorUIBlockListElement;
 
-  beforeEach(async () => {
-    element = await fixture(
-      html` <umb-property-editor-ui-block-list></umb-property-editor-ui-block-list> `
-    );
-  });
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-block-list></umb-property-editor-ui-block-list> `);
+	});
 
-  it('is defined with its own instance', () => {
-    expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockListElement);
-  });
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockListElement);
+	});
 
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
-  });
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts
index 34363187d5..cc4b654e61 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/checkbox-list/property-editor-ui-checkbox-list.test.ts
@@ -1,21 +1,19 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { defaultA11yConfig } from '../../../core/helpers/chai';
-import { UmbPropertyEditorUICheckboxListElement } from './umb-property-editor-ui-checkbox-list.element';
+import { UmbPropertyEditorUICheckboxListElement } from './property-editor-ui-checkbox-list.element';
 
 describe('UmbPropertyEditorUICheckboxListElement', () => {
-  let element: UmbPropertyEditorUICheckboxListElement;
+	let element: UmbPropertyEditorUICheckboxListElement;
 
-  beforeEach(async () => {
-    element = await fixture(
-      html` <umb-property-editor-ui-checkbox-list></umb-property-editor-ui-checkbox-list> `
-    );
-  });
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-checkbox-list></umb-property-editor-ui-checkbox-list> `);
+	});
 
-  it('is defined with its own instance', () => {
-    expect(element).to.be.instanceOf(UmbPropertyEditorUICheckboxListElement);
-  });
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUICheckboxListElement);
+	});
 
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
-  });
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts
deleted file mode 100644
index 8d91848d0c..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-checkbox-list.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import { defaultA11yConfig } from '../../../core/helpers/chai';
-import { UmbPropertyEditorUIContentPickerElement } from './umb-property-editor-ui-content-picker.element';
-
-describe('UmbPropertyEditorUIContentPickerElement', () => {
-	let element: UmbPropertyEditorUIContentPickerElement;
-
-	beforeEach(async () => {
-		element = await fixture(html` <umb-property-editor-ui-content-picker></umb-property-editor-ui-content-picker> `);
-	});
-
-	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbPropertyEditorUIContentPickerElement);
-	});
-
-	it('passes the a11y audit', async () => {
-		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
-	});
-});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
index c292f515da..128314c496 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
@@ -1,21 +1,19 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { defaultA11yConfig } from '../../../core/helpers/chai';
-import { UmbPropertyEditorUIIconPickerElement } from './umb-property-editor-ui-icon-picker.element';
+import { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element';
 
 describe('UmbPropertyEditorUIIconPickerElement', () => {
-  let element: UmbPropertyEditorUIIconPickerElement;
+	let element: UmbPropertyEditorUIIconPickerElement;
 
-  beforeEach(async () => {
-    element = await fixture(
-      html` <umb-property-editor-ui-icon-picker></umb-property-editor-ui-icon-picker> `
-    );
-  });
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-icon-picker></umb-property-editor-ui-icon-picker> `);
+	});
 
-  it('is defined with its own instance', () => {
-    expect(element).to.be.instanceOf(UmbPropertyEditorUIIconPickerElement);
-  });
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUIIconPickerElement);
+	});
 
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
-  });
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
 });
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts
index 41524ff436..85aba3b4f0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/toggle/property-editor-ui-toggle.test.ts
@@ -1,21 +1,19 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { defaultA11yConfig } from '../../../core/helpers/chai';
-import { UmbPropertyEditorUIToggleElement } from './umb-property-editor-ui-toggle.element';
+import { UmbPropertyEditorUIToggleElement } from './property-editor-ui-toggle.element';
 
 describe('UmbPropertyEditorUIToggleElement', () => {
-  let element: UmbPropertyEditorUIToggleElement;
+	let element: UmbPropertyEditorUIToggleElement;
 
-  beforeEach(async () => {
-    element = await fixture(
-      html` <umb-property-editor-ui-toggle></umb-property-editor-ui-toggle> `
-    );
-  });
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-toggle></umb-property-editor-ui-toggle> `);
+	});
 
-  it('is defined with its own instance', () => {
-    expect(element).to.be.instanceOf(UmbPropertyEditorUIToggleElement);
-  });
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUIToggleElement);
+	});
 
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
-  });
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
 });

From e5160f73491a5dd082adbc216ccd2f55fcf65ad6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 7 Oct 2022 16:04:16 +0200
Subject: [PATCH 24/28] fix import

---
 src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
index 4b606417e7..2173c71da5 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
@@ -107,7 +107,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Dashboard.Telemetry',
 		name: 'Telemetry',
 		elementName: 'umb-dashboard-telemetry',
-		loader: () => import('./backoffice/dashboards/telemetry/dashboard-telemetry.element'),
+		loader: () => import('../backoffice/dashboards/telemetry/dashboard-telemetry.element'),
 		meta: {
 			label: 'Telemetry Data',
 			sections: ['Umb.Section.Settings'],

From d404970f04ca7f745c509ff3a47f20c85ee7093f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 7 Oct 2022 18:44:50 +0200
Subject: [PATCH 25/28] fix import

---
 src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
index 5aa329fb1a..da55d4b809 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
@@ -3,7 +3,7 @@ import '../core/services/modal/layouts/content-picker/modal-layout-content-picke
 import '../core/context/context-provider.element';
 import '../backoffice/editors/shared/editor-layout/editor-layout.element';
 
-import '../backoffice/property-editors/property-editor-icon-picker.element';
+import '../backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element';
 import '../core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element';
 
 import '@umbraco-ui/uui-modal';

From 3a1ca953ca18f24853f5727e835b47c2fe81dffb Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 7 Oct 2022 19:08:19 +0200
Subject: [PATCH 26/28] open icon picker in storybook

---
 .../.storybook/preview.js                     | 14 ++++
 .../property-editor-ui-icon-picker.element.ts |  2 +-
 .../modal-layout-icon-picker.element.ts       | 80 ++++++++++---------
 .../modal-layout-icon-picker.stories.ts       | 25 ++++++
 .../src/core/services/modal/modal.service.ts  | 12 +++
 .../src/core/services/modal/modal.stories.ts  | 34 +++-----
 .../src/stories/icon-picker.stories.ts        | 40 ----------
 7 files changed, 104 insertions(+), 103 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts

diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js
index e4fcb03dc5..72bc8ca488 100644
--- a/src/Umbraco.Web.UI.Client/.storybook/preview.js
+++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js
@@ -1,6 +1,11 @@
 import '../src/core/context/context-provider.element';
 import '../src/css/custom-properties.css';
+import '../src/backoffice/components/backoffice-modal-container.element';
 import '@umbraco-ui/uui';
+import '@umbraco-ui/uui-modal';
+import '@umbraco-ui/uui-modal-container';
+import '@umbraco-ui/uui-modal-dialog';
+import '@umbraco-ui/uui-modal-sidebar';
 
 import { html } from 'lit-html';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
@@ -18,6 +23,7 @@ import { onUnhandledRequest } from '../src/mocks/browser';
 import { handlers } from '../src/mocks/browser-handlers';
 import { internalManifests } from '../src/temp-internal-manifests';
 import { LitElement } from 'lit';
+import { UmbModalService } from '../src/core/services/modal';
 
 const extensionRegistry = new UmbExtensionRegistry();
 internalManifests.forEach((manifest) => extensionRegistry.register(manifest));
@@ -69,6 +75,13 @@ const propertyEditorConfigStoreProvider = (story) => html`
 	>
 `;
 
+const modalServiceProvider = (story) => html`
+	<umb-context-provider style="display: block; padding: 32px;" key="umbModalService" .value=${new UmbModalService()}>
+		${story()}
+		<umb-backoffice-modal-container></umb-backoffice-modal-container>
+	</umb-context-provider>
+`;
+
 // Initialize MSW
 initialize({ onUnhandledRequest });
 
@@ -82,6 +95,7 @@ export const decorators = [
 	documentTypeStoreProvider,
 	propertyEditorStoreProvider,
 	propertyEditorConfigStoreProvider,
+	modalServiceProvider,
 ];
 
 export const parameters = {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
index ddea6009e1..3c4420a7f4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -27,7 +27,7 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbContextConsumerMixi
 	}
 
 	private _openModal() {
-		this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' });
+		this._modalService?.iconPicker();
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
index dd94ddf65d..a9c9f66145 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
@@ -3,10 +3,15 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbModalLayoutElement } from '../modal-layout.element';
 
-import '../../../../../backoffice/editors/shared/editor-entity/editor-entity.element';
+import '../../../../../backoffice/editors/shared/editor-entity-layout/editor-entity-layout.element';
+
+export interface UmbModalIconPickerData {
+	multiple: boolean;
+	selection: string[];
+}
 
 @customElement('umb-modal-layout-icon-picker')
-class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
+export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbModalIconPickerData> {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -108,38 +113,38 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
 
 	@property({ type: Array })
 	iconlist = [
-		'add',
-		'alert',
-		'attachment',
-		'calendar',
-		'check',
-		'clipboard',
-		'code',
-		'colorpicker',
-		'copy',
-		'delete',
-		'document',
-		'download',
-		'edit',
-		'favorite',
-		'folder',
-		'forbidden',
-		'info',
-		'link',
-		'lock',
-		'pause',
-		'picture',
-		'play',
-		'remove',
-		'search',
-		'see',
-		'settings',
-		'subtract',
-		'sync',
-		'unlock',
-		'unsee',
-		'wand',
-		'wrong',
+		'umb:add',
+		'umb:alert',
+		'umb:attachment',
+		'umb:calendar',
+		'umb:check',
+		'umb:clipboard',
+		'umb:code',
+		'umb:colorpicker',
+		'umb:copy',
+		'umb:delete',
+		'umb:document',
+		'umb:download',
+		'umb:edit',
+		'umb:favorite',
+		'umb:folder',
+		'umb:forbidden',
+		'umb:info',
+		'umb:link',
+		'umb:lock',
+		'umb:pause',
+		'umb:picture',
+		'umb:play',
+		'umb:remove',
+		'umb:search',
+		'umb:see',
+		'umb:settings',
+		'umb:subtract',
+		'umb:sync',
+		'umb:unlock',
+		'umb:unsee',
+		'umb:wand',
+		'umb:wrong',
 	];
 
 	@property({ type: Array })
@@ -229,8 +234,7 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
 
 	render() {
 		return html`
-			<umb-editor-entity>
-				<h4 slot="name">Select icon</h4>
+			<umb-editor-entity-layout headline="Select Icon">
 				<div id="container">
 					${this.renderSearchbar()}
 					<hr />
@@ -244,7 +248,7 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
 				<uui-button slot="actions" color="positive" look="primary" @click="${this._save}" label="save">
 					Save
 				</uui-button>
-			</umb-editor-entity>
+			</umb-editor-entity-layout>
 		`;
 	}
 
@@ -297,6 +301,8 @@ class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<null> {
 	}
 }
 
+export default UmbModalLayoutIconPickerElement;
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-modal-layout-icon-picker': UmbModalLayoutIconPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts
new file mode 100644
index 0000000000..ecf8656afa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/icon-picker/modal-layout-icon-picker.stories.ts
@@ -0,0 +1,25 @@
+import '../../../../../backoffice/editors/shared/editor-layout/editor-layout.element';
+import './modal-layout-icon-picker.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+
+import type { UmbModalLayoutIconPickerElement, UmbModalIconPickerData } from './modal-layout-icon-picker.element';
+
+export default {
+	title: 'API/Modals/Layouts/Icon Picker',
+	component: 'umb-modal-layout-icon-picker',
+	id: 'modal-layout-icon-picker',
+} as Meta;
+
+const data: UmbModalIconPickerData = {
+	multiple: true,
+	selection: [],
+};
+
+export const Overview: Story<UmbModalLayoutIconPickerElement> = () => html`
+	<!-- TODO: figure out if generics are allowed for properties:
+	https://github.com/runem/lit-analyzer/issues/149
+	https://github.com/runem/lit-analyzer/issues/163 -->
+	<umb-modal-layout-icon-picker .data=${data as any}></umb-modal-layout-icon-picker>
+`;
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
index b4d8a47160..dc8744ddc5 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
@@ -11,6 +11,7 @@ import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm
 import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element';
 import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
 import { UmbModalHandler } from './';
+import { UmbModalIconPickerData } from './layouts/icon-picker/modal-layout-icon-picker.element';
 
 export type UmbModelType = 'dialog' | 'sidebar';
 
@@ -57,6 +58,17 @@ export class UmbModalService {
 		return this.open('umb-modal-layout-property-editor-ui-picker', { data, type: 'sidebar', size: 'small' });
 	}
 
+	/**
+	 * Opens an Icon Picker sidebar modal
+	 * @public
+	 * @param {UmbModalIconPickerData} [data]
+	 * @return {*}  {UmbModalHandler}
+	 * @memberof UmbModalService
+	 */
+	public iconPicker(data?: UmbModalIconPickerData): UmbModalHandler {
+		return this.open('umb-modal-layout-icon-picker', { data, type: 'sidebar', size: 'small' });
+	}
+
 	/**
 	 * Opens a modal or sidebar modal
 	 * @public
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
index 2c509cb4a2..a675f9494f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
@@ -1,12 +1,3 @@
-import '../../../backoffice/components/backoffice-modal-container.element';
-import '../../../backoffice/editors/shared/editor-layout/editor-layout.element';
-import '../../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element';
-import '../../context/context-provider.element';
-import '@umbraco-ui/uui-modal';
-import '@umbraco-ui/uui-modal-container';
-import '@umbraco-ui/uui-modal-dialog';
-import '@umbraco-ui/uui-modal-sidebar';
-
 import { Meta, Story } from '@storybook/web-components';
 import { LitElement } from 'lit';
 import { html } from 'lit-html';
@@ -17,19 +8,12 @@ import { UmbModalService } from './';
 
 export default {
 	title: 'API/Modals',
-	component: 'umb-installer',
-	decorators: [
-		(story) =>
-			html`<umb-context-provider
-				style="display: block; padding: 32px;"
-				key="umbModalService"
-				.value=${new UmbModalService()}>
-				${story()}
-			</umb-context-provider>`,
-	],
-	id: 'installer-page',
+	id: 'umb-modal-service',
 	argTypes: {
-		modalLayout: { control: 'select', options: ['Confirm', 'Content Picker', 'Property Editor UI Picker'] },
+		modalLayout: {
+			control: 'select',
+			options: ['Confirm', 'Content Picker', 'Property Editor UI Picker', 'Icon Picker'],
+		},
 	},
 } as Meta;
 
@@ -58,6 +42,9 @@ export class StoryModalServiceExampleElement extends UmbContextConsumerMixin(Lit
 			case 'Property Editor UI Picker':
 				this._modalService?.propertyEditorUIPicker();
 				break;
+			case 'Icon Picker':
+				this._modalService?.iconPicker();
+				break;
 			default:
 				this._modalService?.confirm({
 					headline: 'Headline',
@@ -77,10 +64,7 @@ export class StoryModalServiceExampleElement extends UmbContextConsumerMixin(Lit
 }
 
 const Template: Story = (props) => {
-	return html`
-		<umb-backoffice-modal-container></umb-backoffice-modal-container>
-		<story-modal-service-example .modalLayout=${props.modalLayout}></story-modal-service-example>
-	`;
+	return html` <story-modal-service-example .modalLayout=${props.modalLayout}></story-modal-service-example> `;
 };
 
 export const Overview = Template.bind({});
diff --git a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
deleted file mode 100644
index da55d4b809..0000000000
--- a/src/Umbraco.Web.UI.Client/src/stories/icon-picker.stories.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import '../backoffice/components/backoffice-modal-container.element';
-import '../core/services/modal/layouts/content-picker/modal-layout-content-picker.element';
-import '../core/context/context-provider.element';
-import '../backoffice/editors/shared/editor-layout/editor-layout.element';
-
-import '../backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element';
-import '../core/services/modal/layouts/icon-picker/modal-layout-icon-picker.element';
-
-import '@umbraco-ui/uui-modal';
-import '@umbraco-ui/uui-modal-container';
-import '@umbraco-ui/uui-modal-sidebar';
-import '@umbraco-ui/uui-modal-dialog';
-
-import { Meta } from '@storybook/web-components';
-import { html } from 'lit-html';
-import { UmbModalService } from '../core/services/modal';
-
-export default {
-	title: 'Editors/Icon Picker',
-	component: 'umb-property-editor-icon-picker',
-	id: 'icon-picker',
-	decorators: [
-		(story) =>
-			html`
-				<uui-icon-registry-essential>
-					<umb-context-provider
-						style="display: block; padding: 32px;"
-						key="umbModalService"
-						.value=${new UmbModalService()}>
-						${story()}
-					</umb-context-provider>
-				</uui-icon-registry-essential>
-			`,
-	],
-} as Meta;
-
-export const IconPickerEditor = () => html`<umb-backoffice-modal-container></umb-backoffice-modal-container>
-	<umb-property-editor-icon-picker></umb-property-editor-icon-picker>`;
-
-export const IconPickerModalLayout = () => html`<umb-modal-layout-icon-picker></umb-modal-layout-icon-picker>`;

From a23d23f27da624c755228685c89284e129fc1c76 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 7 Oct 2022 19:09:54 +0200
Subject: [PATCH 27/28] add type to imports

---
 .../src/core/services/modal/modal-handler.ts                | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts
index 10b0b76a16..c97f3ebd9b 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts
@@ -1,6 +1,6 @@
-import { UUIDialogElement } from '@umbraco-ui/uui';
-import { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog';
-import { UUIModalSidebarElement, UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import type { UUIDialogElement } from '@umbraco-ui/uui';
+import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog';
+import type { UUIModalSidebarElement, UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { v4 as uuidv4 } from 'uuid';
 
 import { UmbModalOptions } from './modal.service';

From 4be679f92c9f19b302a011867e7d0a0589ce8b8c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 7 Oct 2022 18:34:43 +0000
Subject: [PATCH 28/28] Bump vite from 3.1.4 to 3.1.6

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 3.1.4 to 3.1.6.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v3.1.6/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v3.1.6/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/Umbraco.Web.UI.Client/package-lock.json | 18 +++++++++---------
 src/Umbraco.Web.UI.Client/package.json      |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 9fa23dda9d..df8563ec13 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -60,7 +60,7 @@
 				"prettier": "2.7.1",
 				"tiny-glob": "^0.2.9",
 				"typescript": "^4.8.4",
-				"vite": "^3.1.4",
+				"vite": "^3.1.6",
 				"vite-plugin-static-copy": "^0.9.0",
 				"web-component-analyzer": "^2.0.0-next.4"
 			},
@@ -25158,12 +25158,12 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "3.1.4",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.4.tgz",
-			"integrity": "sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==",
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.6.tgz",
+			"integrity": "sha512-qMXIwnehvvcK5XfJiXQUiTxoYAEMKhM+jqCY6ZSTKFBKu1hJnAKEzP3AOcnTerI0cMZYAaJ4wpW1wiXLMDt4mA==",
 			"dev": true,
 			"dependencies": {
-				"esbuild": "^0.15.6",
+				"esbuild": "^0.15.9",
 				"postcss": "^8.4.16",
 				"resolve": "^1.22.1",
 				"rollup": "~2.78.0"
@@ -46298,12 +46298,12 @@
 			}
 		},
 		"vite": {
-			"version": "3.1.4",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.4.tgz",
-			"integrity": "sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==",
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.6.tgz",
+			"integrity": "sha512-qMXIwnehvvcK5XfJiXQUiTxoYAEMKhM+jqCY6ZSTKFBKu1hJnAKEzP3AOcnTerI0cMZYAaJ4wpW1wiXLMDt4mA==",
 			"dev": true,
 			"requires": {
-				"esbuild": "^0.15.6",
+				"esbuild": "^0.15.9",
 				"fsevents": "~2.3.2",
 				"postcss": "^8.4.16",
 				"resolve": "^1.22.1",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 0b9c3cb645..f63c160793 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -89,7 +89,7 @@
 		"prettier": "2.7.1",
 		"tiny-glob": "^0.2.9",
 		"typescript": "^4.8.4",
-		"vite": "^3.1.4",
+		"vite": "^3.1.6",
 		"vite-plugin-static-copy": "^0.9.0",
 		"web-component-analyzer": "^2.0.0-next.4"
 	},