diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts index 6d5f5a62b3..f253fe3b9e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts @@ -21,10 +21,21 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL align-items: center; margin-bottom: var(--uui-size-space-3); gap: var(--uui-size-space-3); + border: 1px solid transparent; + } + + :host(:not([pristine]):invalid), + /* polyfill support */ + :host(:not([pristine])[internals-invalid]) { + border-color: var(--uui-color-danger); + } + + #validation-message { + flex: 1; } #input { - flex: 1; + width: 100%; } `, ]; @@ -108,14 +119,18 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL render() { return html` ${this.disabled || this.readonly ? nothing : html``} - + + + ${this.readonly ? nothing 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 43f841ee20..40863e5406 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 @@ -168,14 +168,17 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl this._items, (item, index) => index, (item, index) => - html` this.#onInput(event, index)} - @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}" - ?disabled=${this.disabled} - ?readonly=${this.readonly} - required - required-message="Item ${index + 1} is missing a value">` + html` + this.#onInput(event, index)} + @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}" + ?disabled=${this.disabled} + ?readonly=${this.readonly} + required + required-message="Item ${index + 1} is missing a value"> + ` )} `; }