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