Package Builder: Stylesheet Picker

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 { UmbStylesheetPickerContext } from '../../../templating/stylesheets/components/stylesheet-input/stylesheet-input.context.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';
@@ -185,10 +186,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 				${this.#renderDictionarySection()}
 				${this.#renderDataTypeSection()}
 				${this.#renderTemplateSection()}
-
-			<umb-property-layout label="Stylesheets" description="">
 				${this.#renderStylesheetsSection()}
-			</umb-property-layout>
 
 			<umb-property-layout label="Scripts" description=""> ${this.#renderScriptsSection()} </umb-property-layout>
 
@@ -370,10 +368,29 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		`;
 	}
 
+	#onStylesheetsChange(event: { target: UmbInputEntityElement }) {
+		if (!this._package) return;
+
+		this._package.stylesheets =
+			event.target.selection?.map((path) => this.#serverFilePathUniqueSerializer.toServerPath(path) as string) ?? [];
+		this.requestUpdate('_package');
+	}
+
 	#renderStylesheetsSection() {
-		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="Stylesheets">
+				<div slot="editor">
+					<umb-input-entity
+						.getIcon=${() => 'icon-brush-alt'}
+						.pickerContext=${UmbStylesheetPickerContext}
+						.selection=${this._package.stylesheets.map((path) => this.#serverFilePathUniqueSerializer.toUnique(path)) ??
+						[]}
+						@change=${this.#onStylesheetsChange}>
+					</umb-input-entity>
+				</div>
+			</umb-property-layout>
+		`;
 	}
 
 	#renderScriptsSection() {

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.context.ts

@@ -9,6 +9,6 @@ export class UmbStylesheetPickerContext extends UmbPickerInputContext<UmbStylesh
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		// TODO: Item and tree item types collide
-		super(host, UMB_STYLESHEET_ITEM_REPOSITORY_ALIAS, UMB_STYLESHEET_PICKER_MODAL, (item) => item.unique);
+		super(host, UMB_STYLESHEET_ITEM_REPOSITORY_ALIAS, UMB_STYLESHEET_PICKER_MODAL);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts

@@ -53,11 +53,12 @@ export class UmbStylesheetInputElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selection(): Array<string> {
-		return this.#pickerContext.getSelection();
+	@property({ type: Array })
+	public set selection(ids: Array<string> | undefined) {
+		this.#pickerContext.setSelection(ids ?? []);
 	}
-	public set selection(ids: Array<string>) {
-		this.#pickerContext.setSelection(ids);
+	public get selection(): Array<string> | undefined {
+		return this.#pickerContext.getSelection();
 	}
 
 	@property()

src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts

@@ -32,7 +32,7 @@ export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement
 
 	#onChange(event: CustomEvent) {
 		const target = event.target as UmbStylesheetInputElement;
-		this._value = target.selection;
+		this._value = target.selection ?? [];
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}