Package Builder: Template Picker

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts

@@ -277,7 +277,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
 		const modal = modalManager.open(this, UMB_TEMPLATE_PICKER_MODAL, {
 			data: {
-				hideTreeRoot: true,
 				multiple: false,
 				pickableFilter: (template) =>
 					this._allowedTemplates?.find((allowed) => template.unique === allowed.id) ? true : false,

src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts

@@ -1,6 +1,7 @@
 import { UmbDictionaryPickerContext } from '../../../dictionary/components/input-dictionary/input-dictionary.context.js';
 import { UmbMediaPickerContext } from '../../../media/media/components/input-media/input-media.context.js';
 import { UmbPackageRepository } from '../../package/repository/index.js';
+import { UmbTemplatePickerContext } from '../../../templating/templates/components/input-template/input-template.context.js';
 import type { UmbCreatedPackageDefinition } from '../../types.js';
 import type { UmbDataTypeInputElement } from '../../../data-type/components/data-type-input/data-type-input.element.js';
 import type { UmbInputLanguageElement } from '../../../language/components/input-language/input-language.element.js';
@@ -183,8 +184,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 				${this.#renderLanguageSection()}
 				${this.#renderDictionarySection()}
 				${this.#renderDataTypeSection()}
-
-			<umb-property-layout label="Templates" description=""> ${this.#renderTemplateSection()} </umb-property-layout>
+				${this.#renderTemplateSection()}
 
 			<umb-property-layout label="Stylesheets" description="">
 				${this.#renderStylesheetsSection()}
@@ -347,10 +347,27 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		`;
 	}
 
+	#onTemplateChange(event: { target: UmbInputEntityElement }) {
+		if (!this._package) return;
+
+		this._package.templates = event.target.selection ?? [];
+		this.requestUpdate('_package');
+	}
+
 	#renderTemplateSection() {
-		return html`<div slot="editor">
-			<umb-input-checkbox-list></umb-input-checkbox-list>
-		</div>`;
+		if (!this._package) return nothing;
+		return html`
+			<umb-property-layout label="Templates">
+				<div slot="editor">
+					<umb-input-entity
+						.getIcon=${() => 'icon-newspaper'}
+						.pickerContext=${UmbTemplatePickerContext}
+						.selection=${this._package.templates ?? []}
+						@change=${this.#onTemplateChange}>
+					</umb-input-entity>
+				</div>
+			</umb-property-layout>
+		`;
 	}
 
 	#renderStylesheetsSection() {

src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.context.ts

@@ -0,0 +1,13 @@
+import { UMB_TEMPLATE_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
+import { UMB_TEMPLATE_PICKER_MODAL } from '../../modals/template-picker-modal.token.js';
+import type { UmbTemplateItemModel } from '../../repository/index.js';
+import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbTemplatePickerContext extends UmbPickerInputContext<UmbTemplateItemModel> {
+	constructor(host: UmbControllerHost) {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		super(host, UMB_TEMPLATE_ITEM_REPOSITORY_ALIAS, UMB_TEMPLATE_PICKER_MODAL);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts

@@ -129,7 +129,6 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
 		const modalContext = modalManager.open(this, UMB_TEMPLATE_PICKER_MODAL, {
 			data: {
-				hideTreeRoot: true,
 				multiple: true,
 				pickableFilter: (template) => template.unique !== null && !this._selection.includes(template.unique),
 			},

src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/template-picker-modal.token.ts

@@ -1,4 +1,4 @@
-import { UmbModalToken } from '../../../core/modal/token/modal-token.js';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import type { UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
 import type { UmbTemplateTreeItemModel } from '@umbraco-cms/backoffice/template';
 
@@ -13,6 +13,7 @@ export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken<UmbTemplatePickerModa
 			size: 'small',
 		},
 		data: {
+			hideTreeRoot: true,
 			treeAlias: 'Umb.Tree.Template',
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts

@@ -129,7 +129,6 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 	#openMasterTemplatePicker() {
 		const modalContext = this.#modalContext?.open(this, UMB_TEMPLATE_PICKER_MODAL, {
 			data: {
-				hideTreeRoot: true,
 				pickableFilter: (item) => {
 					return item.unique !== null && item.unique !== this.#templateWorkspaceContext?.getUnique();
 				},