member and member group

Author: nielslyngsoe

src/packages/members/member-group/components/input-member-group/input-member-group.element.ts

@@ -7,10 +7,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-member-group')
-export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputMemberGroupElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
@@ -87,12 +89,12 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
 	@property({ type: Array })
 	allowedContentTypeIds?: string[] | undefined;
 
-	@property()
-	public set value(idsString: string) {
-		this.selection = splitStringToArray(idsString);
+	@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({ type: Object, attribute: false })

src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts

@@ -18,15 +18,15 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 		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: UmbInputMemberGroupElement }) {
 		this.value = event.target.value;
@@ -36,9 +36,9 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 	render() {
 		return html`
 			<umb-input-member-group
-				.min=${this.min}
-				.max=${this.max}
-				.value=${this.value ?? ''}
+				.min=${this._min}
+				.max=${this._max}
+				.value=${this.value}
 				?showOpenButton=${true}
 				@change=${this.#onChange}></umb-input-member-group>
 		`;

src/packages/members/member/components/input-member/input-member.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-member')
-export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputMemberElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+	UmbLitElement,
+) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
@@ -87,12 +89,12 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
 	@property({ type: Array })
 	allowedContentTypeIds?: string[] | undefined;
 
-	@property()
-	public set value(idsString: string) {
-		this.selection = splitStringToArray(idsString);
+	@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({ type: Object, attribute: false })

src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts

@@ -22,9 +22,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 	}
 
 	render() {
-		return html`
-			<umb-input-member min="0" max="1" .value=${this.value ?? ''} @change=${this.#onChange}></umb-input-member>
-		`;
+		return html` <umb-input-member min="0" max="1" .value=${this.value} @change=${this.#onChange}></umb-input-member> `;
 	}
 }