diff --git a/projects/core/components/primitive-textfield/primitive-textfield.component.ts b/projects/core/components/primitive-textfield/primitive-textfield.component.ts
index 57b65ae0f2b45..a7a8d70515b33 100644
--- a/projects/core/components/primitive-textfield/primitive-textfield.component.ts
+++ b/projects/core/components/primitive-textfield/primitive-textfield.component.ts
@@ -71,9 +71,10 @@ export class TuiPrimitiveTextfieldComponent
@tuiDefaultProp()
editable = true;
- @Input()
+ /** @deprecated use `tuiTextfieldFiller` from {@link TuiTextfieldControllerModule} instead */
+ @Input(`filler`)
@tuiDefaultProp()
- filler = ``;
+ textfieldFiller = ``;
@Input()
@tuiDefaultProp()
@@ -137,6 +138,10 @@ export class TuiPrimitiveTextfieldComponent
return this.textfieldPostfix || this.controller.postfix;
}
+ get filler(): string {
+ return this.textfieldFiller || this.controller.filler;
+ }
+
get nativeFocusableElement(): HTMLInputElement | null {
if (this.computedDisabled || !this.focusableElement) {
return null;
diff --git a/projects/core/components/primitive-textfield/test/primitive-textfield.component.spec.ts b/projects/core/components/primitive-textfield/test/primitive-textfield.component.spec.ts
index 058850f2d0b79..4cb4eda74542b 100644
--- a/projects/core/components/primitive-textfield/test/primitive-textfield.component.spec.ts
+++ b/projects/core/components/primitive-textfield/test/primitive-textfield.component.spec.ts
@@ -17,7 +17,7 @@ describe(`PrimitiveTextfield`, () => {
{
const change$ = merge(
diff --git a/projects/core/directives/textfield-controller/textfield-filler.directive.ts b/projects/core/directives/textfield-controller/textfield-filler.directive.ts
new file mode 100644
index 0000000000000..0eb622126cc4e
--- /dev/null
+++ b/projects/core/directives/textfield-controller/textfield-filler.directive.ts
@@ -0,0 +1,23 @@
+import {Directive, forwardRef, InjectionToken, Input} from '@angular/core';
+import {AbstractTuiController} from '@taiga-ui/cdk';
+
+export const TUI_TEXTFIELD_FILLER = new InjectionToken(
+ `[TUI_TEXTFIELD_FILLER]: tuiTextfieldPrefix`,
+ {
+ factory: () => new TuiTextfieldFillerDirective(),
+ },
+);
+
+@Directive({
+ selector: `[tuiTextfieldFiller]`,
+ providers: [
+ {
+ provide: TUI_TEXTFIELD_FILLER,
+ useExisting: forwardRef(() => TuiTextfieldFillerDirective),
+ },
+ ],
+})
+export class TuiTextfieldFillerDirective extends AbstractTuiController {
+ @Input(`tuiTextfieldFiller`)
+ filler = ``;
+}
diff --git a/projects/core/directives/textfield-controller/textfield.controller.ts b/projects/core/directives/textfield-controller/textfield.controller.ts
index 2b8039fcddf3e..d2c0711cf9d7f 100644
--- a/projects/core/directives/textfield-controller/textfield.controller.ts
+++ b/projects/core/directives/textfield-controller/textfield.controller.ts
@@ -1,4 +1,5 @@
import {TuiContextWithImplicit} from '@taiga-ui/cdk';
+import {TuiTextfieldFillerDirective} from '@taiga-ui/core/directives/textfield-controller/textfield-filler.directive';
import {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
import {Observable} from 'rxjs';
@@ -23,6 +24,7 @@ export class TuiTextfieldController {
private readonly sizeDirective: TuiTextfieldSizeDirective,
private readonly prefixDirective: TuiTextfieldPrefixDirective,
private readonly postfixDirective: TuiTextfieldPostfixDirective,
+ private readonly fillerDirective: TuiTextfieldFillerDirective,
) {}
get cleaner(): boolean {
@@ -56,4 +58,8 @@ export class TuiTextfieldController {
get postfix(): string {
return this.postfixDirective.postfix;
}
+
+ get filler(): string {
+ return this.fillerDirective.filler;
+ }
}
diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts
index bf843fa819486..fcae40e76d4ed 100644
--- a/projects/demo/src/modules/components/abstract/control.ts
+++ b/projects/demo/src/modules/components/abstract/control.ts
@@ -103,6 +103,8 @@ export abstract class AbstractExampleTuiControl
exampleText = ``;
+ filler = ``;
+
maxHeight: number | null = null;
readonly iconLeftVariants = [``, `tuiIconMailLarge`, `tuiIconPiechartLarge`];
diff --git a/projects/demo/src/modules/components/abstract/textfield-controller-documentation/textfield-controller-documentation.template.html b/projects/demo/src/modules/components/abstract/textfield-controller-documentation/textfield-controller-documentation.template.html
index 2e79b6b51a19a..c6cfc085639fd 100644
--- a/projects/demo/src/modules/components/abstract/textfield-controller-documentation/textfield-controller-documentation.template.html
+++ b/projects/demo/src/modules/components/abstract/textfield-controller-documentation/textfield-controller-documentation.template.html
@@ -93,4 +93,13 @@
SvgService
+
+ Gray background text as a hint (e.g. HH:MM:SS for time)
+
diff --git a/projects/demo/src/modules/components/combo-box/combo-box.template.html b/projects/demo/src/modules/components/combo-box/combo-box.template.html
index cedeb0048b223..a48f60429f50e 100644
--- a/projects/demo/src/modules/components/combo-box/combo-box.template.html
+++ b/projects/demo/src/modules/components/combo-box/combo-box.template.html
@@ -103,6 +103,7 @@
[tuiHintDirection]="hintDirection"
[tuiHintAppearance]="hintAppearance"
[tuiTextfieldIconLeft]="iconLeft"
+ [tuiTextfieldFiller]="filler"
[tuiTextfieldCleaner]="cleaner"
[tuiTextfieldLabelOutside]="labelOutside"
[tuiTextfieldSize]="size"
diff --git a/projects/demo/src/modules/components/input-count/input-count.template.html b/projects/demo/src/modules/components/input-count/input-count.template.html
index 5e9c9b9a1483b..a44036b5e6e6b 100644
--- a/projects/demo/src/modules/components/input-count/input-count.template.html
+++ b/projects/demo/src/modules/components/input-count/input-count.template.html
@@ -81,6 +81,7 @@
[readOnly]="readOnly"
[tuiTextfieldIconLeft]="iconLeft"
[tuiTextfieldLabelOutside]="labelOutside"
+ [tuiTextfieldFiller]="filler"
[tuiTextfieldSize]="size"
[style.text-align]="textAlign"
>
@@ -136,7 +137,7 @@
[documentationPropertyDeprecated]="true"
[(documentationPropertyValue)]="prefix"
>
- A prefix symbol, like currency Use
+ A prefix symbol, like currency. Use
tuiTextfieldPrefix
instead
diff --git a/projects/demo/src/modules/components/input-number/input-number.template.html b/projects/demo/src/modules/components/input-number/input-number.template.html
index 8714e39305ef7..961287f0669e7 100644
--- a/projects/demo/src/modules/components/input-number/input-number.template.html
+++ b/projects/demo/src/modules/components/input-number/input-number.template.html
@@ -170,6 +170,7 @@ There are also other components to input numbers:
[tuiTextfieldSize]="size"
[tuiTextfieldPrefix]="prefix"
[tuiTextfieldPostfix]="postfix"
+ [tuiTextfieldFiller]="filler"
[prefix]="prefix"
[postfix]="postfix"
[min]="min"
@@ -230,7 +231,7 @@ There are also other components to input numbers:
[documentationPropertyValues]="prefixVariants"
[(documentationPropertyValue)]="prefix"
>
- A prefix symbol, like currency Use
+ A prefix symbol, like currency. Use
tuiTextfieldPrefix
instead
@@ -243,7 +244,7 @@ There are also other components to input numbers:
[documentationPropertyValues]="prefixVariants"
[(documentationPropertyValue)]="postfix"
>
- A postfix symbol, like currency Use
+ A postfix symbol, like currency. Use
tuiTextfieldPostfix
instead
diff --git a/projects/demo/src/modules/components/input-phone/input-phone.template.html b/projects/demo/src/modules/components/input-phone/input-phone.template.html
index 877aa13fc635b..641f2bcd861c1 100644
--- a/projects/demo/src/modules/components/input-phone/input-phone.template.html
+++ b/projects/demo/src/modules/components/input-phone/input-phone.template.html
@@ -58,6 +58,7 @@
[tuiTextfieldCustomContent]="customContent"
[tuiTextfieldLabelOutside]="labelOutside"
[tuiTextfieldSize]="size"
+ [tuiTextfieldFiller]="filler"
[countryCode]="countryCode"
[phoneMaskAfterCountryCode]="phoneMaskAfterCountryCode"
[pseudoInvalid]="pseudoInvalid"
diff --git a/projects/demo/src/modules/components/input-slider/input-slider.template.html b/projects/demo/src/modules/components/input-slider/input-slider.template.html
index 44302ee454e75..5878db2b34088 100644
--- a/projects/demo/src/modules/components/input-slider/input-slider.template.html
+++ b/projects/demo/src/modules/components/input-slider/input-slider.template.html
@@ -234,7 +234,9 @@
[documentationPropertyDeprecated]="true"
[(documentationPropertyValue)]="prefix"
>
- A prefix symbol, like currency
+ A prefix symbol, like currency. Use
+ tuiTextfieldPrefix
+ instead
- A postfix symbol, like currency
+ A postfix symbol, like currency. Use
+ tuiTextfieldPostfix
+ instead
- Gray background text as a hint (e.g. HH:MM:SS for time)
+ Gray background text as a hint (e.g. HH:MM:SS for time). Use
+ tuiTextfieldFiller
+ instead