From 3e23440cb59f0d9b5de9f5d9275f1e4c052e63b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Mar 2024 13:49:55 +0100
Subject: [PATCH] implementation of textbox

---
 .../property-editor-ui-text-box.element.ts    | 23 +++++++++++++++----
 .../validation/mixins/form-control.mixin.ts   |  2 ++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts
index 44d679d872..19663c22dc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts
@@ -1,19 +1,27 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	html,
+	customElement,
+	state,
+	ifDefined,
+	type PropertyValueMap,
+} from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 type UuiInputTypeType = typeof UUIInputElement.prototype.type;
 
 @customElement('umb-property-editor-ui-text-box')
-export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export class UmbPropertyEditorUITextBoxElement
+	extends UmbFormControlMixin<string>(UmbLitElement, undefined)
+	implements UmbPropertyEditorUiElement
+{
 	#defaultType: UuiInputTypeType = 'text';
 
-	@property()
-	value = '';
-
 	@state()
 	private _type: UuiInputTypeType = this.#defaultType;
 
@@ -33,6 +41,11 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements
 		this._placeholder = config?.getValueByAlias('placeholder');
 	}
 
+	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.firstUpdated(_changedProperties);
+		this.addFormControlElement(this.shadowRoot!.querySelector('uui-input')!);
+	}
+
 	private onChange(e: Event) {
 		const newValue = (e.target as HTMLInputElement).value;
 		if (newValue === this.value) return;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts
index 8f978ea7b7..0c0658a128 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts
@@ -310,6 +310,8 @@ export const UmbFormControlMixin = <
 		}
 
 		public checkValidity() {
+			this.pristine = false;
+
 			for (const key in this.#formCtrlElements) {
 				if (this.#formCtrlElements[key].checkValidity() === false) {
 					return false;