diff --git a/projects/core/components/primitive-textfield/primitive-textfield.component.ts b/projects/core/components/primitive-textfield/primitive-textfield.component.ts
index a59b8e3a8fdc..bd0d20a829cd 100644
--- a/projects/core/components/primitive-textfield/primitive-textfield.component.ts
+++ b/projects/core/components/primitive-textfield/primitive-textfield.component.ts
@@ -69,9 +69,10 @@ export class TuiPrimitiveTextfieldComponent
@tuiDefaultProp()
editable = true;
- @Input()
+ /** @deprecated use `tuiTextfieldFiller` from {@link TuiTextfieldControllerModule} instead */
+ @Input(`filler`)
@tuiDefaultProp()
- filler = ``;
+ textfieldFiller = ``;
/**
* @deprecated:
@@ -94,13 +95,15 @@ export class TuiPrimitiveTextfieldComponent
@tuiDefaultProp()
disabled = false;
- @Input()
+ /** @deprecated use `tuiTextfieldPrefix` from {@link TuiTextfieldControllerModule} instead */
+ @Input(`prefix`)
@tuiDefaultProp()
- prefix = ``;
+ textfieldPrefix = ``;
- @Input()
+ /** @deprecated use `tuiTextfieldPostfix` from {@link TuiTextfieldControllerModule} instead */
+ @Input(`postfix`)
@tuiDefaultProp()
- postfix = ``;
+ textfieldPostfix = ``;
@Input()
@tuiDefaultProp()
@@ -129,6 +132,18 @@ export class TuiPrimitiveTextfieldComponent
super();
}
+ get prefix(): string {
+ return this.textfieldPrefix || this.controller.prefix;
+ }
+
+ get postfix(): string {
+ 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 058850f2d0b7..d0cc5de3aa36 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,14 +17,14 @@ describe(`PrimitiveTextfield`, () => {
diff --git a/projects/core/directives/textfield-controller/index.ts b/projects/core/directives/textfield-controller/index.ts
index eeaa8c0f6b66..bc16ec6bd67b 100644
--- a/projects/core/directives/textfield-controller/index.ts
+++ b/projects/core/directives/textfield-controller/index.ts
@@ -3,8 +3,11 @@ export * from './textfield-cleaner.directive';
export * from './textfield-controller.module';
export * from './textfield-controller.provider';
export * from './textfield-custom-content.directive';
+export * from './textfield-filler.directive';
export * from './textfield-icon.directive';
export * from './textfield-icon-left.directive';
export * from './textfield-label-outside.directive';
export * from './textfield-options';
+export * from './textfield-postfix.directive';
+export * from './textfield-prefix.directive';
export * from './textfield-size.directive';
diff --git a/projects/core/directives/textfield-controller/textfield-controller.module.ts b/projects/core/directives/textfield-controller/textfield-controller.module.ts
index d539bb9d01ad..60977ce8cb08 100644
--- a/projects/core/directives/textfield-controller/textfield-controller.module.ts
+++ b/projects/core/directives/textfield-controller/textfield-controller.module.ts
@@ -2,9 +2,12 @@ import {NgModule} from '@angular/core';
import {TuiTextfieldCleanerDirective} from './textfield-cleaner.directive';
import {TuiTextfieldCustomContentDirective} from './textfield-custom-content.directive';
+import {TuiTextfieldFillerDirective} from './textfield-filler.directive';
import {TuiTextfieldIconDirective} from './textfield-icon.directive';
import {TuiTextfieldIconLeftDirective} from './textfield-icon-left.directive';
import {TuiTextfieldLabelOutsideDirective} from './textfield-label-outside.directive';
+import {TuiTextfieldPostfixDirective} from './textfield-postfix.directive';
+import {TuiTextfieldPrefixDirective} from './textfield-prefix.directive';
import {TuiTextfieldSizeDirective} from './textfield-size.directive';
@NgModule({
@@ -15,6 +18,9 @@ import {TuiTextfieldSizeDirective} from './textfield-size.directive';
TuiTextfieldSizeDirective,
TuiTextfieldIconDirective,
TuiTextfieldIconLeftDirective,
+ TuiTextfieldPrefixDirective,
+ TuiTextfieldPostfixDirective,
+ TuiTextfieldFillerDirective,
],
exports: [
TuiTextfieldCleanerDirective,
@@ -23,6 +29,9 @@ import {TuiTextfieldSizeDirective} from './textfield-size.directive';
TuiTextfieldSizeDirective,
TuiTextfieldIconDirective,
TuiTextfieldIconLeftDirective,
+ TuiTextfieldPrefixDirective,
+ TuiTextfieldPostfixDirective,
+ TuiTextfieldFillerDirective,
],
})
export class TuiTextfieldControllerModule {}
diff --git a/projects/core/directives/textfield-controller/textfield-controller.provider.ts b/projects/core/directives/textfield-controller/textfield-controller.provider.ts
index 5a6c08107b4a..30cc40912233 100644
--- a/projects/core/directives/textfield-controller/textfield-controller.provider.ts
+++ b/projects/core/directives/textfield-controller/textfield-controller.provider.ts
@@ -12,6 +12,10 @@ import {
TUI_TEXTFIELD_CUSTOM_CONTENT,
TuiTextfieldCustomContentDirective,
} from './textfield-custom-content.directive';
+import {
+ TUI_TEXTFIELD_FILLER,
+ TuiTextfieldFillerDirective,
+} from './textfield-filler.directive';
import {TUI_TEXTFIELD_ICON, TuiTextfieldIconDirective} from './textfield-icon.directive';
import {
TUI_TEXTFIELD_ICON_LEFT,
@@ -22,6 +26,14 @@ import {
TuiTextfieldLabelOutsideDirective,
} from './textfield-label-outside.directive';
import {TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptions} from './textfield-options';
+import {
+ TUI_TEXTFIELD_POSTFIX,
+ TuiTextfieldPostfixDirective,
+} from './textfield-postfix.directive';
+import {
+ TUI_TEXTFIELD_PREFIX,
+ TuiTextfieldPrefixDirective,
+} from './textfield-prefix.directive';
import {TUI_TEXTFIELD_SIZE, TuiTextfieldSizeDirective} from './textfield-size.directive';
export const TUI_TEXTFIELD_WATCHED_CONTROLLER =
@@ -43,6 +55,9 @@ export const TEXTFIELD_CONTROLLER_PROVIDER: Provider = [
TUI_TEXTFIELD_ICON_LEFT,
TUI_TEXTFIELD_LABEL_OUTSIDE,
TUI_TEXTFIELD_SIZE,
+ TUI_TEXTFIELD_PREFIX,
+ TUI_TEXTFIELD_POSTFIX,
+ TUI_TEXTFIELD_FILLER,
],
useFactory: (
changeDetectorRef: ChangeDetectorRef,
@@ -55,6 +70,9 @@ export const TEXTFIELD_CONTROLLER_PROVIDER: Provider = [
TuiTextfieldIconLeftDirective,
TuiTextfieldLabelOutsideDirective,
TuiTextfieldSizeDirective,
+ TuiTextfieldPrefixDirective,
+ TuiTextfieldPostfixDirective,
+ TuiTextfieldFillerDirective,
]
) => {
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 000000000000..0eb622126cc4
--- /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-postfix.directive.ts b/projects/core/directives/textfield-controller/textfield-postfix.directive.ts
new file mode 100644
index 000000000000..34e2678e3f90
--- /dev/null
+++ b/projects/core/directives/textfield-controller/textfield-postfix.directive.ts
@@ -0,0 +1,23 @@
+import {Directive, forwardRef, InjectionToken, Input} from '@angular/core';
+import {AbstractTuiController} from '@taiga-ui/cdk';
+
+export const TUI_TEXTFIELD_POSTFIX = new InjectionToken(
+ `[TUI_TEXTFIELD_POSTFIX]: tuiTextfieldPostfix`,
+ {
+ factory: () => new TuiTextfieldPostfixDirective(),
+ },
+);
+
+@Directive({
+ selector: `[tuiTextfieldPostfix]`,
+ providers: [
+ {
+ provide: TUI_TEXTFIELD_POSTFIX,
+ useExisting: forwardRef(() => TuiTextfieldPostfixDirective),
+ },
+ ],
+})
+export class TuiTextfieldPostfixDirective extends AbstractTuiController {
+ @Input(`tuiTextfieldPostfix`)
+ postfix = ``;
+}
diff --git a/projects/core/directives/textfield-controller/textfield-prefix.directive.ts b/projects/core/directives/textfield-controller/textfield-prefix.directive.ts
new file mode 100644
index 000000000000..dcaa58d0d8a1
--- /dev/null
+++ b/projects/core/directives/textfield-controller/textfield-prefix.directive.ts
@@ -0,0 +1,23 @@
+import {Directive, forwardRef, InjectionToken, Input} from '@angular/core';
+import {AbstractTuiController} from '@taiga-ui/cdk';
+
+export const TUI_TEXTFIELD_PREFIX = new InjectionToken(
+ `[TUI_TEXTFIELD_PREFIX]: tuiTextfieldPrefix`,
+ {
+ factory: () => new TuiTextfieldPrefixDirective(),
+ },
+);
+
+@Directive({
+ selector: `[tuiTextfieldPrefix]`,
+ providers: [
+ {
+ provide: TUI_TEXTFIELD_PREFIX,
+ useExisting: forwardRef(() => TuiTextfieldPrefixDirective),
+ },
+ ],
+})
+export class TuiTextfieldPrefixDirective extends AbstractTuiController {
+ @Input(`tuiTextfieldPrefix`)
+ prefix = ``;
+}
diff --git a/projects/core/directives/textfield-controller/textfield.controller.ts b/projects/core/directives/textfield-controller/textfield.controller.ts
index 1703ac5083de..a053219be570 100644
--- a/projects/core/directives/textfield-controller/textfield.controller.ts
+++ b/projects/core/directives/textfield-controller/textfield.controller.ts
@@ -5,10 +5,13 @@ import {Observable} from 'rxjs';
import {TuiTextfieldCleanerDirective} from './textfield-cleaner.directive';
import {TuiTextfieldCustomContentDirective} from './textfield-custom-content.directive';
+import {TuiTextfieldFillerDirective} from './textfield-filler.directive';
import {TuiTextfieldIconDirective} from './textfield-icon.directive';
import {TuiTextfieldIconLeftDirective} from './textfield-icon-left.directive';
import {TuiTextfieldLabelOutsideDirective} from './textfield-label-outside.directive';
import {TuiTextfieldOptions} from './textfield-options';
+import {TuiTextfieldPostfixDirective} from './textfield-postfix.directive';
+import {TuiTextfieldPrefixDirective} from './textfield-prefix.directive';
import {TuiTextfieldSizeDirective} from './textfield-size.directive';
export class TuiTextfieldController {
@@ -21,6 +24,9 @@ export class TuiTextfieldController {
private readonly iconLeftDirective: TuiTextfieldIconLeftDirective,
private readonly labelOutsideDirective: TuiTextfieldLabelOutsideDirective,
private readonly sizeDirective: TuiTextfieldSizeDirective,
+ private readonly prefixDirective: TuiTextfieldPrefixDirective,
+ private readonly postfixDirective: TuiTextfieldPostfixDirective,
+ private readonly fillerDirective: TuiTextfieldFillerDirective,
) {}
get cleaner(): boolean {
@@ -46,4 +52,16 @@ export class TuiTextfieldController {
get size(): TuiSizeL | TuiSizeS {
return this.sizeDirective.size;
}
+
+ get prefix(): string {
+ return this.prefixDirective.prefix;
+ }
+
+ 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 c4ed77f812c3..fcae40e76d4e 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`];
@@ -139,6 +141,12 @@ export abstract class AbstractExampleTuiControl
dropdownMaxHeight = TUI_DROPDOWN_DEFAULT_OPTIONS.maxHeight;
+ readonly prefixVariants: readonly string[] = [``, `$`, `GBP`, `Very long text`];
+
+ prefix = this.prefixVariants[0];
+
+ postfix = this.prefixVariants[0];
+
get customContent(): PolymorpheusContent {
return this.customContentSelected === CUSTOM_SVG_NAME
? CUSTOM_SVG
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 2e79b6b51a19..ef60e04ac1a2 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
+
+ Pale text suggestion for input (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 cedeb0048b22..a48f60429f50 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.component.ts b/projects/demo/src/modules/components/input-count/input-count.component.ts
index f3557f1d8df2..38e02cfa254c 100644
--- a/projects/demo/src/modules/components/input-count/input-count.component.ts
+++ b/projects/demo/src/modules/components/input-count/input-count.component.ts
@@ -53,8 +53,4 @@ export class ExampleTuiInputCountComponent extends AbstractExampleTuiControl {
hideButtons = false;
control = new FormControl();
-
- prefix = ``;
-
- postfix = ``;
}
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 8180aa24f147..a44036b5e6e6 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"
>
@@ -133,18 +134,24 @@
documentationPropertyName="prefix"
documentationPropertyMode="input"
documentationPropertyType="string"
+ [documentationPropertyDeprecated]="true"
[(documentationPropertyValue)]="prefix"
>
- A prefix symbol, like currency
+ A prefix symbol, like currency. Use
+ tuiTextfieldPrefix
+ instead
- Some string after value
+ Some string after value. Use
+ tuiTextfieldPostfix
+ instead
Step for buttons
+
+ Uneditable text before value
+
+
+ Uneditable text after value
+
diff --git a/projects/demo/src/modules/components/input-number/input-number.component.ts b/projects/demo/src/modules/components/input-number/input-number.component.ts
index 079a133b25e5..0aeeaa5095a4 100644
--- a/projects/demo/src/modules/components/input-number/input-number.component.ts
+++ b/projects/demo/src/modules/components/input-number/input-number.component.ts
@@ -76,11 +76,5 @@ export class ExampleTuiInputNumberComponent extends AbstractExampleTuiControl {
precision = this.precisionVariants[0];
- readonly postfixVariants: readonly string[] = [``, `$`, `GBP`, `Very long text`];
-
- prefix = this.postfixVariants[0];
-
- postfix = this.postfixVariants[0];
-
readonly control = new FormControl(6432, Validators.required);
}
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 c6d27005b14a..961287f0669e 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
@@ -168,6 +168,11 @@ There are also other components to input numbers:
[tuiTextfieldCustomContent]="customContent"
[tuiTextfieldLabelOutside]="labelOutside"
[tuiTextfieldSize]="size"
+ [tuiTextfieldPrefix]="prefix"
+ [tuiTextfieldPostfix]="postfix"
+ [tuiTextfieldFiller]="filler"
+ [prefix]="prefix"
+ [postfix]="postfix"
[min]="min"
[max]="max"
[style.text-align]="textAlign"
@@ -178,8 +183,6 @@ There are also other components to input numbers:
[precision]="precision"
[readOnly]="readOnly"
[decimal]="decimal"
- [prefix]="prefix"
- [postfix]="postfix"
[tuiHintContent]="hintContent"
[tuiHintDirection]="hintDirection"
[tuiHintAppearance]="hintAppearance"
@@ -224,20 +227,26 @@ There are also other components to input numbers:
documentationPropertyName="prefix"
documentationPropertyMode="input"
documentationPropertyType="string"
- [documentationPropertyValues]="postfixVariants"
+ [documentationPropertyDeprecated]="true"
+ [documentationPropertyValues]="prefixVariants"
[(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
There are also other components to input numbers:
>
Show/hide decimal
+
+ Uneditable text before value
+
+
+ Uneditable text after value
+
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 877aa13fc635..641f2bcd861c 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.component.ts b/projects/demo/src/modules/components/input-slider/input-slider.component.ts
index ee2107e0d433..3ac8027c822b 100644
--- a/projects/demo/src/modules/components/input-slider/input-slider.component.ts
+++ b/projects/demo/src/modules/components/input-slider/input-slider.component.ts
@@ -76,9 +76,6 @@ export class ExampleTuiInputSliderComponent extends AbstractExampleTuiControl {
override size = this.sizeVariants[1];
- prefix = ``;
- postfix = ``;
-
readonly valueContentVariants = [
``,
`TOP SECRET`,
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 29cc3f5547ef..5878db2b3408 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
@@ -123,6 +123,8 @@
[pseudoFocus]="pseudoFocused"
[pseudoHover]="pseudoHovered"
[pseudoActive]="pseudoPressed"
+ [tuiTextfieldPrefix]="prefix"
+ [tuiTextfieldPostfix]="postfix"
[tuiTextfieldCleaner]="cleaner"
[tuiTextfieldCustomContent]="customContentSelected"
[tuiTextfieldIconLeft]="iconLeft"
@@ -229,18 +231,44 @@
documentationPropertyName="prefix"
documentationPropertyMode="input"
documentationPropertyType="string"
+ [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
+
+
+ Uneditable text before value
+
+
+ Uneditable text after value
diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
index 1cc3e52f5f6e..d9645d84ff31 100644
--- a/projects/demo/src/modules/components/input/input.template.html
+++ b/projects/demo/src/modules/components/input/input.template.html
@@ -233,12 +233,15 @@
[pseudoInvalid]="pseudoInvalid"
[pseudoFocus]="pseudoFocused"
[pseudoHover]="pseudoHovered"
+ [readOnly]="readOnly"
[tuiTextfieldIcon]="icon"
[tuiTextfieldIconLeft]="iconLeft"
- [readOnly]="readOnly"
[tuiTextfieldLabelOutside]="labelOutside"
[tuiTextfieldCustomContent]="customContent"
[tuiTextfieldSize]="size"
+ [tuiTextfieldPrefix]="prefix"
+ [tuiTextfieldPostfix]="postfix"
+ [tuiTextfieldFiller]="filler"
[tuiTextfieldCleaner]="cleaner"
[tuiDropdownAlign]="dropdownAlign"
[tuiDropdownDirection]="dropdownDirection"
@@ -306,6 +309,26 @@
<input tuiTextfield/>
to set it)
+
+ Uneditable text before value
+
+
+ Uneditable text after value
+
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
index 256b8f91717a..c9eac222ef34 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
@@ -59,6 +59,7 @@
[tuiTextfieldCustomContent]="customContent"
[tuiTextfieldLabelOutside]="labelOutside"
[tuiTextfieldSize]="size"
+ [tuiTextfieldFiller]="filler"
[pseudoActive]="pseudoPressed"
[pseudoFocus]="pseudoFocused"
[pseudoHover]="pseudoHovered"
@@ -68,8 +69,8 @@
[tuiTextfieldIcon]="iconContent"
[tuiTextfieldIconLeft]="iconLeft"
[readOnly]="readOnly"
- [prefix]="prefix"
- [postfix]="postfix"
+ [tuiTextfieldPrefix]="prefix"
+ [tuiTextfieldPostfix]="postfix"
[invalid]="invalid"
[tuiHintContent]="hintContent"
[tuiHintDirection]="hintDirection"
@@ -122,9 +123,12 @@
documentationPropertyName="filler"
documentationPropertyMode="input"
documentationPropertyType="string"
+ [documentationPropertyDeprecated]="true"
[(documentationPropertyValue)]="filler"
>
- Gray background text as a hint (e.g. HH:MM:SS for time)
+ Pale text suggestion for input (e.g. HH:MM:SS for time). Use
+ tuiTextfieldFiller
+ instead
Uneditable text before value. For example, currency symbol in
@@ -167,6 +172,7 @@
documentationPropertyName="postfix"
documentationPropertyMode="input"
documentationPropertyType="string"
+ [documentationPropertyDeprecated]="true"
[(documentationPropertyValue)]="postfix"
>
Uneditable text after value. For example, currency symbol in
@@ -178,6 +184,24 @@
.
+
+ Uneditable text before value
+
+
+ Uneditable text after value
+
> = ``;
- @Input()
+ /** @deprecated use `tuiTextfieldPrefix` from {@link TuiTextfieldControllerModule} instead */
+ @Input(`prefix`)
@tuiDefaultProp()
- prefix = ``;
+ textfieldPrefix = ``;
- @Input()
+ /** @deprecated use `tuiTextfieldPostfix` from {@link TuiTextfieldControllerModule} instead */
+ @Input(`postfix`)
@tuiDefaultProp()
- postfix = ``;
+ textfieldPostfix = ``;
constructor(
@Optional()
@@ -106,10 +112,20 @@ export class TuiInputSliderComponent
@Inject(NgControl)
control: NgControl | null,
@Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
+ @Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER)
+ readonly controller: TuiTextfieldController,
) {
super(control, changeDetectorRef);
}
+ get prefix(): string {
+ return this.textfieldPrefix || this.controller.prefix;
+ }
+
+ get postfix(): string {
+ return this.textfieldPostfix || this.controller.postfix;
+ }
+
get nativeFocusableElement(): TuiNativeFocusableElement | null {
return !this.inputNumberRef?.nativeFocusableElement || this.computedDisabled
? null
diff --git a/projects/kit/components/input-slider/input-slider.module.ts b/projects/kit/components/input-slider/input-slider.module.ts
index 4a969001dcb3..6fee92c520a0 100644
--- a/projects/kit/components/input-slider/input-slider.module.ts
+++ b/projects/kit/components/input-slider/input-slider.module.ts
@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {TuiFocusableModule} from '@taiga-ui/cdk';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
import {TuiInputNumberModule} from '@taiga-ui/kit/components/input-number';
import {TuiSliderModule} from '@taiga-ui/kit/components/slider';
import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -16,6 +17,7 @@ import {TuiInputSliderComponent} from './input-slider.component';
TuiFocusableModule,
TuiInputNumberModule,
TuiSliderModule,
+ TuiTextfieldControllerModule,
],
declarations: [TuiInputSliderComponent],
exports: [TuiInputSliderComponent],
diff --git a/projects/kit/components/input-slider/input-slider.template.html b/projects/kit/components/input-slider/input-slider.template.html
index 56846a406e1d..2125a250c5a3 100644
--- a/projects/kit/components/input-slider/input-slider.template.html
+++ b/projects/kit/components/input-slider/input-slider.template.html
@@ -3,8 +3,8 @@
[max]="max"
[precision]="precision"
[decimal]="decimal"
- [prefix]="showValueContent ? '' : prefix"
- [postfix]="showValueContent ? '' : postfix"
+ [tuiTextfieldPrefix]="showValueContent ? '' : prefix"
+ [tuiTextfieldPostfix]="showValueContent ? '' : postfix"
[readOnly]="readOnly"
[pseudoFocus]="computedFocused"
[pseudoHover]="pseudoHover"
diff --git a/projects/kit/components/input-time/input-time.component.ts b/projects/kit/components/input-time/input-time.component.ts
index 9f0a71a265b9..bb1a59da36d2 100644
--- a/projects/kit/components/input-time/input-time.component.ts
+++ b/projects/kit/components/input-time/input-time.component.ts
@@ -86,6 +86,7 @@ export class TuiInputTimeComponent
@tuiDefaultProp()
mode: TuiInputTimeOptions['mode'] = this.options.mode;
+ /** @deprecated use `tuiTextfieldPostfix` from {@link TuiTextfieldControllerModule} instead */
@Input()
@tuiDefaultProp()
postfix: TuiInputTimeOptions['postfix'] = this.options.postfix;
diff --git a/projects/kit/components/input-time/input-time.template.html b/projects/kit/components/input-time/input-time.template.html
index 27d5eefb83c4..9427d558d060 100644
--- a/projects/kit/components/input-time/input-time.template.html
+++ b/projects/kit/components/input-time/input-time.template.html
@@ -9,7 +9,7 @@