chore(demo): Textfield add API page

taiga-family · Oct 3, 2024 · a7fbdf5 · a7fbdf5
1 parent 285bb0f
commit a7fbdf5
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 20 deletions.
diff --git a/projects/demo/src/components/textfield/index.ts b/projects/demo/src/components/textfield/index.ts
@@ -4,14 +4,8 @@ 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';
+import type {TuiSizeL, TuiSizeS, TuiTextfieldOptions} from '@taiga-ui/core';
+import {TUI_TEXTFIELD_OPTIONS, TuiLink, TuiTitle} from '@taiga-ui/core';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/textfield/index.html b/projects/demo/src/modules/components/textfield/index.html
@@ -20,5 +20,69 @@
         />
     </ng-template>
 
-    <tui-setup *pageTab="'Setup'" />
+    <ng-template pageTab>
+        <tui-doc-demo>
+            <tui-textfield
+                [iconEnd]="icons.iconEnd"
+                [iconStart]="icons.iconStart"
+                [tuiTextfieldCleaner]="textfield.cleaner"
+                [tuiTextfieldSize]="textfield.size"
+            >
+                <label tuiLabel>I am a label</label>
+                <input
+                    placeholder="I am placeholder"
+                    tuiTextfield
+                    [disabled]="disabled"
+                    [invalid]="invalid"
+                    [readOnly]="readonly"
+                    [(ngModel)]="value"
+                />
+                <tui-icon tuiTooltip="I am a hint" />
+            </tui-textfield>
+        </tui-doc-demo>
+        <table tuiDocAPI>
+            <tr
+                name="[readonly]"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="readonly"
+            >
+                Readonly state
+            </tr>
+            <tr
+                name="[disabled]"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="disabled"
+            >
+                Disabled state
+            </tr>
+            <tr
+                name="[invalid]"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="invalid"
+            >
+                Invalid state
+            </tr>
+            <tr
+                name="[(ngModel)]"
+                tuiDocAPIItem
+                type="string"
+                [(value)]="value"
+            >
+                Value
+            </tr>
+            <tbody
+                #textfield
+                tuiDocTextfield
+            ></tbody>
+            <tbody
+                #icons
+                tuiDocIcons
+            ></tbody>
+        </table>
+    </ng-template>
+
+    <tui-setup *pageTab />
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/textfield/index.ts b/projects/demo/src/modules/components/textfield/index.ts
@@ -1,10 +1,23 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TuiDocIcons} from '@demo/components/icons';
+import {TuiDocTextfield} from '@demo/components/textfield';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
+import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
+import {TuiTooltip} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo],
+    imports: [
+        FormsModule,
+        TuiDemo,
+        TuiDocIcons,
+        TuiDocTextfield,
+        TuiIcon,
+        TuiTextfield,
+        TuiTooltip,
+    ],
     templateUrl: './index.html',
     changeDetection,
 })
@@ -16,4 +29,9 @@ export default class Page {
         'Interactive icons',
         'Mask',
     ];
+
+    protected value = '';
+    protected readonly = false;
+    protected disabled = false;
+    protected invalid = false;
 }
diff --git a/projects/demo/src/modules/directives/textfield-controller/index.html b/projects/demo/src/modules/directives/textfield-controller/index.html
@@ -47,19 +47,57 @@
             <ng-template>
                 <tui-input
                     [formControl]="control"
-                    [tuiTextfieldCleaner]="textfield.cleaner"
-                    [tuiTextfieldSize]="textfield.size"
+                    [tuiTextfieldCleaner]="cleaner"
+                    [tuiTextfieldCustomContent]="customContentSelected"
+                    [tuiTextfieldLabelOutside]="labelOutside"
+                    [tuiTextfieldSize]="size"
                 >
                     Hello
                 </tui-input>
             </ng-template>
         </tui-doc-demo>
-        <table tuiDocAPI>
-            <tbody
-                #textfield
-                tuiDocTextfield
-            ></tbody>
-        </table>
+        <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>
     </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,7 +12,6 @@ import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
     imports: [
         ReactiveFormsModule,
         TuiDemo,
-        TuiDocTextfield,
         TuiInputModule,
         TuiTextfield,
         TuiTextfieldControllerModule,
@@ -21,6 +20,33 @@ 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;
 }