diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
index 3713da212d..5ecc6e2186 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
@@ -1,9 +1,9 @@
-import { css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { css, customElement, html, nothing, property, query, when } from '@umbraco-cms/backoffice/external/lit';
import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
/**
* @element umb-input-multiple-text-string-item
@@ -77,31 +77,35 @@ export class UmbInputMultipleTextStringItemElement extends UUIFormControlMixin(U
render() {
return html`
- ${this.disabled || this.readonly ? nothing : html``}
+ ${this.disabled || this.readonly ? nothing : html``}
+
- ${this.readonly
- ? nothing
- : html` html`
+
+ @click=${this.#onDelete}>
- `}
+
+ `,
+ )}
`;
}
@@ -121,6 +125,10 @@ export class UmbInputMultipleTextStringItemElement extends UUIFormControlMixin(U
#input {
width: 100%;
}
+
+ .handle {
+ cursor: move;
+ }
`,
];
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts
index 92b12a1ede..5f87ab380b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts
@@ -74,7 +74,16 @@ export class UmbInputMultipleTextStringElement extends UmbFormControlMixin index,
- (item, index) =>
- html` html`
+ this.#onInput(event, index)}
- @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
+ required
+ required-message="Item ${index + 1} is missing a value"
+ value=${item}
?disabled=${this.disabled}
?readonly=${this.readonly}
- required
- required-message="Item ${index + 1} is missing a value">`,
+ @delete=${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}
+ @input=${(event: UmbInputEvent) => this.#onInput(event, index)}>
+
+ `,
)}
`;
}
#renderAddButton() {
+ if (this.disabled || this.readonly) return nothing;
return html`
- ${this.disabled || this.readonly
- ? nothing
- : html``}
+
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
index 5cbb4572b2..3a3d41ca74 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
@@ -1,10 +1,10 @@
import { UmbPropertyValueChangeEvent } from '../../core/property-editor/index.js';
+import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components';
/**
* @element umb-property-editor-ui-multiple-text-string
@@ -15,8 +15,10 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
value?: Array;
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
- this._limitMin = config?.getValueByAlias('minNumber');
- this._limitMax = config?.getValueByAlias('maxNumber');
+ if (!config) return;
+
+ this._min = Number(config.getValueByAlias('min')) || 0;
+ this._max = Number(config.getValueByAlias('max')) || Infinity;
}
/**
@@ -47,10 +49,10 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
required = false;
@state()
- private _limitMin?: number;
+ private _min = 0;
@state()
- private _limitMax?: number;
+ private _max = Infinity;
#onChange(event: UmbChangeEvent) {
event.stopPropagation();
@@ -60,14 +62,17 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
}
render() {
- return html``;
+ return html`
+
+
+ `;
}
}