add disabled state

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -75,6 +75,15 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
+	/**
+	 * Disables the input
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	disabled = false;
+
 	private _modalService?: UmbModalService;
 
 	constructor() {
@@ -160,7 +169,13 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 	render() {
 		return html`
 			${this._renderItems()}
-			<uui-button id="action" label="Add" look="placeholder" color="default" @click="${this.#onAdd}"></uui-button>
+			<uui-button
+				id="action"
+				label="Add"
+				look="placeholder"
+				color="default"
+				@click="${this.#onAdd}"
+				?disabled=${this.disabled}></uui-button>
 		`;
 	}
 
@@ -176,16 +191,18 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 
 	private _renderItem(item: MultipleTextStringValueItem, index: number) {
 		return html`<div class="item">
-			<uui-icon name="umb:navigation"></uui-icon>
+			${this.disabled ? nothing : html`<uui-icon name="umb:navigation"></uui-icon>`}
 			<uui-input
 				id="text-field"
 				value="${item.value}"
-				@input="${(event: UUIInputEvent) => this.#onInput(event, index)}"></uui-input>
+				@input="${(event: UUIInputEvent) => this.#onInput(event, index)}"
+				?disabled=${this.disabled}></uui-input>
 			<uui-button
 				label="Delete ${item.value}"
 				look="primary"
 				color="danger"
 				@click="${() => this.#onDelete(index)}"
+				?disabled=${this.disabled}
 				compact>
 				<uui-icon name="umb:trash"></uui-icon>
 			</uui-button>

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts

@@ -31,6 +31,15 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
 		this._limitMax = config.find((x) => x.alias === 'maxNumber')?.value;
 	}
 
+	/**
+	 * Disables the input
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	disabled = false;
+
 	@state()
 	private _limitMin?: number;
 
@@ -49,7 +58,8 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
 			.items="${this.value}"
 			min="${ifDefined(this._limitMin)}"
 			max="${ifDefined(this._limitMax)}"
-			@change=${this.#onChange}></umb-input-multiple-text-string>`;
+			@change=${this.#onChange}
+			?disabled=${this.disabled}></umb-input-multiple-text-string>`;
 	}
 }