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``} - - - + ?readonly=${this.readonly}> + + ${this.readonly + ? nothing + : html` + + `}
`; } } 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}>`; } }