From 4e52319bd90db30e84b6567bc82dba198c11c67c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 27 May 2024 15:32:51 +0100
Subject: [PATCH] Bugfix: Import property-actions components

---
 .../src/packages/core/entry-point.ts          |  1 +
 .../property-action-menu.element.ts           | 64 +++++++++----------
 .../property/property/property.element.ts     | 18 +++---
 3 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts
index 0fe761cc15..df77e8a18b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts
@@ -6,6 +6,7 @@ import { UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
 import { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
 import { UmbExtensionsApiInitializer, type UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
 
+import './property-action/components/index.js';
 import './menu/components/index.js';
 import './extension-registry/components/index.js';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/components/property-action-menu/property-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/components/property-action-menu/property-action-menu.element.ts
index c5b182725e..e6adb755ae 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/components/property-action-menu/property-action-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/components/property-action-menu/property-action-menu.element.ts
@@ -1,28 +1,31 @@
 import type { UmbPropertyActionArgs } from '../property-action/types.js';
-import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
-import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import type {
 	ManifestPropertyAction,
 	ManifestTypes,
 	MetaPropertyAction,
 } from '@umbraco-cms/backoffice/extension-registry';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import type { UmbExtensionElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbExtensionsElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import type { UmbExtensionElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 function ExtensionApiArgsMethod(manifest: ManifestPropertyAction): [UmbPropertyActionArgs<MetaPropertyAction>] {
 	return [{ meta: manifest.meta }];
 }
+
 @customElement('umb-property-action-menu')
 export class UmbPropertyActionMenuElement extends UmbLitElement {
 	#actionsInitializer?: UmbExtensionsElementAndApiInitializer<ManifestTypes, 'propertyAction'>;
-	#propertyEditorUiAlias = '';
+
+	@state()
+	private _actions: Array<UmbExtensionElementAndApiInitializer<ManifestPropertyAction, never>> = [];
 
 	@property()
 	set propertyEditorUiAlias(alias: string) {
 		this.#propertyEditorUiAlias = alias;
+
 		// TODO: Stop using string for 'propertyAction', we need to start using Const. [NL]
 		this.#actionsInitializer = new UmbExtensionsElementAndApiInitializer(
 			this,
@@ -30,51 +33,42 @@ export class UmbPropertyActionMenuElement extends UmbLitElement {
 			'propertyAction',
 			ExtensionApiArgsMethod,
 			(propertyAction) => propertyAction.forPropertyEditorUis.includes(alias),
-			(ctrls) => {
-				this._actions = ctrls;
-			},
+			(actions) => (this._actions = actions),
 			'extensionsInitializer',
 		);
 	}
 	get propertyEditorUiAlias() {
 		return this.#propertyEditorUiAlias;
 	}
-
-	@state()
-	private _actions: Array<UmbExtensionElementAndApiInitializer<ManifestPropertyAction, never>> = [];
+	#propertyEditorUiAlias = '';
 
 	render() {
-		return this._actions.length > 0
-			? html`
-					<uui-button
-						id="popover-trigger"
-						popovertarget="property-action-popover"
-						look="secondary"
-						label="Open actions menu"
-						compact>
-						<uui-symbol-more id="more-symbol"></uui-symbol-more>
-					</uui-button>
-					<uui-popover-container id="property-action-popover">
-						<umb-popover-layout>
-							${repeat(
-								this._actions,
-								(action) => action.alias,
-								(action) => action.component,
-							)}
-						</umb-popover-layout>
-					</uui-popover-container>
-			  `
-			: nothing;
+		if (!this._actions?.length) return nothing;
+		return html`
+			<uui-button id="popover-trigger" popovertarget="property-action-popover" label="Open actions menu" compact>
+				<uui-symbol-more id="more-symbol"></uui-symbol-more>
+			</uui-button>
+			<uui-popover-container id="property-action-popover">
+				<umb-popover-layout>
+					${repeat(
+						this._actions,
+						(action) => action.alias,
+						(action) => action.component,
+					)}
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
 	}
 
-	static styles: CSSResultGroup = [
+	static styles = [
 		UmbTextStyles,
 		css`
 			:host {
 				--uui-menu-item-flat-structure: 1;
 			}
+
 			#more-symbol {
-				font-size: 0.6em;
+				font-size: 1rem;
 			}
 
 			#popover-trigger {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
index 4622cd3648..d1e4f1f1a1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
@@ -302,7 +302,7 @@ export class UmbPropertyElement extends UmbLitElement {
 				.description=${this._description}
 				.orientation=${this._orientation ?? 'horizontal'}
 				?invalid=${this._invalid}>
-				${this._renderPropertyActionMenu()}
+				${this.#renderPropertyActionMenu()}
 				${this._variantDifference
 					? html`<uui-tag look="secondary" slot="description">${this._variantDifference}</uui-tag>`
 					: ''}
@@ -311,13 +311,15 @@ export class UmbPropertyElement extends UmbLitElement {
 		`;
 	}
 
-	private _renderPropertyActionMenu() {
-		return this._propertyEditorUiAlias
-			? html`<umb-property-action-menu
-					slot="action-menu"
-					id="action-menu"
-					.propertyEditorUiAlias=${this._propertyEditorUiAlias}></umb-property-action-menu>`
-			: nothing;
+	#renderPropertyActionMenu() {
+		if (!this._propertyEditorUiAlias) return nothing;
+		return html`
+			<umb-property-action-menu
+				slot="action-menu"
+				id="action-menu"
+				.propertyEditorUiAlias=${this._propertyEditorUiAlias}>
+			</umb-property-action-menu>
+		`;
 	}
 
 	static styles = [