add radio button list

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts

@@ -0,0 +1,68 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { repeat } from 'lit/directives/repeat.js';
+import { UUIBooleanInputEvent } from '@umbraco-ui/uui';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-input-radio-button-list')
+export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitElement) {
+	static styles = [UUITextStyles, css``];
+
+	/**
+	 * List of items.
+	 */
+	@property()
+	list?: [];
+
+	private _selectedKey = '';
+	public get selectedKey(): string {
+		return this._selectedKey;
+	}
+	public set selectedKey(key: string) {
+		this._selectedKey = key;
+		super.value = key;
+	}
+
+	@property()
+	public set value(key: string) {
+		if (key !== this._value) {
+			this.selectedKey = key;
+		}
+	}
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	private _setSelection(e: UUIBooleanInputEvent) {
+		e.stopPropagation();
+		if (e.target.checked) this.selectedKey = e.target.value;
+
+		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+	}
+
+	render() {
+		if (!this.list) return nothing;
+		return html`<form>
+			<uui-form @change="${this._setSelection}">
+				<uui-radio-group .value=${this.value}>
+					${repeat(this.list, (item) => item.key, this.renderRadioButton)}
+				</uui-radio-group>
+			</uui-form>
+		</form>`;
+	}
+
+	renderRadioButton(item: any) {
+		return html`<uui-radio value="${item.key}" label="${item.label}"></uui-radio>`;
+	}
+}
+
+export default UmbInputRadioButtonListElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-radio-button-list': UmbInputRadioButtonListElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts

@@ -1,7 +1,10 @@
 import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
+import '../../../components/input-radio-button-list/input-radio-button-list.element';
+import type { UmbInputRadioButtonListElement } from '../../../components/input-radio-button-list/input-radio-button-list.element';
 import { UmbLitElement } from '@umbraco-cms/element';
+import type { DataTypePropertyData } from '@umbraco-cms/models';
 
 /**
  * @element umb-property-editor-ui-radio-button-list
@@ -10,14 +13,36 @@ import { UmbLitElement } from '@umbraco-cms/element';
 export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement {
 	static styles = [UUITextStyles];
 
-	@property()
-	value = '';
+	private _value = '';
+	@property({ type: String })
+	public get value(): string {
+		return this._value;
+	}
+	public set value(value: string) {
+		this._value = value || '';
+	}
 
 	@property({ type: Array, attribute: false })
-	public config = [];
+	public set config(config: Array<DataTypePropertyData>) {
+		const listData = config.find((x) => x.alias === 'itemList');
+
+		if (!listData) return;
+		this._list = listData.value;
+	}
+
+	@state()
+	private _list: [] = [];
+
+	private _onChange(event: CustomEvent) {
+		this.value = (event.target as UmbInputRadioButtonListElement).selectedKey;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-radio-button-list</div>`;
+		return html`<umb-input-radio-button-list
+			@change="${this._onChange}"
+			.selectedKeys="${this._value}"
+			.list="${this._list}"></umb-input-radio-button-list>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -277,7 +277,15 @@ export const data: Array<DataTypeDetails> = [
 		isFolder: false,
 		propertyEditorModelAlias: 'Umbraco.RadioButtonList',
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.RadioButtonList',
-		data: [],
+		data: [
+			{
+				alias: 'itemList',
+				value: [
+					{ label: 'Label 1', key: '123' },
+					{ label: 'Label 2', key: '456' },
+				],
+			},
+		],
 	},
 	{
 		name: 'Checkbox List',