From 75276fb79ec5380bdd3428ff4c3861bd538cf439 Mon Sep 17 00:00:00 2001 From: Vladimir Potekhin <46284632+vladimirpotekhin@users.noreply.github.com> Date: Thu, 15 Dec 2022 13:39:51 +0300 Subject: [PATCH] feat(core): `TextfieldController` add prefix, postfix and filler (#3188) --- .../primitive-textfield.component.ts | 27 +++++++++--- .../primitive-textfield.component.spec.ts | 6 +-- .../directives/textfield-controller/index.ts | 3 ++ .../textfield-controller.module.ts | 9 ++++ .../textfield-controller.provider.ts | 18 ++++++++ .../textfield-filler.directive.ts | 23 +++++++++++ .../textfield-postfix.directive.ts | 23 +++++++++++ .../textfield-prefix.directive.ts | 23 +++++++++++ .../textfield.controller.ts | 18 ++++++++ .../modules/components/abstract/control.ts | 8 ++++ ...eld-controller-documentation.template.html | 9 ++++ .../combo-box/combo-box.template.html | 1 + .../input-count/input-count.component.ts | 4 -- .../input-count/input-count.template.html | 31 +++++++++++++- .../input-number/input-number.component.ts | 6 --- .../input-number/input-number.template.html | 41 ++++++++++++++++--- .../input-phone/input-phone.template.html | 1 + .../input-slider/input-slider.component.ts | 3 -- .../input-slider/input-slider.template.html | 32 ++++++++++++++- .../components/input/input.template.html | 25 ++++++++++- .../primitive-textfield.template.html | 30 ++++++++++++-- .../input-count/input-count.component.ts | 2 + .../input-date-range.template.html | 2 +- .../input-date-time.template.html | 2 +- .../input-date/input-date.template.html | 2 +- .../input-number/input-number.component.ts | 2 + .../input-slider/input-slider.component.ts | 24 +++++++++-- .../input-slider/input-slider.module.ts | 2 + .../input-slider/input-slider.template.html | 4 +- .../input-time/input-time.component.ts | 1 + .../input-time/input-time.template.html | 2 +- 31 files changed, 338 insertions(+), 46 deletions(-) create mode 100644 projects/core/directives/textfield-controller/textfield-filler.directive.ts create mode 100644 projects/core/directives/textfield-controller/textfield-postfix.directive.ts create mode 100644 projects/core/directives/textfield-controller/textfield-prefix.directive.ts 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 @@