Collection: Introduce Collection Item Ref extension type

src/Umbraco.Web.UI.Client/src/packages/core/collection/global-components.ts

@@ -1,3 +1,3 @@
 import './menu/collection-menu.element.js';
-
+import './item/global-components.js';
 export * from './menu/collection-menu.element.js';

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

@@ -0,0 +1,69 @@
+import type { UmbCollectionItemModel } from '../types.js';
+import type { UmbEntityCollectionItemElement } from '../entity-collection-item-element.interface.js';
+import { getItemFallbackName, getItemFallbackIcon } from '@umbraco-cms/backoffice/entity-item';
+import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event';
+import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-default-collection-item-card')
+export class UmbDefaultCollectionItemCardElement extends UmbLitElement implements UmbEntityCollectionItemElement {
+	@property({ type: Object })
+	item?: UmbCollectionItemModel;
+
+	@property({ type: Boolean })
+	selectable = false;
+
+	@property({ type: Boolean })
+	selected = false;
+
+	@property({ type: Boolean })
+	selectOnly = false;
+
+	@property({ type: Boolean })
+	disabled = false;
+
+	@property({ type: String })
+	href?: string;
+
+	#onSelected(event: CustomEvent) {
+		if (!this.item) return;
+		event.stopPropagation();
+		this.dispatchEvent(new UmbSelectedEvent(this.item.unique));
+	}
+
+	#onDeselected(event: CustomEvent) {
+		if (!this.item) return;
+		event.stopPropagation();
+		this.dispatchEvent(new UmbDeselectedEvent(this.item.unique));
+	}
+
+	override render() {
+		if (!this.item) return nothing;
+
+		return html`
+			<uui-card-content-node
+				name=${this.item.name ?? `${getItemFallbackName(this.item)}`}
+				href=${this.href}
+				?selectable=${this.selectable}
+				?select-only=${this.selectOnly}
+				?selected=${this.selected}
+				?disabled=${this.disabled}
+				@selected=${this.#onSelected}
+				@deselected=${this.#onDeselected}>
+				<slot name="actions" slot="actions"></slot>
+				${this.#renderIcon(this.item)}
+			</uui-card-content-node>
+		`;
+	}
+
+	#renderIcon(item: UmbCollectionItemModel) {
+		const icon = item.icon || getItemFallbackIcon();
+		return html`<umb-icon slot="icon" name=${icon}></umb-icon>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-default-collection-item-card': UmbDefaultCollectionItemCardElement;
+	}
+}

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

@@ -0,0 +1,41 @@
+import { UmbEntityCollectionItemElementBase } from '../umb-entity-collection-item-element-base.element.js';
+import { UmbDefaultCollectionItemCardElement } from './default-collection-item-card.element.js';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('umb-entity-collection-item-card')
+export class UmbEntityCollectionItemCardElement extends UmbEntityCollectionItemElementBase {
+	protected getExtensionType(): string {
+		return 'entityCollectionItemCard';
+	}
+
+	protected createFallbackElement(): HTMLElement {
+		return new UmbDefaultCollectionItemCardElement();
+	}
+
+	protected getPathAddendum(entityType: string, unique: string): string {
+		return 'collection-item-card/' + entityType + '/' + unique;
+	}
+
+	protected getMarkAttributeName(): string {
+		return 'entity-collection-item-card';
+	}
+
+	override render() {
+		return html`${this._component}`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				display: block;
+				position: relative;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-entity-collection-item-card': UmbEntityCollectionItemCardElement;
+	}
+}

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

@@ -0,0 +1,16 @@
+import type { ManifestEntityCollectionItemBase } from '../entity-collection-item.extension.js';
+
+export interface ManifestEntityCollectionItemCard<
+	MetaType extends MetaEntityCollectionItemCard = MetaEntityCollectionItemCard,
+> extends ManifestEntityCollectionItemBase<MetaType> {
+	type: 'entityCollectionItemCard';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MetaEntityCollectionItemCard {}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbManifestEntityCollectionItemCard: ManifestEntityCollectionItemCard;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/global-components.ts

@@ -0,0 +1 @@
+import './entity-collection-item-card.element.js';

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

@@ -0,0 +1 @@
+export * from './entity-collection-item-card.element.js';

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

@@ -0,0 +1 @@
+export type * from './entity-collection-item-card.extension.js';

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

@@ -0,0 +1,24 @@
+import type { UmbCollectionItemModel } from './types.js';
+
+/**
+ * An interface for elements that render collection items representing entities.
+ */
+export interface UmbEntityCollectionItemElement extends HTMLElement {
+	/** The collection item model to render. */
+	item?: UmbCollectionItemModel | undefined;
+
+	/** Whether the item should render with selection affordances. */
+	selectable?: boolean;
+
+	/** When true, the item only supports selection (no navigation). */
+	selectOnly?: boolean;
+
+	/** Whether the item is currently selected. */
+	selected?: boolean;
+
+	/** Whether the item is disabled. */
+	disabled?: boolean;
+
+	/** Optional href used by card/ref renderers to provide a link. */
+	href?: string | undefined;
+}

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

@@ -0,0 +1,67 @@
+import type { UmbCollectionItemModel } from '../types.js';
+import type { UmbEntityCollectionItemElement } from '../entity-collection-item-element.interface.js';
+import { getItemFallbackName, getItemFallbackIcon } from '@umbraco-cms/backoffice/entity-item';
+import { UmbDeselectedEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event';
+import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-default-collection-item-ref')
+export class UmbDefaultCollectionItemRefElement extends UmbLitElement implements UmbEntityCollectionItemElement {
+	@property({ type: Object })
+	item?: UmbCollectionItemModel;
+
+	@property({ type: Boolean })
+	selectable = false;
+
+	@property({ type: Boolean })
+	selected = false;
+
+	@property({ type: Boolean })
+	selectOnly = false;
+
+	@property({ type: Boolean })
+	disabled = false;
+
+	@property({ type: String })
+	href?: string;
+
+	#onSelected(event: CustomEvent) {
+		if (!this.item) return;
+		event.stopPropagation();
+		this.dispatchEvent(new UmbSelectedEvent(this.item.unique));
+	}
+
+	#onDeselected(event: CustomEvent) {
+		if (!this.item) return;
+		event.stopPropagation();
+		this.dispatchEvent(new UmbDeselectedEvent(this.item.unique));
+	}
+
+	override render() {
+		if (!this.item) return nothing;
+
+		return html` <uui-ref-node
+			name=${this.item.name ?? `${getItemFallbackName(this.item)}`}
+			@selected=${this.#onSelected}
+			@deselected=${this.#onDeselected}
+			?selectable=${this.selectable}
+			?select-only=${this.selectOnly}
+			?selected=${this.selected}
+			?disabled=${this.disabled}
+			href=${this.href}>
+			<slot name="actions" slot="actions"></slot>
+			${this.#renderIcon(this.item)}
+		</uui-ref-node>`;
+	}
+
+	#renderIcon(item: UmbCollectionItemModel) {
+		const icon = item.icon || getItemFallbackIcon();
+		return html`<umb-icon slot="icon" name=${icon}></umb-icon>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-default-collection-item-ref': UmbDefaultCollectionItemRefElement;
+	}
+}

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

@@ -0,0 +1,41 @@
+import { UmbEntityCollectionItemElementBase } from '../umb-entity-collection-item-element-base.element.js';
+import { UmbDefaultCollectionItemRefElement } from './default-collection-item-ref.element.js';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+
+@customElement('umb-entity-collection-item-ref')
+export class UmbEntityCollectionItemRefElement extends UmbEntityCollectionItemElementBase {
+	protected getExtensionType(): string {
+		return 'entityCollectionItemRef';
+	}
+
+	protected createFallbackElement(): HTMLElement {
+		return new UmbDefaultCollectionItemRefElement();
+	}
+
+	protected getPathAddendum(entityType: string, unique: string): string {
+		return 'collection-item-ref/' + entityType + '/' + unique;
+	}
+
+	protected getMarkAttributeName(): string {
+		return 'entity-collection-item-ref';
+	}
+
+	override render() {
+		return html`${this._component}`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				display: block;
+				position: relative;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-entity-collection-item-ref': UmbEntityCollectionItemRefElement;
+	}
+}

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

@@ -0,0 +1,16 @@
+import type { ManifestEntityCollectionItemBase } from '../entity-collection-item.extension.js';
+
+export interface ManifestEntityCollectionItemRef<
+	MetaType extends MetaEntityCollectionItemRef = MetaEntityCollectionItemRef,
+> extends ManifestEntityCollectionItemBase<MetaType> {
+	type: 'entityCollectionItemRef';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MetaEntityCollectionItemRef {}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbManifestEntityCollectionItemRef: ManifestEntityCollectionItemRef;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/global-components.ts

@@ -0,0 +1 @@
+import './entity-collection-item-ref.element.js';

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

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

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

@@ -0,0 +1 @@
+export type * from './entity-collection-item-ref.extension.js';

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

@@ -0,0 +1,20 @@
+import type { UmbEntityCollectionItemElement } from './entity-collection-item-element.interface.js';
+import type { ManifestElement, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
+
+/**
+ * Base interface for entity collection item manifests.
+ * Shared by card and ref variants.
+ */
+export interface ManifestEntityCollectionItemBase<MetaType = object>
+	extends ManifestElement<UmbEntityCollectionItemElement>,
+		ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
+	/**
+	 * The entity types this collection item supports.
+	 */
+	forEntityTypes: Array<string>;
+
+	/**
+	 * Additional metadata for the collection item.
+	 */
+	meta: MetaType;
+}

src/Umbraco.Web.UI.Client/src/packages/core/collection/item/global-components.ts

@@ -0,0 +1,2 @@
+import './entity-collection-item-card/global-components.js';
+import './entity-collection-item-ref/global-components.js';

src/Umbraco.Web.UI.Client/src/packages/core/collection/item/types.ts

@@ -1,7 +1,16 @@
 import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+export type * from './entity-collection-item-card/types.js';
+export type * from './entity-collection-item-ref/types.js';
+export type * from './entity-collection-item-element.interface.js';
 
 export interface UmbCollectionItemModel extends UmbEntityModel {
 	unique: string;
 	name?: string;
 	icon?: string;
 }
+
+export interface UmbCollectionItemDetailPropertyConfig {
+	alias: string;
+	name: string;
+	isSystem: boolean;
+}