package builder corrections

Author: nielslyngsoe

src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts

@@ -198,7 +198,10 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		return html`
 			<umb-property-layout label="Content" description="Select the starting root content">
 				<div slot="editor">
-					<umb-input-document max="1" .value=${this._package.contentNodeId ?? ''} @change=${this.#onContentChange}>
+					<umb-input-document
+						max="1"
+						.value=${this._package.contentNodeId ?? undefined}
+						@change=${this.#onContentChange}>
 					</umb-input-document>
 					<uui-checkbox
 						label="Include child nodes"

src/packages/property-editors/content-picker/components/input-content/input-content.element.ts

@@ -1,23 +1,26 @@
 import type { UmbContentPickerSource } from '../../types.js';
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 import type { UmbInputMemberElement } from '@umbraco-cms/backoffice/member';
 import type { UmbReferenceByUniqueAndType } from '@umbraco-cms/backoffice/models';
 import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree';
+import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 const elementName = 'umb-input-content';
 @customElement(elementName)
-export class UmbInputContentElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputContentElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	protected getFormElement() {
 		return undefined;
 	}
 
 	private _type: UmbContentPickerSource['type'] = 'content';
-	@property()
+	@property({ type: Object, attribute: false })
 	public set type(newType: UmbContentPickerSource['type']) {
 		const oldType = this._type;
 		if (newType?.toLowerCase() !== this._type) {
@@ -52,15 +55,23 @@ export class UmbInputContentElement extends UUIFormControlMixin(UmbLitElement, '
 
 	#entityTypeLookup = { content: 'document', media: 'media', member: 'member' };
 
+	// TODO: to be consistent with other pickers, this should be named `selection` [NL]
 	@property({ type: Array })
 	public set items(items: Array<UmbReferenceByUniqueAndType>) {
 		this.#selection = items?.map((item) => item.unique) ?? [];
-		this.value = items?.map((item) => item.unique).join(',');
 	}
 	public get items(): Array<UmbReferenceByUniqueAndType> {
 		return this.#selection.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id }));
 	}
 
+	@property({ type: String })
+	public set value(selectionString: string | undefined) {
+		this.#selection = splitStringToArray(selectionString);
+	}
+	public get value(): string | undefined {
+		return this.#selection.length > 0 ? this.#selection.join(',') : undefined;
+	}
+
 	#selection: Array<string> = [];
 
 	#onChange(event: CustomEvent) {

src/packages/property-editors/content-picker/dynamic-root/input-content-picker-document-root/input-content-picker-document-root.element.ts

@@ -1,7 +1,9 @@
 import type { UmbContentPickerDynamicRoot, UmbContentPickerDynamicRootQueryStep } from '../../types.js';
-import { UMB_CONTENT_PICKER_DOCUMENT_ROOT_ORIGIN_PICKER_MODAL, UMB_CONTENT_PICKER_DOCUMENT_ROOT_QUERY_STEP_PICKER_MODAL } from '../modals/index.js';
+import {
+	UMB_CONTENT_PICKER_DOCUMENT_ROOT_ORIGIN_PICKER_MODAL,
+	UMB_CONTENT_PICKER_DOCUMENT_ROOT_QUERY_STEP_PICKER_MODAL,
+} from '../modals/index.js';
 import { html, css, customElement, property, ifDefined, state, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -13,10 +15,14 @@ import type {
 	ManifestDynamicRootQueryStep,
 } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 const elementName = 'umb-input-content-picker-document-root';
 @customElement(elementName)
-export class UmbInputContentPickerDocumentRootElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixin<
+	string | undefined,
+	typeof UmbLitElement
+>(UmbLitElement) {
 	protected getFormElement() {
 		return undefined;
 	}

src/packages/static-file/components/input-static-file/input-static-file.context.ts

@@ -7,7 +7,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbStaticFilePickerContext extends UmbPickerInputContext<
 	UmbStaticFileItemModel,
-	any,
+	UmbStaticFileItemModel,
 	UmbStaticFilePickerModalData,
 	UmbStaticFilePickerModalValue
 > {

src/packages/static-file/components/input-static-file/input-static-file.element.ts

@@ -3,11 +3,13 @@ import { UmbStaticFilePickerContext } from './input-static-file.context.js';
 import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-static-file')
-export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputStaticFileElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	#serializer = new UmbServerFilePathUniqueSerializer();
 
 	/**
@@ -63,14 +65,12 @@ export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement
 		return this.#pickerContext.getSelection();
 	}
 
-	@property()
-	// get value is handled by super class.
-	public set value(pathsString: string) {
-		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selection = splitStringToArray(pathsString);
+	@property({ type: String })
+	public set value(selectionString: string | undefined) {
+		this.selection = splitStringToArray(selectionString);
 	}
-	public get value(): string {
-		return this.selection.join(',');
+	public get value(): string | undefined {
+		return this.selection.length > 0 ? this.selection.join(',') : undefined;
 	}
 
 	@property()