element types only filter

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts

@@ -46,6 +46,7 @@ export class UmbTreePickerModalElement<TreeItemType extends TreeItemPresentation
 						@selection-change=${this.#onSelectionChange}
 						.selection=${this._selection}
 						selectable
+						.filter=${this.data?.filter}
 						.selectableFilter=${this.data?.pickableFilter}
 						?multiple=${this._multiple}></umb-tree>
 				</uui-box>

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts

@@ -49,6 +49,8 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 	public repository?: UmbTreeRepository<TreeItemType>;
 	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
 
+	public filter?: (item: TreeItemType) => boolean = () => true;
+
 	#treeAlias?: string;
 
 	#initResolver?: () => void;

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts

@@ -66,6 +66,15 @@ export class UmbTreeElement extends UmbLitElement {
 		this.#treeContext.selectableFilter = newVal;
 	}
 
+	@property()
+	get filter() {
+		return this.#treeContext.filter;
+	}
+	set filter(newVal) {
+		console.log(typeof newVal);
+		this.#treeContext.filter = newVal;
+	}
+
 	@state()
 	private _items: TreeItemPresentationModel[] = [];
 
@@ -97,7 +106,16 @@ export class UmbTreeElement extends UmbLitElement {
 		if (asObservable) {
 			this.#rootItemsObserver = this.observe(asObservable(), (rootItems) => {
 				const oldValue = this._items;
-				this._items = rootItems;
+				if (this.filter) {
+					const items: Array<TreeItemPresentationModel> = [];
+					rootItems.forEach((rootItem) => {
+						const filtered = this.filter!(rootItem);
+						if (filtered) items.push(rootItem);
+					});
+					this._items = items;
+				} else {
+					this._items = rootItems;
+				}
 				this.requestUpdate('_items', oldValue);
 			});
 		}

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts

@@ -1,5 +1,5 @@
 import { UmbDocumentTypePickerContext } from './document-type-input.context.js';
-import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -7,6 +7,15 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-document-type-input')
 export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) {
+	/**
+	 * Selects the element types only
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, attribute: 'element-types-only' })
+	elementTypesOnly: boolean = false;
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -102,19 +111,28 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement)
 		return undefined;
 	}
 
+	#openPicker() {
+		if (this.elementTypesOnly) {
+			this.#pickerContext.openPicker({
+				hideTreeRoot: true,
+				filter: (x) => x.isElement!,
+			});
+		} else {
+			this.#pickerContext.openPicker({ hideTreeRoot: true });
+		}
+	}
+
 	render() {
 		return html`
 			<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
-			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open"
-				>Add</uui-button
-			>
+			<uui-button id="add-button" look="placeholder" @click=${this.#openPicker} label="open">Add</uui-button>
 		`;
 	}
 
 	private _renderItem(item: DocumentTypeItemResponseModel) {
 		if (!item.id) return;
 		return html`
-			<uui-ref-node-document-type name=${item.name}>
+			<uui-ref-node-document-type name=${ifDefined(item.name)}>
 				<uui-action-bar slot="actions">
 					<uui-button
 						@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}