diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
index dc5c0a348b..8304c027af 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
+++ b/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()}
-
+
`;
}
@@ -176,16 +191,18 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
private _renderItem(item: MultipleTextStringValueItem, index: number) {
return html`
-
+ ${this.disabled ? nothing : html``}
this.#onInput(event, index)}">
+ @input="${(event: UUIInputEvent) => this.#onInput(event, index)}"
+ ?disabled=${this.disabled}>
this.#onDelete(index)}"
+ ?disabled=${this.disabled}
compact>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
index 6d8d5d9945..5d1cdfe20a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
+++ b/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}>`;
+ @change=${this.#onChange}
+ ?disabled=${this.disabled}>`;
}
}