diff --git a/renderers/lit/src/0.8/ui/text-field.ts b/renderers/lit/src/0.8/ui/text-field.ts index 08295e87..3ff2f4b3 100644 --- a/renderers/lit/src/0.8/ui/text-field.ts +++ b/renderers/lit/src/0.8/ui/text-field.ts @@ -115,6 +115,18 @@ export class TextField extends Root { return; } + this.dispatchEvent( + new CustomEvent("a2ui-validation-input", { + bubbles: true, + composed: true, + detail: { + componentId: this.id, + value: evt.target.value, + valid: evt.target.checkValidity(), + }, + }) + ); + this.#setBoundValue(evt.target.value); }} name="data" diff --git a/samples/client/lit/component_gallery/component-gallery.ts b/samples/client/lit/component_gallery/component-gallery.ts index 773643ff..8176213e 100644 --- a/samples/client/lit/component_gallery/component-gallery.ts +++ b/samples/client/lit/component_gallery/component-gallery.ts @@ -186,9 +186,15 @@ export class A2UIComponentGallery extends SignalWatcher(LitElement) { async connectedCallback() { super.connectedCallback(); + this.addEventListener("a2ui-validation-input", this.#handleValidationInput); await this.#initiateSession(); } + override disconnectedCallback() { + super.disconnectedCallback(); + this.removeEventListener("a2ui-validation-input", this.#handleValidationInput); + } + async #initiateSession() { const message: v0_8.Types.A2UIClientEventMessage = { request: "START_GALLERY" @@ -196,6 +202,24 @@ export class A2UIComponentGallery extends SignalWatcher(LitElement) { await this.#sendAndProcessMessage(message); } + // Debug Validation Events + #handleValidationInput = (e: Event) => { + const detail = (e as CustomEvent).detail; + + // Log to Console + console.log( + `%c[Validation] Component: ${detail.componentId} | Valid: ${detail.valid} | Value: "${detail.value}"`, + detail.valid ? "color: green" : "color: red; font-weight: bold" + ); + + // Log to Debug Panel + this.#log( + "info", + `Validation: ${detail.componentId} is ${detail.valid ? "VALID" : "INVALID"}`, + detail + ); + }; + render() { return html`