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``} + @input="${(event: UUIInputEvent) => this.#onInput(event, index)}" + ?disabled=${this.disabled}> 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}>`; } }