UUI components inside Contentment template list

[bjarnef (Bjarne Fyrstenborg)]

I had a look at the “Custom Component List”.
As mentioned here a NPM package would be great, but I have picked the types needed.

Contentment 6 using Custom Web Component

This question is most appropriate for @leekelleher, however, putting it out in the wild for the community. We just upgraded from Umbraco 13 to Umbraco 17 and with that we brought Contentment to version 6. I have written a custom Lit Component which is used inside the list editor with a “Custom Component List” option like so: [image] This component defines each item respectively and does what we need. However, inside the Lit Element we utilize [image] Where the ../contentment/… is our …

Another suggestion.

Using Custom Component List, perhaps it should disable the selected style (or an option to disabled this).

Then perhaps ContentmentDataListItemUiElement can export selected state as we can then implement this in the custom UI depending on which component is used.

An example although not completed yet:

import type { ContentmentDataListItemUiElement, ContentmentListItem } from '../types.js';
import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbDocumentDetailRepository } from '@umbraco-cms/backoffice/document';

@customElement('contentment-data-list-item-ui-color-swatch')
export class ContentmentDataListItemUiColorSwatchElement extends UmbLitElement implements ContentmentDataListItemUiElement {
	@property({ attribute: false })
	item?: ContentmentListItem;

       //@state selected = false;

	#documentRepository = new UmbDocumentDetailRepository(this);

	constructor() {
    	super();
		this.#getDocumentData();
	}

	async #getDocumentData() {
		if (!this.item?.value)
			return;

		const { data } = await this.#documentRepository.requestByUnique(this.item.value);
		// I get some data!
		console.log(data);
	}

	override render() {
		if (!this.item) return nothing;
		return html`
			<uui-color-swatch color="" selected></uui-color-swatch>
		`;
	}
}

export { ContentmentDataListItemUiColorSwatchElement as element };

declare global {
	interface HTMLElementTagNameMap {
		'contentment-data-list-item-ui-color-swatch': ContentmentDataListItemUiColorSwatchElement;
	}
}