Chore: controller host element for tests

src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.element.ts

@@ -31,7 +31,8 @@ export class UmbInstallerLayoutElement extends LitElement {
 				height: 100%;
 
 				background-color: hsla(240, 68%, 11%, 1);
-				background-image: radial-gradient(at 99% 2%, hsla(212, 40%, 12%, 1) 0px, transparent 50%),
+				background-image:
+					radial-gradient(at 99% 2%, hsla(212, 40%, 12%, 1) 0px, transparent 50%),
 					radial-gradient(at 98% 95%, hsla(255, 40%, 12%, 1) 0px, transparent 50%),
 					radial-gradient(at 1% 2%, hsla(249, 40%, 12%, 1) 0px, transparent 50%),
 					radial-gradient(at 2% 97%, hsla(228, 40%, 12%, 1) 0px, transparent 50%),

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -1221,7 +1221,8 @@ export default {
 		colorsTitle: 'Farver',
 		colorsDescription: 'Tilføj, fjern eller sorter farver',
 		showLabelTitle: 'Inkluder label?',
-		showLabelDescription: 'Gemmer farver som et Json-objekt, der både indeholder farvens hex streng og label, i stedet for kun at gemme hex strengen.',
+		showLabelDescription:
+			'Gemmer farver som et Json-objekt, der både indeholder farvens hex streng og label, i stedet for kun at gemme hex strengen.',
 	},
 	contentPicker: {
 		allowedItemTypes: 'Du kan kun vælge følgende type(r) dokumenter: %0%',

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -1247,7 +1247,8 @@ export default {
 		colorsTitle: 'Colors',
 		colorsDescription: 'Add, remove or sort colors',
 		showLabelTitle: 'Include labels?',
-		showLabelDescription: 'Stores colors as a JSON object containing both the color hex string and label, rather than just the hex string.',
+		showLabelDescription:
+			'Stores colors as a JSON object containing both the color hex string and label, rather than just the hex string.',
 	},
 	contentPicker: {
 		allowedItemTypes: 'You can only select items of type(s): %0%',

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

@@ -0,0 +1,9 @@
+import { UmbControllerHostElementMixin } from './controller-host-element.mixin.js';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+
+/**
+ * A web-component to host umb controllers.
+ * This enables controllers to be added to the life cycle of this element.
+ */
+@customElement('umb-controller-host')
+export class UmbControllerHostElementElement extends UmbControllerHostElementMixin(HTMLElement) {}

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

@@ -7,8 +7,11 @@ import type { HTMLElementConstructor } from '@umbraco-cms/backoffice/extension-a
  * This enables controllers to be added to the life cycle of this element.
  * @param {object} superClass - superclass to be extended.
  * @mixin
+ * @returns {HTMLElementConstructor<UmbControllerHostElement> & HTMLElementConstructor} - extended superclass.
  */
-export const UmbControllerHostElementMixin = <T extends HTMLElementConstructor>(superClass: T) => {
+export const UmbControllerHostElementMixin = <T extends HTMLElementConstructor>(
+	superClass: T,
+): HTMLElementConstructor<UmbControllerHostElement> & T => {
 	class UmbControllerHostElementClass
 		extends UmbControllerHostMixin<T>(superClass)
 		implements UmbControllerHostElement

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

@@ -87,7 +87,8 @@ export const UmbControllerHostMixin = <T extends ClassConstructor>(superClass: T
 		/**
 		 * Remove a controller from this element by its alias.
 		 * Notice this will also destroy the controller.
-		 * @param {string | symbol} controllerAlias
+		 * @param {string | symbol} controllerAlias - The alias of the controller to remove and destroy from this host.
+		 * @returns {void}
 		 */
 		removeUmbControllerByAlias(controllerAlias: UmbController['controllerAlias']): void {
 			if (controllerAlias) {
@@ -122,7 +123,7 @@ export const UmbControllerHostMixin = <T extends ClassConstructor>(superClass: T
 				if (ctrl === prev) {
 					throw new Error(
 						`Controller with controller alias: '${ctrl.controllerAlias?.toString()}' and class name: '${
-							(ctrl as any).constructor.name
+							ctrl.constructor.name
 						}', does not remove it self when destroyed. This can cause memory leaks. Please fix this issue.\r\nThis usually occurs when you have a destroy() method that doesn't call super.destroy().`,
 					);
 				}

src/Umbraco.Web.UI.Client/src/libs/controller-api/controller.test.ts

@@ -1,13 +1,9 @@
 import type { UmbControllerHostElement } from './controller-host-element.interface.js';
-import { UmbControllerHostElementMixin } from './controller-host-element.mixin.js';
 import { UmbControllerHostMixin } from './controller-host.mixin.js';
 import type { UmbControllerAlias } from './controller-alias.type.js';
 import type { UmbControllerHost } from './controller-host.interface.js';
 import { expect } from '@open-wc/testing';
-import { customElement } from '@umbraco-cms/backoffice/external/lit';
-
-@customElement('test-my-controller-host')
-class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+import { UmbControllerHostElementElement } from './controller-host-element.element.js';
 
 class UmbTestControllerImplementation extends UmbControllerHostMixin(class {}) {
 	testIsConnected = false;
@@ -51,7 +47,7 @@ describe('UmbController', () => {
 	let hostElement: UmbControllerHostElement;
 
 	beforeEach(() => {
-		hostElement = new UmbTestControllerHostElement();
+		hostElement = new UmbControllerHostElementElement();
 	});
 
 	describe('Controller Host Public API', () => {

src/Umbraco.Web.UI.Client/src/libs/controller-api/index.ts

@@ -1,7 +1,8 @@
+export * from './controller-host-element.element.js';
+export * from './controller-host-element.mixin.js';
 export * from './controller-host.mixin.js';
-export type * from './controller-host.interface.js';
+export * from './controller.event.js';
+export type * from './controller-alias.type.js';
 export type * from './controller-host-element.interface.js';
-export * from './controller-host-element.mixin.js';
+export type * from './controller-host.interface.js';
 export type * from './controller.interface.js';
-export type * from './controller-alias.type.js';
-export * from './controller.event.js';

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extension-initializer.controller.test.ts

@@ -7,19 +7,13 @@ import type {
 import { UmbExtensionRegistry } from '../registry/extension.registry.js';
 import type { UmbExtensionCondition } from '../condition/extension-condition.interface.js';
 import type { UmbControllerHostElement } from '../../controller-api/controller-host-element.interface.js';
-import { UmbControllerHostElementMixin } from '../../controller-api/controller-host-element.mixin.js';
 import { UmbBaseExtensionInitializer } from './index.js';
 import { expect, fixture } from '@open-wc/testing';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSwitchCondition } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
-@customElement('umb-test-controller-host')
-// Element is used in tests
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
-
 class UmbTestExtensionController extends UmbBaseExtensionInitializer {
 	constructor(
 		host: UmbControllerHost,
@@ -64,7 +58,7 @@ describe('UmbBaseExtensionController', () => {
 		let manifest: ManifestWithDynamicConditions;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'section',
@@ -100,7 +94,7 @@ describe('UmbBaseExtensionController', () => {
 		let manifest: ManifestWithDynamicConditions;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'section',
@@ -139,7 +133,7 @@ describe('UmbBaseExtensionController', () => {
 		let conditionManifest: ManifestCondition;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'section',
@@ -401,7 +395,7 @@ describe('UmbBaseExtensionController', () => {
 		let conditionManifest: ManifestCondition;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'section',
@@ -490,7 +484,7 @@ describe('UmbBaseExtensionController', () => {
 		let manifest: ManifestWithDynamicConditions<UmbConditionConfigBase & { value: string }>;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 
 			manifest = {
@@ -549,7 +543,7 @@ describe('UmbBaseExtensionController', () => {
 		let manifest: ManifestWithDynamicConditions<UmbConditionConfigBase & { value: string }>;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 
 			manifest = {

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extensions-initializer.controller.test.ts

@@ -5,12 +5,12 @@ import type { PermittedControllerType, UmbBaseExtensionsInitializerArgs } from '
 import { UmbBaseExtensionInitializer, UmbBaseExtensionsInitializer } from './index.js';
 import { expect, fixture } from '@open-wc/testing';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
-
-@customElement('umb-test-controller-host')
-class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+import type {
+	UmbControllerHost,
+	UmbControllerHostElement,
+	UmbControllerHostElementElement,
+} from '@umbraco-cms/backoffice/controller-api';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 
 class UmbTestExtensionController extends UmbBaseExtensionInitializer {
 	testInsidesIsDestroyed?: boolean;
@@ -88,10 +88,10 @@ class UmbTestConditionAlwaysInvalid extends UmbControllerBase implements UmbExte
 
 describe('UmbBaseExtensionsController', () => {
 	describe('Manifests without conditions', () => {
-		let hostElement: UmbTestControllerHostElement;
+		let hostElement: UmbControllerHostElement;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			const manifestA = {
 				type: 'extension-type',
 				name: 'test-extension-a',
@@ -190,10 +190,10 @@ describe('UmbBaseExtensionsController', () => {
 	});
 
 	describe('Manifests without conditions overwrites another', () => {
-		let hostElement: UmbTestControllerHostElement;
+		let hostElement: UmbControllerHostElement;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			const manifestA = {
 				type: 'extension-type',
 				name: 'test-extension-a',
@@ -269,10 +269,10 @@ describe('UmbBaseExtensionsController', () => {
 	});
 
 	describe('Manifest with valid conditions overwrites another', () => {
-		let hostElement: UmbTestControllerHostElement;
+		let hostElement: UmbControllerHostElement;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			const manifestA = {
 				type: 'extension-type',
 				name: 'test-extension-a',
@@ -348,10 +348,10 @@ describe('UmbBaseExtensionsController', () => {
 	});
 
 	describe('Manifest with invalid conditions does not overwrite another', () => {
-		let hostElement: UmbTestControllerHostElement;
+		let hostElement: UmbControllerHostElementElement;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			const manifestA = {
 				type: 'extension-type',
 				name: 'test-extension-a',

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-api-initializer.test.ts

@@ -3,17 +3,11 @@ import type { ManifestApi, ManifestWithDynamicConditions } from '../types/index.
 import { UmbExtensionApiInitializer } from './index.js';
 import { expect, fixture } from '@open-wc/testing';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbControllerHostElement, UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSwitchCondition } from '@umbraco-cms/backoffice/extension-registry';
 import type { ManifestSection } from '@umbraco-cms/backoffice/section';
 
-@customElement('umb-test-controller-host')
-// Element is used in tests
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
-
 class UmbTestApiController extends UmbControllerBase {
 	public i_am_test_api_controller = true;
 
@@ -33,7 +27,7 @@ describe('UmbExtensionApiController', () => {
 		let manifest: TestManifest;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'test-type',
@@ -95,7 +89,7 @@ describe('UmbExtensionApiController', () => {
 		let manifest: ManifestSection;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 
 			manifest = {

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-and-api-initializer.test.ts

@@ -3,14 +3,11 @@ import type { ManifestElementAndApi, ManifestWithDynamicConditions, UmbApi } fro
 import { UmbExtensionElementAndApiInitializer } from './extension-element-and-api-initializer.controller.js';
 import { expect } from '@open-wc/testing';
 import type { UmbControllerHost, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+import { UmbControllerHostElementElement, UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
 import { customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSwitchCondition } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 
-@customElement('umb-test-controller-host')
-class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
-
 @customElement('umb-test-extension-element')
 // Ignoring eslint rule. Element name is used for testing.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -37,7 +34,7 @@ describe('UmbExtensionElementAndApiController', () => {
 		let manifest: TestManifest;
 
 		beforeEach(async () => {
-			hostElement = new UmbTestControllerHostElement();
+			hostElement = new UmbControllerHostElementElement();
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'test-type',
@@ -107,7 +104,7 @@ describe('UmbExtensionElementAndApiController', () => {
 		let manifest: TestManifest;
 
 		beforeEach(async () => {
-			hostElement = new UmbTestControllerHostElement();
+			hostElement = new UmbControllerHostElementElement();
 			extensionRegistry = new UmbExtensionRegistry();
 
 			manifest = {
@@ -177,7 +174,7 @@ describe('UmbExtensionElementAndApiController', () => {
 		let manifest: TestManifest;
 
 		beforeEach(async () => {
-			hostElement = new UmbTestControllerHostElement();
+			hostElement = new UmbControllerHostElementElement();
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'test-type',
@@ -240,7 +237,7 @@ describe('UmbExtensionElementAndApiController', () => {
 		let manifest: TestManifest;
 
 		beforeEach(async () => {
-			hostElement = new UmbTestControllerHostElement();
+			hostElement = new UmbControllerHostElementElement();
 			extensionRegistry = new UmbExtensionRegistry();
 
 			manifest = {

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-initializer.test.ts

@@ -1,22 +1,19 @@
 import { UmbExtensionRegistry } from '../registry/extension.registry.js';
 import { UmbExtensionElementInitializer } from './index.js';
 import { expect, fixture } from '@open-wc/testing';
-import { UmbControllerHostElementMixin, type UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbControllerHostElementElement } from '@umbraco-cms/backoffice/controller-api';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbSwitchCondition } from '@umbraco-cms/backoffice/extension-registry';
 import type { ManifestSection } from '@umbraco-cms/backoffice/section';
 
-@customElement('umb-test-controller-host')
-class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
-
 describe('UmbExtensionElementController', () => {
 	describe('Manifest without conditions', () => {
-		let hostElement: UmbControllerHostElement;
+		let hostElement: UmbControllerHostElementElement;
 		let extensionRegistry: UmbExtensionRegistry<ManifestSection>;
 		let manifest: ManifestSection;
 
 		beforeEach(async () => {
-			hostElement = new UmbTestControllerHostElement();
+			hostElement = new UmbControllerHostElementElement();
 			extensionRegistry = new UmbExtensionRegistry();
 			manifest = {
 				type: 'section',
@@ -82,12 +79,12 @@ describe('UmbExtensionElementController', () => {
 	});
 
 	describe('Manifest with multiple conditions that changes over time', () => {
-		let hostElement: UmbControllerHostElement;
+		let hostElement: UmbControllerHostElementElement;
 		let extensionRegistry: UmbExtensionRegistry<ManifestSection>;
 		let manifest: ManifestSection;
 
 		beforeEach(async () => {
-			hostElement = await fixture(html`<umb-test-controller-host></umb-test-controller-host>`);
+			hostElement = await fixture(html`<umb-controller-host></umb-controller-host>`);
 			extensionRegistry = new UmbExtensionRegistry();
 
 			manifest = {