media-type + collection input

Author: nielslyngsoe

src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts

@@ -10,7 +10,9 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/rou
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-collection-configuration')
-export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(UmbLitElement) {
+export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin<string, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	protected getFormElement() {
 		return undefined;
 	}
@@ -25,7 +27,7 @@ export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(
 	@property({ attribute: 'default-value' })
 	defaultValue?: string;
 
-	#setValue(value: string) {
+	#setValue(value: string | undefined) {
 		this.value = value;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
@@ -65,7 +67,7 @@ export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(
 	}
 
 	#clearDataType() {
-		this.#setValue('');
+		this.#setValue(undefined);
 	}
 
 	#createDataType() {
@@ -99,7 +101,7 @@ export class UmbInputCollectionConfigurationElement extends UmbFormControlMixin(
 		if (!this.value || !this._dataTypePickerModalPath) return nothing;
 		return html`
 			<uui-ref-list>
-				<umb-ref-data-type standalone data-type-id=${this.value as string} @open=${this.#editDataType}>
+				<umb-ref-data-type standalone data-type-id=${this.value} @open=${this.#editDataType}>
 					<uui-action-bar slot="actions">
 						<uui-button
 							label=${this.localize.term('general_choose')}

src/packages/data-type/components/ref-data-type/ref-data-type.element.ts

@@ -1,8 +1,8 @@
-import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js';
 import { UUIIconRequestEvent, UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
 import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js';
 
 /**
  *  @element umb-ref-data-type

src/packages/media/media-types/components/input-media-type/input-media-type.element.ts

@@ -7,10 +7,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-media-type')
-export class UmbInputMediaTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputMediaTypeElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
@@ -82,12 +84,12 @@ export class UmbInputMediaTypeElement extends UUIFormControlMixin(UmbLitElement,
 		return this.#pickerContext.getSelection();
 	}
 
-	@property()
-	public set value(uniques: string) {
-		this.selection = splitStringToArray(uniques);
+	@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;
 	}
 
 	@state()

src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts

@@ -15,24 +15,24 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp
 		if (!config) return;
 
 		const minMax = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
-		this.min = minMax?.min ?? 0;
-		this.max = minMax?.max ?? Infinity;
+		this._min = minMax?.min ?? 0;
+		this._max = minMax?.max ?? Infinity;
 	}
 
 	@state()
-	min = 0;
+	_min = 0;
 
 	@state()
-	max = Infinity;
+	_max = Infinity;
 
 	#onChange(event: CustomEvent & { target: UmbInputMediaTypeElement }) {
-		this.value = event.target.selection.join(',');
+		this.value = event.target.value;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
 		return html`
-			<umb-input-media-type .min=${this.min} .max=${this.max} .value=${this.value ?? ''} @change=${this.#onChange}>
+			<umb-input-media-type .min=${this._min} .max=${this._max} .value=${this.value} @change=${this.#onChange}>
 			</umb-input-media-type>
 		`;
 	}

src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts

@@ -20,7 +20,7 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 	private _allowedContentTypeIDs?: Array<string>;
 
 	@state()
-	private _collection?: string | null;
+	private _collection?: string;
 
 	constructor() {
 		super();
@@ -82,10 +82,8 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
 						<umb-input-media-type
 							.selection=${this._allowedContentTypeIDs ?? []}
-							@change="${(e: CustomEvent) => {
-								const sortedContentTypesList: Array<UmbContentTypeSortModel> = (
-									e.target as UmbInputMediaTypeElement
-								).selection.map((id, index) => ({
+							@change="${(e: CustomEvent & { target: UmbInputMediaTypeElement }) => {
+								const sortedContentTypesList: Array<UmbContentTypeSortModel> = e.target.selection.map((id, index) => ({
 									contentType: { unique: id },
 									sortOrder: index,
 								}));
@@ -101,7 +99,7 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 					<div slot="editor">
 						<umb-input-collection-configuration
 							default-value="3a0156c4-3b8c-4803-bdc1-6871faa83fff"
-							.value=${this._collection ?? ''}
+							.value=${this._collection}
 							@change=${(e: CustomEvent) => {
 								const unique = (e.target as UmbInputCollectionConfigurationElement).value as string;
 								this.#workspaceContext?.setCollection({ unique });