Feature: Entity Item Ref Extension (#18265)

* wip entity-item-ref extension point

* clean up

* add ref list element

* fix styling

* Update document-item-ref.element.ts

* move item repo

* implement for input member

* enable action slot

* add null check

* fix sorting again

* fix sorting again

* use member element

* add draft styling back

* move item repository

* implement for user input

* pass readonly and standalone props

* make editPath a state

* Update member-item-ref.element.ts

* Fix user item ref

* remove open button

* remove unused

* remove unused

* check for section permission

* add fallback element

* add unique to modal route registration

* add unique to modal router

* remove unused id

* Update member-item-ref.element.ts

* append unique

* compare with old value

* only recreate the controller if the entity type changes

* fix console warning

* use addUniquePaths for modal registration

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/core/entity/entity-item-ref/default-item-ref.element.ts

@@ -0,0 +1,37 @@
+import type { UmbDefaultItemModel } from '../types.js';
+import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-default-item-ref')
+export class UmbDefaultItemRefElement extends UmbLitElement {
+	@property({ type: Object })
+	item?: UmbDefaultItemModel;
+
+	@property({ type: Boolean })
+	readonly = false;
+
+	@property({ type: Boolean })
+	standalone = false;
+
+	override render() {
+		if (!this.item) return nothing;
+
+		return html`
+			<uui-ref-node name=${this.item.name} ?readonly=${this.readonly} ?standalone=${this.standalone}>
+				<slot name="actions" slot="actions"></slot>
+				${this.#renderIcon(this.item)}
+			</uui-ref-node>
+		`;
+	}
+
+	#renderIcon(item: UmbDefaultItemModel) {
+		if (!item.icon) return;
+		return html`<umb-icon slot="icon" name=${item.icon}></umb-icon>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-default-item-ref': UmbDefaultItemRefElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/entity/entity-item-ref/entity-item-ref.element.ts

@@ -0,0 +1,124 @@
+import type { UmbEntityModel } from '../types.js';
+import type { ManifestEntityItemRef } from './entity-item-ref.extension.js';
+import { customElement, property, type PropertyValueMap, state, css, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbExtensionsElementInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+
+import './default-item-ref.element.js';
+
+@customElement('umb-entity-item-ref')
+export class UmbEntityItemRefElement extends UmbLitElement {
+	#extensionsController?: UmbExtensionsElementInitializer<any>;
+	#item?: UmbEntityModel;
+
+	@state()
+	_component?: any; // TODO: Add type
+
+	@property({ type: Object, attribute: false })
+	public get item(): UmbEntityModel | undefined {
+		return this.#item;
+	}
+	public set item(value: UmbEntityModel | undefined) {
+		const oldValue = this.#item;
+		this.#item = value;
+
+		if (value === oldValue) return;
+		if (!value) return;
+
+		// If the component is already created and the entity type is the same, we can just update the item.
+		if (this._component && value.entityType === oldValue?.entityType) {
+			this._component.item = value;
+			return;
+		}
+
+		// If the component is already created, but the entity type is different, we need to destroy the component.
+		this.#createController(value.entityType);
+	}
+
+	#readonly = false;
+	@property({ type: Boolean, attribute: 'readonly' })
+	public get readonly() {
+		return this.#readonly;
+	}
+	public set readonly(value) {
+		this.#readonly = value;
+
+		if (this._component) {
+			this._component.readonly = this.#readonly;
+		}
+	}
+
+	#standalone = false;
+	@property({ type: Boolean, attribute: 'standalone' })
+	public get standalone() {
+		return this.#standalone;
+	}
+	public set standalone(value) {
+		this.#standalone = value;
+
+		if (this._component) {
+			this._component.standalone = this.#standalone;
+		}
+	}
+
+	protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.firstUpdated(_changedProperties);
+		this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'entity-item-ref');
+	}
+
+	#createController(entityType: string) {
+		if (this.#extensionsController) {
+			this.#extensionsController.destroy();
+		}
+
+		this.#extensionsController = new UmbExtensionsElementInitializer(
+			this,
+			umbExtensionsRegistry,
+			'entityItemRef',
+			(manifest: ManifestEntityItemRef) => manifest.forEntityTypes.includes(entityType),
+			(extensionControllers) => {
+				this._component?.remove();
+				const component = extensionControllers[0]?.component || document.createElement('umb-default-item-ref');
+
+				// assign the properties to the component
+				component.item = this.#item;
+				component.readonly = this.readonly;
+				component.standalone = this.standalone;
+
+				// Proxy the actions slot to the component
+				const slotElement = document.createElement('slot');
+				slotElement.name = 'actions';
+				slotElement.setAttribute('slot', 'actions');
+				component.appendChild(slotElement);
+
+				this._component = component;
+			},
+			undefined, // We can leave the alias to undefined, as we destroy this our selfs.
+			undefined,
+			{ single: true },
+		);
+	}
+
+	override render() {
+		return html`${this._component}`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				display: block;
+				position: relative;
+			}
+		`,
+	];
+}
+
+export { UmbEntityItemRefElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-entity-item-ref': UmbEntityItemRefElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/entity/entity-item-ref/entity-item-ref.extension.ts

@@ -0,0 +1,18 @@
+import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
+
+export interface ManifestEntityItemRef<MetaType extends MetaEntityItemRef = MetaEntityItemRef>
+	extends ManifestElement<any>,
+		ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
+	type: 'entityItemRef';
+	meta: MetaType;
+	forEntityTypes: Array<string>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MetaEntityItemRef {}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbManifestEntityItemRef: ManifestEntityItemRef;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/entity/entity-item-ref/index.ts

@@ -0,0 +1,3 @@
+import './entity-item-ref.element.js';
+
+export * from './entity-item-ref.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/entity/entity-item-ref/types.ts

@@ -0,0 +1 @@
+export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/entity/index.ts

@@ -1,3 +1,4 @@
 export { UMB_ENTITY_CONTEXT } from './entity.context-token.js';
 export { UmbEntityContext } from './entity.context.js';
+export * from './entity-item-ref/index.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/entity/types.ts

@@ -8,3 +8,7 @@ export interface UmbEntityModel {
 export interface UmbNamedEntityModel extends UmbEntityModel {
 	name: string;
 }
+
+export interface UmbDefaultItemModel extends UmbNamedEntityModel {
+	icon?: string;
+}

src/Umbraco.Web.UI.Client/src/packages/core/picker-input/index.ts

@@ -1 +1,2 @@
 export * from './picker-input.context.js';
+export * from './picker-input.context-token.js';

src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context-token.ts

@@ -0,0 +1,4 @@
+import type { UmbPickerInputContext } from './picker-input.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_PICKER_INPUT_CONTEXT = new UmbContextToken<UmbPickerInputContext>('UmbPickerInputContext');

src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts

@@ -1,5 +1,6 @@
+import { UMB_PICKER_INPUT_CONTEXT } from './picker-input.context-token.js';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
 import { UMB_MODAL_MANAGER_CONTEXT, umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -13,7 +14,7 @@ export class UmbPickerInputContext<
 	PickerItemType extends PickerItemBaseType = PickedItemType,
 	PickerModalConfigType extends UmbPickerModalData<PickerItemType> = UmbPickerModalData<PickerItemType>,
 	PickerModalValueType extends UmbPickerModalValue = UmbPickerModalValue,
-> extends UmbControllerBase {
+> extends UmbContextBase<UmbPickerInputContext> {
 	modalAlias: string | UmbModalToken<UmbPickerModalData<PickerItemType>, PickerModalValueType>;
 	repository?: UmbItemRepository<PickedItemType>;
 	#getUnique: (entry: PickedItemType) => string | undefined;
@@ -59,9 +60,8 @@ export class UmbPickerInputContext<
 		modalAlias: string | UmbModalToken<UmbPickerModalData<PickerItemType>, PickerModalValueType>,
 		getUniqueMethod?: (entry: PickedItemType) => string | undefined,
 	) {
-		super(host);
+		super(host, UMB_PICKER_INPUT_CONTEXT);
 		this.modalAlias = modalAlias;
-		this.#getUnique = getUniqueMethod || ((entry) => entry.unique);
 
 		this.#getUnique = getUniqueMethod
 			? (entry: PickedItemType) => {
@@ -74,7 +74,7 @@ export class UmbPickerInputContext<
 				}
 			: (entry) => entry.unique;
 
-		this.#itemManager = new UmbRepositoryItemsManager<PickedItemType>(this, repositoryAlias, this.#getUnique);
+		this.#itemManager = new UmbRepositoryItemsManager<PickedItemType>(this, repositoryAlias, getUniqueMethod);
 
 		this.selection = this.#itemManager.uniques;
 		this.selectedItems = this.#itemManager.items;