diff --git a/src/login/components/input-tag/input-tag.component.html b/src/login/components/input-tag/input-tag.component.html index 76d7d514..599ee667 100644 --- a/src/login/components/input-tag/input-tag.component.html +++ b/src/login/components/input-tag/input-tag.component.html @@ -1,8 +1,9 @@ @let attr = attribute(); @let index = fieldIndex(); @if (attr) { + @let type = attr.annotations.inputType | inputType; @if (index !== undefined) { diff --git a/src/login/components/input-tag/input-tag.component.ts b/src/login/components/input-tag/input-tag.component.ts index 17ee37ae..65567112 100644 --- a/src/login/components/input-tag/input-tag.component.ts +++ b/src/login/components/input-tag/input-tag.component.ts @@ -54,6 +54,9 @@ export class InputTagComponent extends ComponentReference { override doUseDefaultCss = inject(USE_DEFAULT_CSS); override classes = inject>>(LOGIN_CLASSES); + inputListenerTypes = ['text', 'search', 'url', 'tel', 'email', 'password']; + #inputTimeout: any | undefined; + value = computed(() => { const valueOrValues = this.valueOrValues(); const index = this.fieldIndex(); @@ -66,6 +69,34 @@ export class InputTagComponent extends ComponentReference { return valueOrValues ?? null; }); + onInput(event: Event) { + if (this.#inputTimeout) { + clearTimeout(this.#inputTimeout); + } + this.#inputTimeout = setTimeout(() => { + const valueOrValues = this.valueOrValues(); + this.dispatchFormAction.emit({ + action: 'update', + name: this.attribute()?.name ?? '', + valueOrValues: (() => { + if (this.fieldIndex !== undefined) { + if (valueOrValues instanceof Array) { + return valueOrValues.map((value, i) => { + if (i === this.fieldIndex()) { + return (event.target as HTMLInputElement)?.value; + } + + return value; + }); + } + } + + return (event.target as HTMLInputElement)?.value; + })() + }); + }, 300); + } + onChange(event: Event) { const valueOrValues = this.valueOrValues(); this.dispatchFormAction.emit({