chore: fix doc, add tuiTextfieldFiller

taiga-family · Dec 12, 2022 · 94a0fd6 · 94a0fd6
1 parent b80d9c5
commit 94a0fd6
Show file tree

Hide file tree

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

diff --git a/projects/core/directives/textfield-controller/index.ts b/projects/core/directives/textfield-controller/index.ts
@@ -3,6 +3,7 @@ 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';

diff --git a/projects/core/directives/textfield-controller/textfield-controller.module.ts b/projects/core/directives/textfield-controller/textfield-controller.module.ts
@@ -2,6 +2,7 @@ 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';
@@ -19,6 +20,7 @@ import {TuiTextfieldSizeDirective} from './textfield-size.directive';
         TuiTextfieldIconLeftDirective,
         TuiTextfieldPrefixDirective,
         TuiTextfieldPostfixDirective,
+        TuiTextfieldFillerDirective,
     ],
     exports: [
         TuiTextfieldCleanerDirective,
@@ -29,6 +31,7 @@ import {TuiTextfieldSizeDirective} from './textfield-size.directive';
         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
@@ -1,5 +1,9 @@
 import {ChangeDetectorRef, InjectionToken, Provider} from '@angular/core';
 import {TuiDestroyService, tuiWatch} from '@taiga-ui/cdk';
+import {
+    TUI_TEXTFIELD_FILLER,
+    TuiTextfieldFillerDirective,
+} from '@taiga-ui/core/directives/textfield-controller/textfield-filler.directive';
 import {merge, NEVER, Observable} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -51,6 +55,7 @@ export const TEXTFIELD_CONTROLLER_PROVIDER: Provider = [
             TUI_TEXTFIELD_SIZE,
             TUI_TEXTFIELD_PREFIX,
             TUI_TEXTFIELD_POSTFIX,
+            TUI_TEXTFIELD_FILLER,
         ],
         useFactory: (
             changeDetectorRef: ChangeDetectorRef,
@@ -64,6 +69,7 @@ export const TEXTFIELD_CONTROLLER_PROVIDER: Provider = [
                 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.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
@@ -103,6 +103,8 @@ export abstract class AbstractExampleTuiControl
 
     exampleText = ``;
 
+    filler = ``;
+
     maxHeight: number | null = null;
 
     readonly iconLeftVariants = [``, `tuiIconMailLarge`, `tuiIconPiechartLarge`];

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"
+    >
+        Gray background text as a hint (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.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
                 <code>tuiTextfieldPrefix</code>
                 instead
             </ng-template>

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
@@ -170,6 +170,7 @@ <h3>There are also other components to input numbers:</h3>
                     [tuiTextfieldSize]="size"
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldPostfix]="postfix"
+                    [tuiTextfieldFiller]="filler"
                     [prefix]="prefix"
                     [postfix]="postfix"
                     [min]="min"
@@ -230,7 +231,7 @@ <h3>There are also other components to input numbers:</h3>
                 [documentationPropertyValues]="prefixVariants"
                 [(documentationPropertyValue)]="prefix"
             >
-                A prefix symbol, like currency Use
+                A prefix symbol, like currency. Use
                 <code>tuiTextfieldPrefix</code>
                 instead
             </ng-template>
@@ -243,7 +244,7 @@ <h3>There are also other components to input numbers:</h3>
                 [documentationPropertyValues]="prefixVariants"
                 [(documentationPropertyValue)]="postfix"
             >
-                A postfix symbol, like currency Use
+                A postfix symbol, like currency. Use
                 <code>tuiTextfieldPostfix</code>
                 instead
             </ng-template>

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
@@ -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
@@ -234,7 +234,9 @@
                 [documentationPropertyDeprecated]="true"
                 [(documentationPropertyValue)]="prefix"
             >
-                A prefix symbol, like currency
+                A prefix symbol, like currency. Use
+                <code>tuiTextfieldPrefix</code>
+                instead
             </ng-template>
             <ng-template
                 i18n
@@ -244,7 +246,9 @@
                 [documentationPropertyDeprecated]="true"
                 [(documentationPropertyValue)]="postfix"
             >
-                A postfix symbol, like currency
+                A postfix symbol, like currency. Use
+                <code>tuiTextfieldPostfix</code>
+                instead
             </ng-template>
             <ng-template
                 i18n

diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
@@ -241,6 +241,7 @@
                     [tuiTextfieldSize]="size"
                     [tuiTextfieldPrefix]="prefix"
                     [tuiTextfieldPostfix]="postfix"
+                    [tuiTextfieldFiller]="filler"
                     [tuiTextfieldCleaner]="cleaner"
                     [tuiDropdownAlign]="dropdownAlign"
                     [tuiDropdownDirection]="dropdownDirection"

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
@@ -59,6 +59,7 @@
                 [tuiTextfieldCustomContent]="customContent"
                 [tuiTextfieldLabelOutside]="labelOutside"
                 [tuiTextfieldSize]="size"
+                [tuiTextfieldFiller]="filler"
                 [pseudoActive]="pseudoPressed"
                 [pseudoFocus]="pseudoFocused"
                 [pseudoHover]="pseudoHovered"
@@ -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)
+                Gray background text as a hint (e.g. HH:MM:SS for time). Use
+                <code>tuiTextfieldFiller</code>
+                instead
             </ng-template>
             <ng-template
                 i18n

diff --git a/projects/kit/components/input-date-range/input-date-range.template.html b/projects/kit/components/input-date-range/input-date-range.template.html
@@ -12,12 +12,12 @@
         tuiValueAccessor
         class="t-textfield"
         [tuiTextfieldIcon]="calendarIcon && iconContent"
+        [tuiTextfieldFiller]="getComputedRangeFiller(dateFiller || '')"
         [pseudoFocus]="innerPseudoFocused"
         [pseudoHover]="pseudoHover"
         [pseudoActive]="pseudoActive"
         [invalid]="computedInvalid"
         [nativeId]="nativeId"
-        [filler]="getComputedRangeFiller(dateFiller || '')"
         [readOnly]="readOnly"
         [disabled]="computedDisabled"
         [textMask]="computedMask"

diff --git a/projects/kit/components/input-date-time/input-date-time.template.html b/projects/kit/components/input-date-time/input-date-time.template.html
@@ -10,10 +10,10 @@
         tuiValueAccessor
         class="t-textfield"
         [tuiTextfieldIcon]="calendarIcon && iconContent"
+        [tuiTextfieldFiller]="(filler$ | async) || ''"
         [pseudoFocus]="pseudoFocus"
         [pseudoHover]="pseudoHover"
         [invalid]="computedInvalid"
-        [filler]="(filler$ | async) || ''"
         [nativeId]="nativeId"
         [readOnly]="readOnly"
         [disabled]="computedDisabled"

diff --git a/projects/kit/components/input-date/input-date.template.html b/projects/kit/components/input-date/input-date.template.html
@@ -11,10 +11,10 @@
         tuiValueAccessor
         class="t-textfield"
         [tuiTextfieldIcon]="calendarIcon && iconContent"
+        [tuiTextfieldFiller]="getComputedFiller(filler || '')"
         [pseudoFocus]="pseudoFocus"
         [pseudoHover]="pseudoHover"
         [invalid]="computedInvalid"
-        [filler]="getComputedFiller(filler || '')"
         [nativeId]="nativeId"
         [readOnly]="readOnly"
         [focusable]="computedFocusable"

diff --git a/projects/kit/components/input-slider/input-slider.component.ts b/projects/kit/components/input-slider/input-slider.component.ts
@@ -104,7 +104,7 @@ export class TuiInputSliderComponent
     /** @deprecated use `tuiTextfieldPostfix` from {@link TuiTextfieldControllerModule} instead */
     @Input(`postfix`)
     @tuiDefaultProp()
-    texfieldPostfix = ``;
+    textfieldPostfix = ``;
 
     constructor(
         @Optional()
@@ -123,7 +123,7 @@ export class TuiInputSliderComponent
     }
 
     get postfix(): string {
-        return this.texfieldPostfix || this.controller.postfix;
+        return this.textfieldPostfix || this.controller.postfix;
     }
 
     get nativeFocusableElement(): TuiNativeFocusableElement | null {

diff --git a/projects/kit/components/input-time/input-time.template.html b/projects/kit/components/input-time/input-time.template.html
@@ -9,7 +9,7 @@
     <tui-primitive-textfield
         tuiValueAccessor
         class="t-textfield"
-        [filler]="(getFiller$(mode) | async) || ''"
+        [tuiTextfieldFiller]="(getFiller$(mode) | async) || ''"
         [nativeId]="nativeId"
         [pseudoFocus]="innerPseudoFocused"
         [pseudoHover]="pseudoHover"