Merge branch 'main' into bugfix/property-editor/tags

src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts

@@ -1,7 +1,8 @@
 import { css, html, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
-import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-dropdown-list')
 export class UmbInputDropdownListElement extends FormControlMixin(UmbLitElement) {
@@ -25,7 +26,7 @@ export class UmbInputDropdownListElement extends FormControlMixin(UmbLitElement)
 	#onChange(e: UUISelectEvent) {
 		e.stopPropagation();
 		if (e.target.value) this.value = e.target.value;
-		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts

@@ -1,55 +1,41 @@
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 /**
  * @element umb-property-editor-ui-dropdown
  */
 @customElement('umb-property-editor-ui-dropdown')
 export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	#value = '';
-	@property({ type: String })
-	public set value(value: string | undefined) {
-		this.#value = value?.trim() || '';
-	}
-	public get value(): string {
-		return this.#value;
-	}
+	#selection: Array<string> = [];
 
-	@state()
-	_multiple?: boolean;
+	@property({ type: Array })
+	public set value(value: Array<string> | string | undefined) {
+		this.#selection = Array.isArray(value) ? value : value ? [value] : [];
+	}
+	public get value(): Array<string> | undefined {
+		return this.#selection;
+	}
 
 	@state()
 	private _list: Array<Option> = [];
 
+	@state()
+	private _multiple?: boolean;
+
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		if (!config) return;
+		const listData: string[] | undefined = config?.getValueByAlias('items');
+		this._list = listData?.map((x) => ({ value: x, name: x, selected: this.#selection.includes(x) })) ?? [];
 		this._multiple = config?.getValueByAlias('multiple');
-
-		const listData: Record<number, { value: string; sortOrder: number }> | undefined = config.getValueByAlias('items');
-		if (!listData) return;
-
-		// formatting the items in the dictionary into an array
-		const sortedItems = [];
-		const values = Object.values<{ value: string; sortOrder: number }>(listData);
-		const keys = Object.keys(listData);
-		for (let i = 0; i < values.length; i++) {
-			sortedItems.push({ key: keys[i], sortOrder: values[i].sortOrder, value: values[i].value });
-		}
-
-		// ensure the items are sorted by the provided sort order
-		sortedItems.sort((a, b) => {
-			return a.sortOrder > b.sortOrder ? 1 : b.sortOrder > a.sortOrder ? -1 : 0;
-		});
-
-		this._list = sortedItems.map((x) => ({ value: x.value, name: x.value, selected: x.value === this.value }));
 	}
 
 	#onChange(event: UUISelectEvent) {
-		this.value = event.target.value as string;
-		this.dispatchEvent(new CustomEvent('property-value-change'));
+		const value = event.target.value as string;
+		this.value = value ? [value] : [];
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/textarea/manifests.ts

@@ -15,7 +15,7 @@ export const manifest: ManifestPropertyEditorUi = {
 				{
 					alias: 'rows',
 					label: 'Number of rows',
-					description: 'If empty the textarea is set to autoheight',
+					description: 'If empty or zero, the textarea is set to auto-height',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
 				},
 				{

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/textarea/property-editor-ui-textarea.element.ts

@@ -49,7 +49,7 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
 			rows="${ifDefined(this._rows)}"
 			@input=${this.onInput}
 			style="${styleMap(this._css)}"
-			autoheight="${this._rows ? false : true}"></uui-textarea>`;
+			auto-height=${this._rows ? false : true}></uui-textarea>`;
 	}
 
 	static styles = [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/user-picker/property-editor-ui-user-picker.element.ts

@@ -1,7 +1,9 @@
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbUserInputElement } from '@umbraco-cms/backoffice/user';
 
 /**
  * @element umb-property-editor-ui-user-picker
@@ -9,14 +11,19 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 @customElement('umb-property-editor-ui-user-picker')
 export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property()
-	value = '';
+	value?: string = '';
 
 	@property({ attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
-	// TODO: implement config
+	#onChange(event: CustomEvent) {
+		const element = event.target as UmbUserInputElement;
+		this.value = element.selection.join(',');
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
+
 	render() {
-		return html` <umb-user-input></umb-user-input>`;
+		return html`<umb-user-input max="1" .value=${this.value ?? ''} @change=${this.#onChange}></umb-user-input>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts

@@ -1,12 +1,14 @@
 import type { UmbUserItemModel } from '../../repository/index.js';
 import { UmbUserPickerContext } from './user-input.context.js';
-import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-user-input')
 export class UmbUserInputElement extends FormControlMixin(UmbLitElement) {
+	// TODO: [LK] Add sorting!
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -105,31 +107,42 @@ export class UmbUserInputElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
+	#openPicker() {
+		this.#pickerContext.openPicker({});
+	}
+
 	render() {
 		return html`
-			<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
-			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open"
-				>Add</uui-button
-			>
+			<uui-ref-list> ${this._items?.map((item) => this.#renderItem(item))} </uui-ref-list>
+			${this.#renderAddButton()}
 		`;
 	}
 
-	private _renderItem(item: UmbUserItemModel) {
+	#renderItem(item: UmbUserItemModel) {
 		if (!item.unique) return;
 		return html`
-			<uui-ref-node-user name=${ifDefined(item.name)}>
+			<uui-ref-node-user name=${item.name}>
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.unique)} label="Remove ${item.name}"
-						>Remove</uui-button
-					>
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
+						label=${this.localize.term('general_remove')}></uui-button>
 				</uui-action-bar>
 			</uui-ref-node-user>
 		`;
 	}
 
+	#renderAddButton() {
+		if (this.max === 1 && this.selection.length >= this.max) return nothing;
+		return html`<uui-button
+			id="btn-add"
+			look="placeholder"
+			@click=${this.#openPicker}
+			label=${this.localize.term('general_add')}></uui-button>`;
+	}
+
 	static styles = [
 		css`
-			#add-button {
+			#btn-add {
 				width: 100%;
 			}
 		`,

src/Umbraco.Web.UI.Client/src/packages/user/user/modals/user-picker/user-picker-modal.element.ts

@@ -48,7 +48,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
 
 	render() {
 		return html`
-			<umb-body-layout headline="Select Users">
+			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectUsers')}>
 				<uui-box>
 					${this._users.map(
 						(user) => html`