feat(core): TextfieldController add prefix, postfix and filler (#3188)

taiga-family · Dec 15, 2022 · 75276fb · 75276fb
1 parent 336dcd8
commit 75276fb
Show file tree

Hide file tree

Showing 31 changed files with 338 additions and 46 deletions.
diff --git 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
@@ -17,14 +17,14 @@ describe(`PrimitiveTextfield`, () => {
             <tui-primitive-textfield id="test1"></tui-primitive-textfield>
             <tui-primitive-textfield
                 id="test2"
-                [filler]="'filler'"
-                [postfix]="'post'"
+                [tuiTextfieldFiller]="'filler'"
+                [tuiTextfieldPostfix]="'post'"
                 [value]="'value'"
                 [pseudoFocus]="true"
             ></tui-primitive-textfield>
             <tui-primitive-textfield
                 id="test3"
-                [postfix]="'post'"
+                [tuiTextfieldPostfix]="'post'"
                 [value]="'value'"
             ></tui-primitive-textfield>
             <tui-primitive-textfield id="test4"></tui-primitive-textfield>

diff --git 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
@@ -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
@@ -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
@@ -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<TuiTextfieldFillerDirective>(
+    `[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
@@ -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<TuiTextfieldPostfixDirective>(
+    `[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
@@ -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<TuiTextfieldPrefixDirective>(
+    `[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
@@ -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
@@ -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/...tract/textfield-controller-documentation/textfield-controller-documentation.template.html b/...tract/textfield-controller-documentation/textfield-controller-documentation.template.html
@@ -93,4 +93,13 @@
             <code>SvgService</code>
         </a>
     </ng-template>
+    <ng-template
+        i18n
+        documentationPropertyName="tuiTextfieldFiller"
+        documentationPropertyMode="input"
+        documentationPropertyType="string"
+        [(documentationPropertyValue)]="documentedComponent.filler"
+    >
+        Pale text suggestion for input (e.g. HH:MM:SS for time)
+    </ng-template>
 </tui-doc-documentation>
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
@@ -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
@@ -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
@@ -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
+                <code>tuiTextfieldPrefix</code>
+                instead
             </ng-template>
             <ng-template
                 i18n
                 documentationPropertyName="postfix"
                 documentationPropertyMode="input"
                 documentationPropertyType="string"
+                [documentationPropertyDeprecated]="true"
                 [(documentationPropertyValue)]="postfix"
             >
-                Some string after value
+                Some string after value. Use
+                <code>tuiTextfieldPostfix</code>
+                instead
             </ng-template>
             <ng-template
                 i18n
@@ -156,6 +163,26 @@
             >
                 Step for buttons
             </ng-template>
+            <ng-template
+                i18n
+                documentationPropertyName="tuiTextfieldPrefix"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [documentationPropertyValues]="prefixVariants"
+                [(documentationPropertyValue)]="prefix"
+            >
+                Uneditable text before value
+            </ng-template>
+            <ng-template
+                i18n
+                documentationPropertyName="tuiTextfieldPostfix"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [documentationPropertyValues]="prefixVariants"
+                [(documentationPropertyValue)]="postfix"
+            >
+                Uneditable text after value
+            </ng-template>
         </tui-doc-documentation>
         <inherited-documentation></inherited-documentation>
         <tui-doc-documentation heading="CSS customization">