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 8304c027af..b98ba17a4a 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
@@ -84,6 +84,15 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
@property({ type: Boolean, reflect: true })
disabled = false;
+ /**
+ * Makes the input readonly
+ * @type {boolean}
+ * @attr
+ * @default false
+ */
+ @property({ type: Boolean, reflect: true })
+ readonly = false;
+
private _modalService?: UmbModalService;
constructor() {
@@ -169,13 +178,15 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
render() {
return html`
${this._renderItems()}
-
+ ${this.readonly
+ ? nothing
+ : html``}
`;
}
@@ -191,21 +202,25 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
private _renderItem(item: MultipleTextStringValueItem, index: number) {
return html`
- ${this.disabled ? nothing : html``}
+ ${this.disabled || this.readonly ? nothing : html``}
this.#onInput(event, index)}"
- ?disabled=${this.disabled}>
- this.#onDelete(index)}"
?disabled=${this.disabled}
- compact>
-
-
+ ?readonly=${this.readonly}>
+
+ ${this.readonly
+ ? nothing
+ : html` 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 5d1cdfe20a..456d934bc2 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
@@ -32,7 +32,7 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
}
/**
- * Disables the input
+ * Disables the Multiple Text String Property Editor UI
* @type {boolean}
* @attr
* @default false
@@ -40,6 +40,15 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
@property({ type: Boolean, reflect: true })
disabled = false;
+ /**
+ * Makes the Multiple Text String Property Editor UI readonly
+ * @type {boolean}
+ * @attr
+ * @default false
+ */
+ @property({ type: Boolean, reflect: true })
+ readonly = false;
+
@state()
private _limitMin?: number;
@@ -59,7 +68,8 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
min="${ifDefined(this._limitMin)}"
max="${ifDefined(this._limitMax)}"
@change=${this.#onChange}
- ?disabled=${this.disabled}>`;
+ ?disabled=${this.disabled}
+ ?readonly${this.readonly}>`;
}
}