chore(demo): Textfield add reuse component & migrate `TextfieldCont…

…roller` to new approach
taiga-family · Sep 27, 2024 · f0de26b · f0de26b
1 parent a73e99b
commit f0de26b
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 73 deletions.
diff --git a/projects/demo/src/components/textfield/index.html b/projects/demo/src/components/textfield/index.html
@@ -0,0 +1,57 @@
+<tr>
+    <td colspan="3">
+        <span tuiTitle>
+            <a
+                tuiLink
+                [routerLink]="routes.Textfield"
+            >
+                <strong>Textfield</strong>
+            </a>
+            <span tuiSubtitle>Applied as a host directive</span>
+        </span>
+    </td>
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('cleaner')"
+    name="[tuiTextfieldCleaner]"
+    tuiDocAPIItem
+    type="boolean"
+    [(value)]="cleaner"
+>
+    Shows a cross to reset a value
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('customContent')"
+    name="[tuiTextfieldCustomContent]"
+    tuiDocAPIItem
+    type="PolymorpheusContent"
+    [items]="customContentVariants"
+    [(value)]="customContent"
+>
+    Right content (e.g. avatar with maximum size 32x32px)
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('labelOutside')"
+    name="[tuiTextfieldLabelOutside]"
+    tuiDocAPIItem
+    type="boolean"
+    [(value)]="labelOutside"
+>
+    Label is outside a component and made with
+    <a
+        tuiLink
+        [routerLink]="routes.Label"
+    >
+        <code>Label</code>
+    </a>
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('size')"
+    name="[tuiTextfieldSize]"
+    tuiDocAPIItem
+    type="TuiSizeS | TuiSizeL"
+    [items]="sizeVariants"
+    [(value)]="size"
+>
+    Size
+</tr>
diff --git a/projects/demo/src/components/textfield/index.ts b/projects/demo/src/components/textfield/index.ts
@@ -0,0 +1,41 @@
+import {NgIf} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {DemoRoute} from '@demo/routes';
+import {TuiDocAPIItem} from '@taiga-ui/addon-doc';
+import type {TuiLooseUnion} from '@taiga-ui/cdk';
+import {
+    TUI_TEXTFIELD_OPTIONS,
+    TuiLink,
+    type TuiSizeL,
+    type TuiSizeS,
+    type TuiTextfieldOptions,
+    TuiTitle,
+} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    selector: 'tbody[tuiDocTextfield]',
+    imports: [NgIf, RouterLink, TuiDocAPIItem, TuiLink, TuiTitle],
+    templateUrl: './index.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiDocTextfield {
+    private readonly options = inject(TUI_TEXTFIELD_OPTIONS);
+
+    protected readonly routes = DemoRoute;
+
+    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
+    protected readonly customContentVariants = ['', '@tui.bell'];
+
+    @Input()
+    public tuiDocTextfield: readonly string[] | '' = '';
+
+    @Input()
+    public hiddenOptions: Array<TuiLooseUnion<keyof TuiTextfieldOptions>> = [];
+
+    public cleaner: boolean = this.options.cleaner();
+    public size: TuiSizeL | TuiSizeS = this.options.size();
+    public labelOutside = false;
+    public customContent = this.customContentVariants[0];
+}
diff --git a/projects/demo/src/modules/directives/textfield-controller/index.html b/projects/demo/src/modules/directives/textfield-controller/index.html
@@ -47,56 +47,21 @@
             <ng-template>
                 <tui-input
                     [formControl]="control"
-                    [tuiTextfieldCleaner]="cleaner"
-                    [tuiTextfieldLabelOutside]="labelOutside"
-                    [tuiTextfieldSize]="size"
+                    [tuiTextfieldCleaner]="textfield.cleaner"
+                    [tuiTextfieldCustomContent]="textfield.customContent"
+                    [tuiTextfieldLabelOutside]="textfield.labelOutside"
+                    [tuiTextfieldSize]="textfield.size"
                 >
                     Hello
                 </tui-input>
             </ng-template>
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiTextfieldCleaner"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="cleaner"
-            >
-                Shows a cross to reset a value
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiTextfieldCustomContent"
-                documentationPropertyType="PolymorpheusContent"
-                [documentationPropertyValues]="customContentVariants"
-                [(documentationPropertyValue)]="customContentSelected"
-            >
-                Right content (e.g. avatar with maximum size 32x32px)
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiTextfieldLabelOutside"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="labelOutside"
-            >
-                Label is outside a component and made with
-                <a
-                    tuiLink
-                    [routerLink]="routes.Label"
-                >
-                    <code>Label</code>
-                </a>
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiTextfieldSize"
-                documentationPropertyType="TuiSizeS | TuiSizeL"
-                [documentationPropertyValues]="sizeVariants"
-                [(documentationPropertyValue)]="size"
-            >
-                Size
-            </ng-template>
-        </tui-doc-documentation>
+        <table tuiDocAPI>
+            <tbody
+                #textfield
+                tuiDocTextfield
+            ></tbody>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />

diff --git a/projects/demo/src/modules/directives/textfield-controller/index.ts b/projects/demo/src/modules/directives/textfield-controller/index.ts
@@ -1,9 +1,9 @@
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TuiDocTextfield} from '@demo/components/textfield';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {TuiTextfield} from '@taiga-ui/core';
 import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
@@ -12,6 +12,7 @@ import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
     imports: [
         ReactiveFormsModule,
         TuiDemo,
+        TuiDocTextfield,
         TuiInputModule,
         TuiTextfield,
         TuiTextfieldControllerModule,
@@ -20,33 +21,6 @@ import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
     changeDetection,
 })
 export default class Page {
-    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
-
-    protected readonly inputModeVariants: readonly string[] = ['text', 'numeric'];
-
-    protected readonly maxLengthVariants: readonly number[] = [10];
-
-    protected readonly typeVariants: readonly string[] = [
-        'text',
-        'email',
-        'password',
-        'tel',
-        'url',
-    ];
-
-    protected type = this.typeVariants[0]!;
-
-    protected readonly customContentVariants = ['', 'Bell'];
-
-    protected customContentSelected = this.customContentVariants[0]!;
-
-    protected cleaner = false;
-    protected exampleText = '';
-    protected labelOutside = false;
-    protected size = this.sizeVariants[2]!;
-    protected inputMode = this.inputModeVariants[0]!;
-    protected maxLength: number | null = null;
-
     protected readonly control = new FormControl('111', Validators.required);
     protected readonly routes = DemoRoute;
 }