chore(demo): Control add reuse component

taiga-family · Oct 4, 2024 · 3f2455b · 3f2455b
1 parent 172ae44
commit 3f2455b
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 35 deletions.
diff --git a/projects/demo/src/components/control/index.html b/projects/demo/src/components/control/index.html
@@ -0,0 +1,36 @@
+<tr>
+    <td colspan="3">
+        <span tuiTitle>
+            <strong>ControlOptions</strong>
+            <span tuiSubtitle>Applied as a host directive</span>
+        </span>
+    </td>
+</tr>
+
+<tr
+    *ngIf="!hiddenOptions.includes('readonly')"
+    name="[readonly]"
+    tuiDocAPIItem
+    type="boolean"
+    [(value)]="readonly"
+>
+    Readonly state
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('disabled')"
+    name="[disabled]"
+    tuiDocAPIItem
+    type="boolean"
+    [(value)]="disabled"
+>
+    Disabled state
+</tr>
+<tr
+    *ngIf="!hiddenOptions.includes('invalid')"
+    name="[invalid]"
+    tuiDocAPIItem
+    type="boolean"
+    [(value)]="invalid"
+>
+    Invalid state
+</tr>
diff --git a/projects/demo/src/components/control/index.ts b/projects/demo/src/components/control/index.ts
@@ -0,0 +1,25 @@
+import {NgIf} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import type {AbstractControl} from '@angular/forms';
+import {DemoRoute} from '@demo/routes';
+import {TuiDocAPIItem} from '@taiga-ui/addon-doc';
+import type {TuiLooseUnion} from '@taiga-ui/cdk';
+import {TuiTitle} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    selector: 'tbody[tuiDocControl]',
+    imports: [NgIf, TuiDocAPIItem, TuiTitle],
+    templateUrl: './index.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiDocControl {
+    protected readonly routes = DemoRoute;
+
+    @Input()
+    public hiddenOptions: Array<TuiLooseUnion<keyof AbstractControl>> = [];
+
+    public readonly = false;
+    public disabled = false;
+    public invalid = false;
+}
diff --git a/projects/demo/src/components/textfield/index.html b/projects/demo/src/components/textfield/index.html
@@ -1,12 +1,7 @@
 <tr>
     <td colspan="3">
         <span tuiTitle>
-            <a
-                tuiLink
-                [routerLink]="routes.Textfield"
-            >
-                <strong>Textfield</strong>
-            </a>
+            <strong>TextfieldOptions</strong>
             <span tuiSubtitle>Applied as a host directive</span>
         </span>
     </td>

diff --git a/projects/demo/src/components/textfield/index.ts b/projects/demo/src/components/textfield/index.ts
@@ -1,16 +1,15 @@
 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 type {TuiSizeL, TuiSizeS, TuiTextfieldOptions} from '@taiga-ui/core';
-import {TUI_TEXTFIELD_OPTIONS, TuiLink, TuiTitle} from '@taiga-ui/core';
+import {TUI_TEXTFIELD_OPTIONS, TuiTitle} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
     selector: 'tbody[tuiDocTextfield]',
-    imports: [NgIf, RouterLink, TuiDocAPIItem, TuiLink, TuiTitle],
+    imports: [NgIf, TuiDocAPIItem, TuiTitle],
     templateUrl: './index.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/projects/demo/src/modules/components/textfield/index.html b/projects/demo/src/modules/components/textfield/index.html
@@ -23,6 +23,7 @@
     <ng-template pageTab>
         <tui-doc-demo>
             <tui-textfield
+                [filler]="filler"
                 [iconEnd]="icons.iconEnd"
                 [iconStart]="icons.iconStart"
                 [tuiTextfieldCleaner]="textfield.cleaner"
@@ -32,47 +33,35 @@
                 <input
                     placeholder="I am placeholder"
                     tuiTextfield
-                    [disabled]="disabled"
-                    [invalid]="invalid"
-                    [readOnly]="readonly"
+                    [disabled]="control.disabled"
+                    [invalid]="control.invalid"
+                    [readOnly]="control.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]"
+                name="[(ngModel)]"
                 tuiDocAPIItem
-                type="boolean"
-                [(value)]="invalid"
+                type="string"
+                [(value)]="value"
             >
-                Invalid state
+                Value
             </tr>
             <tr
-                name="[(ngModel)]"
+                name="[filler]"
                 tuiDocAPIItem
                 type="string"
-                [(value)]="value"
+                [(value)]="filler"
             >
-                Value
+                Filler
             </tr>
+            <tbody
+                #control
+                tuiDocControl
+            ></tbody>
             <tbody
                 #textfield
                 tuiDocTextfield

diff --git a/projects/demo/src/modules/components/textfield/index.ts b/projects/demo/src/modules/components/textfield/index.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {TuiDocControl} from '@demo/components/control';
 import {TuiDocIcons} from '@demo/components/icons';
 import {TuiDocTextfield} from '@demo/components/textfield';
 import {changeDetection} from '@demo/emulate/change-detection';
@@ -12,6 +13,7 @@ import {TuiTooltip} from '@taiga-ui/kit';
     imports: [
         FormsModule,
         TuiDemo,
+        TuiDocControl,
         TuiDocIcons,
         TuiDocTextfield,
         TuiIcon,
@@ -31,6 +33,8 @@ export default class Page {
     ];
 
     protected value = '';
+    protected filler = '';
+
     protected readonly = false;
     protected disabled = false;
     protected invalid = false;