Collection: Introduce Collection Item Ref extension type

[madsrasmussen]

Building of top of: #20954 . Please review first.

Following in the steps of the Collection Item Card extension point, this PR brings a Collection Item Ref extension point. The extension point follows the exact same interfaces but offers a different rendering opportunity. The PR also introduces a Base Element and Manifest Type to work for both the card and ref types.

Manifest Example

{
  type: 'entityCollectionItemRef',
  alias: 'My.EntityCollectionItemRef.CustomType',
  name: 'My Custom Type Entity Collection Item Ref',
  element: () => import('./my-custom-type-collection-item-ref.element.js'),
  forEntityTypes: ['my-custom-type'],
}

Basic Element Example

@customElement('my-custom-type-collection-item-ref')
export class MyCustomTypeCollectionItemRefElement extends UmbLitElement {
	
  @property({ type: Object })
  item = false;

  @property({ type: Boolean })
  selectable = false;

  @property({ type: Boolean })
  selected = false;

  @property({ type: Boolean })
  selectOnly = 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` <div>My Ref rendering</div> `;
  }

  static override styles = [css``];
}

[Copilot]

Pull request overview

This PR introduces a new entityCollectionItemRef extension type alongside the existing entityCollectionItemCard type, providing a consistent abstraction for rendering collection items in different formats (card vs ref). The implementation creates a base element class that both card and ref types extend, reducing code duplication and ensuring consistent behavior.

Key Changes

• Created UmbEntityCollectionItemElementBase abstract base class to share logic between card and ref implementations
• Introduced entityCollectionItemRef extension type with default fallback element
• Refactored user and document collection views to use the new umb-entity-collection-item-card wrapper components
• Reorganized collection item types into dedicated subdirectories for better code organization

Reviewed changes

Copilot reviewed 31 out of 31 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/umb-entity-collection-item-element-base.element.ts	New abstract base class providing shared logic for collection item rendering, including extension loading, property synchronization, and event handling
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/entity-collection-item-ref.element.ts	New wrapper element for ref-style collection items that extends the base class
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-ref/default-collection-item-ref.element.ts	Default fallback rendering for ref items using uui-ref-node
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/entity-collection-item-card.element.ts	New wrapper element for card-style collection items that extends the base class
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.ts	Default fallback rendering for card items using uui-card-content-node
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item.extension.ts	Base manifest interface defining common properties for both card and ref extension types
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-element.interface.ts	Interface defining required properties for collection item elements
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/item/user-collection-item-card.element.ts	New user-specific collection item card implementation with custom rendering logic
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts	Refactored to use the new umb-entity-collection-item-card wrapper instead of direct uui-card-user rendering
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/document-collection-item-card.element.ts	New document-specific collection item card wrapper that delegates to document-grid-collection-card
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts	Refactored to use the new umb-entity-collection-item-card wrapper with detailProperties
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts	Moved collection item types to dedicated item/types.ts file and re-exported
src/Umbraco.Web.UI.Client/src/packages/core/entity-item/entity-item-ref/entity-item-ref.element.ts	Fixed memory leak by pre-binding event handlers to avoid creating new function references
src/Umbraco.Web.UI.Client/src/packages/core/collection/global-components.ts	Updated to import collection item global components

---

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[leekelleher]

Tested out, all looking good! 🚀