diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts index 890242bf6404..ba624786e2a8 100644 --- a/projects/core/components/textfield/textfield.component.ts +++ b/projects/core/components/textfield/textfield.component.ts @@ -8,6 +8,7 @@ import { forwardRef, inject, Input, + signal, ViewChild, ViewContainerRef, ViewEncapsulation, @@ -65,6 +66,8 @@ import {TuiWithTextfieldDropdown} from './textfield-dropdown.directive'; }, }) export class TuiTextfieldComponent implements TuiDataListHost { + // TODO: refactor to signal inputs after Angular update + private readonly filler = signal(''); private readonly autoId = tuiInjectId(); private readonly el = tuiInjectElement(); private readonly open = tuiDropdownOpen(); @@ -81,6 +84,20 @@ export class TuiTextfieldComponent implements TuiDataListHost { protected readonly icons = inject(TUI_COMMON_ICONS); + protected computedFiller = computed(() => { + const value = this.directive?.nativeValue() || ''; + const filledValue = value + this.filler().slice(value.length); + + return filledValue.length > value.length ? filledValue : ''; + }); + + protected showFiller = computed( + () => + this.focused() && + !!this.computedFiller() && + (!!this.directive?.nativeValue() || !this.input?.nativeElement.placeholder), + ); + @ViewChild('vcr', {read: ViewContainerRef, static: true}) public readonly vcr?: ViewContainerRef; @@ -90,9 +107,6 @@ export class TuiTextfieldComponent implements TuiDataListHost { }) public readonly input?: ElementRef; - @Input() - public filler = ''; - @Input() public stringify: TuiStringHandler = String; @@ -102,6 +116,11 @@ export class TuiTextfieldComponent implements TuiDataListHost { public readonly focused = computed(() => this.open() || this.focusedIn()); public readonly options = inject(TUI_TEXTFIELD_OPTIONS); + @Input('filler') + public set fillerSetter(filler: string) { + this.filler.set(filler); + } + public get id(): string { return this.input?.nativeElement.id || this.autoId; } @@ -115,21 +134,6 @@ export class TuiTextfieldComponent implements TuiDataListHost { this.open.set(false); } - protected get computedFiller(): string { - const value = this.input?.nativeElement.value || ''; - const filler = value + this.filler.slice(value.length); - - return filler.length > value.length ? filler : ''; - } - - protected get showFiller(): boolean { - return ( - this.focused() && - !!this.computedFiller && - (!!this.input?.nativeElement.value || !this.input?.nativeElement.placeholder) - ); - } - protected get hasLabel(): boolean { return Boolean(this.label?.nativeElement?.childNodes.length); } diff --git a/projects/core/components/textfield/textfield.directive.ts b/projects/core/components/textfield/textfield.directive.ts index aca8aeaf038b..175b0ffc72ee 100644 --- a/projects/core/components/textfield/textfield.directive.ts +++ b/projects/core/components/textfield/textfield.directive.ts @@ -1,4 +1,5 @@ import {computed, Directive, inject, Input, type OnChanges, signal} from '@angular/core'; +import {toSignal} from '@angular/core/rxjs-interop'; import {TuiNativeValidator} from '@taiga-ui/cdk/directives/native-validator'; import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom'; import { @@ -9,6 +10,7 @@ import { tuiAppearanceState, } from '@taiga-ui/core/directives/appearance'; import type {TuiInteractiveState} from '@taiga-ui/core/types'; +import {fromEvent} from 'rxjs'; import {TuiTextfieldComponent} from './textfield.component'; import {TUI_TEXTFIELD_OPTIONS} from './textfield.options'; @@ -35,6 +37,11 @@ export class TuiTextfieldBase implements OnChanges { @Input() public invalid: boolean | null = null; + public nativeValue = toSignal( + fromEvent(this.el, 'input', () => this.el.value), + {initialValue: this.el.value}, + ); + @Input('focused') public set focusedSetter(focused: boolean | null) { this.focused.set(focused); diff --git a/projects/core/components/textfield/textfield.template.html b/projects/core/components/textfield/textfield.template.html index 4ba5580fe24d..aba2f6b964ca 100644 --- a/projects/core/components/textfield/textfield.template.html +++ b/projects/core/components/textfield/textfield.template.html @@ -28,9 +28,9 @@