feat(core): default options configuration for PrimitiveTextfield (#…

…1249)

projects/core/components/primitive-textfield/index.ts

@@ -1,4 +1,5 @@
 export * from './primitive-textfield.component';
 export * from './primitive-textfield.module';
 export * from './primitive-textfield.providers';
+export * from './primitive-textfield-options';
 export * from './value-decoration/value-decoration.component';

projects/core/components/primitive-textfield/primitive-textfield-options.ts

@@ -0,0 +1,25 @@
+import {InjectionToken} from '@angular/core';
+import {TuiHorizontalDirection} from '@taiga-ui/core/types';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+export interface TuiPrimitiveTextfieldOptions {
+    readonly iconAlign: TuiHorizontalDirection;
+    readonly iconCleaner: PolymorpheusContent;
+}
+
+// TODO: remove in ivy compilation
+export const TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER = 'tuiIconCloseLarge';
+
+/** Default values for primitive textfield options */
+export const TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS: TuiPrimitiveTextfieldOptions = {
+    iconAlign: 'right',
+    iconCleaner: TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER,
+};
+
+export const TUI_PRIMITIVE_TEXTFIELD_OPTIONS =
+    new InjectionToken<TuiPrimitiveTextfieldOptions>(
+        'Default parameters for primitive textfield component',
+        {
+            factory: () => TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS,
+        },
+    );

projects/core/components/primitive-textfield/primitive-textfield.component.ts

@@ -29,18 +29,17 @@ import {
     TuiTextfieldController,
 } from '@taiga-ui/core/directives/textfield-controller';
 import {TUI_MODE, TUI_TEXTFIELD_APPEARANCE} from '@taiga-ui/core/tokens';
-import {
-    TuiBrightness,
-    TuiHorizontalDirection,
-    TuiSizeL,
-    TuiSizeS,
-} from '@taiga-ui/core/types';
+import {TuiBrightness, TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import {getBorder} from '@taiga-ui/core/utils/miscellaneous';
 import {PolymorpheusContent, PolymorpheusOutletComponent} from '@tinkoff/ng-polymorpheus';
 import {fromEvent, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
 import {TUI_PRIMITIVE_TEXTFIELD_PROVIDERS} from './primitive-textfield.providers';
+import {
+    TUI_PRIMITIVE_TEXTFIELD_OPTIONS,
+    TuiPrimitiveTextfieldOptions,
+} from './primitive-textfield-options';
 
 const ICON_PADDING = 1.75;
 const ICON_PADDING_S = 1.5;
@@ -74,13 +73,17 @@ export class TuiPrimitiveTextfieldComponent
 
     @Input()
     @tuiDefaultProp()
-    iconAlign: TuiHorizontalDirection = 'right';
+    iconAlign: TuiPrimitiveTextfieldOptions['iconAlign'] = this.options.iconAlign;
 
     // TODO: Remove null in 3.0
     @Input()
     @tuiDefaultProp()
     iconContent: PolymorpheusContent | null = null;
 
+    @Input()
+    @tuiDefaultProp()
+    iconCleaner: TuiPrimitiveTextfieldOptions['iconCleaner'] = this.options.iconCleaner;
+
     @Input()
     @HostBinding('class._readonly')
     @tuiDefaultProp()
@@ -122,6 +125,8 @@ export class TuiPrimitiveTextfieldComponent
         readonly controller: TuiTextfieldController,
         @Inject(TUI_HINT_WATCHED_CONTROLLER)
         readonly hintController: TuiHintControllerDirective,
+        @Inject(TUI_PRIMITIVE_TEXTFIELD_OPTIONS)
+        readonly options: TuiPrimitiveTextfieldOptions,
     ) {
         super();
     }

projects/core/components/primitive-textfield/primitive-textfield.template.html

@@ -87,13 +87,18 @@
                 <tui-svg class="custom-icon" [src]="iconSrc"></tui-svg>
             </ng-template>
         </div>
-        <tui-svg
+        <span
             *ngIf="hasCleaner"
+            polymorpheus-outlet
             automation-id="tui-primitive-textfield__cleaner"
-            src="tuiIconCloseLarge"
             class="cleaner"
+            [content]="iconCleaner"
             (click.stop)="clear()"
-        ></tui-svg>
+        >
+            <ng-template let-icon>
+                <tui-svg [src]="icon"></tui-svg>
+            </ng-template>
+        </span>
         <tui-tooltip
             *ngIf="hasTooltip"
             automation-id="tui-primitive-textfield__tooltip"

projects/demo/src/modules/components/primitive-textfield/examples/2/index.html

@@ -0,0 +1,39 @@
+<div class="b-form">
+    <label tuiLabel i18n-label label="Modified cleaner icon">
+        <tui-primitive-textfield
+            tuiTextfieldSize="m"
+            tuiTextfieldType="email"
+            [tuiTextfieldLabelOutside]="true"
+            [tuiTextfieldCleaner]="true"
+            [value]="value"
+            (valueChange)="onValueChange($event)"
+            (focusedChange)="onFocused($event)"
+        >
+            Type an email
+        </tui-primitive-textfield>
+    </label>
+
+    <label
+        tuiLabel
+        i18n-label
+        label="Override modified cleaner icon"
+        class="tui-space_top-4"
+    >
+        <tui-primitive-textfield
+            tuiTextfieldSize="m"
+            tuiTextfieldType="email"
+            [tuiTextfieldLabelOutside]="true"
+            [tuiTextfieldCleaner]="true"
+            [value]="value"
+            [iconCleaner]="iconCleaner"
+            (valueChange)="onValueChange($event)"
+            (focusedChange)="onFocused($event)"
+        >
+            Type an email
+        </tui-primitive-textfield>
+    </label>
+</div>
+
+<ng-template #iconCleaner>
+    <tui-svg src="tuiIconDraft"></tui-svg>
+</ng-template>

projects/demo/src/modules/components/primitive-textfield/examples/2/index.ts

@@ -0,0 +1,69 @@
+import {
+    ChangeDetectorRef,
+    Component,
+    Inject,
+    Optional,
+    Self,
+    ViewChild,
+} from '@angular/core';
+import {NgControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {AbstractTuiControl, TuiNativeFocusableElement} from '@taiga-ui/cdk';
+import {
+    TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS,
+    TUI_PRIMITIVE_TEXTFIELD_OPTIONS,
+    TuiPrimitiveTextfieldComponent,
+} from '@taiga-ui/core';
+
+@Component({
+    selector: 'tui-primitive-textfield-example-2',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+    providers: [
+        {
+            provide: TUI_PRIMITIVE_TEXTFIELD_OPTIONS, // <-- You are looking for this token
+            useValue: {
+                ...TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS,
+                iconCleaner: 'tuiIconChevronUp',
+            },
+        },
+    ],
+})
+export class TuiPrimitiveTextfieldExample2 extends AbstractTuiControl<string> {
+    @ViewChild(TuiPrimitiveTextfieldComponent)
+    private readonly textfield?: TuiPrimitiveTextfieldComponent;
+
+    constructor(
+        @Optional()
+        @Self()
+        @Inject(NgControl)
+        control: NgControl | null,
+        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
+    ) {
+        super(control, changeDetectorRef);
+    }
+
+    get nativeFocusableElement(): TuiNativeFocusableElement | null {
+        return this.computedDisabled || !this.textfield
+            ? null
+            : this.textfield.nativeFocusableElement;
+    }
+
+    get focused(): boolean {
+        return !!this.textfield && this.textfield.focused;
+    }
+
+    onValueChange(textValue: string) {
+        this.updateValue(textValue);
+    }
+
+    onFocused(focused: boolean) {
+        this.updateFocused(focused);
+    }
+
+    protected getFallbackValue(): string {
+        return '';
+    }
+}

projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts

@@ -1,5 +1,6 @@
 import {Component, forwardRef, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiAutofillFieldName, TuiInputModeT, TuiInputTypeT} from '@taiga-ui/cdk';
 import {
     TuiDirection,
@@ -10,13 +11,6 @@ import {
 } from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Ts} from '!!raw-loader!./examples/1/component.ts';
-import {default as example1Less} from '!!raw-loader!./examples/1/style.less';
-import {default as example1Html} from '!!raw-loader!./examples/1/template.html';
-import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 import {AbstractExampleTuiInteractive} from '../abstract/interactive';
 
@@ -45,14 +39,24 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt
     @ViewChild('interactiveContent')
     private readonly interactiveIcon: PolymorpheusContent = '';
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/component.ts'),
+        HTML: import('!!raw-loader!./examples/1/template.html'),
+        LESS: import('!!raw-loader!./examples/1/style.less'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly exampleImportModule = exampleImportModule;
-    readonly exampleInsertTemplate = exampleInsertTemplate;
+    readonly exampleImportModule = import(
+        '!!raw-loader!./examples/import/import-module.txt'
+    );
+
+    readonly exampleInsertTemplate = import(
+        '!!raw-loader!./examples/import/insert-template.txt'
+    );
 
     readonly themes = ['Taiga UI', 'Bootstrap', 'Material'];
     theme = this.themes[0];
@@ -118,6 +122,8 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt
 
     password = '';
 
+    example2Value = '[email protected]';
+
     value = '';
 
     exampleText = '';

projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts

@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {
@@ -22,12 +22,14 @@ import {HintControllerDocumentationModule} from '../abstract/hint-controller-doc
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TextfieldControllerDocumentationModule} from '../abstract/textfield-controller-documentation/textfield-controller-documentation.module';
 import {TuiPrimitiveTextfieldExample1} from './examples/1/component';
+import {TuiPrimitiveTextfieldExample2} from './examples/2';
 import {ExampleTuiPrimitiveTextfieldComponent} from './primitive-textfield.component';
 
 @NgModule({
     imports: [
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         InheritedDocumentationModule,
         HintControllerDocumentationModule,
         TextfieldControllerDocumentationModule,
@@ -47,7 +49,11 @@ import {ExampleTuiPrimitiveTextfieldComponent} from './primitive-textfield.compo
         TuiAddonDocModule,
         RouterModule.forChild(generateRoutes(ExampleTuiPrimitiveTextfieldComponent)),
     ],
-    declarations: [ExampleTuiPrimitiveTextfieldComponent, TuiPrimitiveTextfieldExample1],
+    declarations: [
+        ExampleTuiPrimitiveTextfieldComponent,
+        TuiPrimitiveTextfieldExample1,
+        TuiPrimitiveTextfieldExample2,
+    ],
     exports: [ExampleTuiPrimitiveTextfieldComponent],
 })
 export class ExampleTuiPrimitiveTextfieldModule {}

projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html

@@ -26,6 +26,17 @@
                 Type a password
             </tui-primitive-textfield-example-1>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="options"
+            i18n-heading
+            heading="Options"
+            [content]="example2"
+        >
+            <tui-primitive-textfield-example-2
+                [(ngModel)]="example2Value"
+            ></tui-primitive-textfield-example-2>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>