chore(demo): InputCard add API page (#9420)

taiga-family · Oct 11, 2024 · dcb0952 · dcb0952
1 parent e064549
commit dcb0952
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 4 deletions.
diff --git a/projects/addon-doc/components/api/api-item.component.ts b/projects/addon-doc/components/api/api-item.component.ts
@@ -12,8 +12,9 @@ import {FormsModule} from '@angular/forms';
 import type {Params} from '@angular/router';
 import {ActivatedRoute, UrlSerializer} from '@angular/router';
 import {TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
-import {tuiCoerceValue} from '@taiga-ui/addon-doc/utils';
+import {tuiCoerceValue, tuiInspectAny} from '@taiga-ui/addon-doc/utils';
 import {tuiIsNumber} from '@taiga-ui/cdk/utils/miscellaneous';
+import {TuiAlertService} from '@taiga-ui/core/components/alert';
 import {TuiIcon} from '@taiga-ui/core/components/icon';
 import {TuiTextfield} from '@taiga-ui/core/components/textfield';
 import {TuiDataListWrapper} from '@taiga-ui/kit/components/data-list-wrapper';
@@ -55,6 +56,7 @@ export class TuiDocAPIItem<T> implements OnInit {
     private readonly activatedRoute = inject(ActivatedRoute);
     private readonly urlSerializer = inject(UrlSerializer);
     private readonly urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
+    private readonly alerts = inject(TuiAlertService);
 
     @Input()
     public name = '';
@@ -81,6 +83,12 @@ export class TuiDocAPIItem<T> implements OnInit {
         this.setQueryParam(value);
     }
 
+    public emitEvent(event: unknown): void {
+        this.alerts
+            .open(event ?? tuiInspectAny(event, 2), {label: this.name})
+            .subscribe();
+    }
+
     private clearBrackets(value: string): string {
         return value.replaceAll(/[()[\]]/g, '');
     }

diff --git a/projects/demo/src/modules/components/input-card/index.html b/projects/demo/src/modules/components/input-card/index.html
@@ -43,5 +43,76 @@
         </tui-doc-example>
     </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>Card number</label>
+                <input
+                    tuiInputCard
+                    tuiTextfield
+                    [autocomplete]="autocomplete"
+                    [disabled]="control.disabled"
+                    [icon]="icon"
+                    [invalid]="control.invalid"
+                    [readOnly]="control.readonly"
+                    [(ngModel)]="card"
+                    (binChange)="binChange.emitEvent($event)"
+                />
+            </tui-textfield>
+        </tui-doc-demo>
+        <table tuiDocAPI>
+            <tr
+                name="[(ngModel)]"
+                tuiDocAPIItem
+                type="string"
+                [(value)]="card"
+            >
+                Card number (also works with a reactive control)
+            </tr>
+            <tr
+                name="[autocomplete]"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="autocomplete"
+            >
+                Browser autocomplete of card
+            </tr>
+            <tr
+                name="[icon]"
+                tuiDocAPIItem
+                type="string | null"
+                [items]="iconVariants"
+                [(value)]="iconSelected"
+            >
+                Card icon
+            </tr>
+            <tr
+                #binChange
+                name="(binChange)"
+                tuiDocAPIItem
+                type="string | null"
+            >
+                BIN value (card first 6 symbols)
+            </tr>
+            <tbody
+                #control
+                tuiDocControl
+            ></tbody>
+            <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/input-card/index.ts b/projects/demo/src/modules/components/input-card/index.ts
@@ -1,11 +1,43 @@
 import {Component} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} 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';
 import {TuiDemo} from '@demo/utils';
+import {TuiInputCard} from '@taiga-ui/addon-commerce';
+import {TuiTextfield} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo],
+    imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        TuiDemo,
+        TuiDocControl,
+        TuiDocIcons,
+        TuiDocTextfield,
+        TuiInputCard,
+        TuiTextfield,
+    ],
     templateUrl: './index.html',
     changeDetection,
 })
-export default class Page {}
+export default class Page {
+    protected card = '';
+    protected iconSelected: string | null = null;
+    protected autocomplete = false;
+
+    protected readonly cards: Record<string, string> = {
+        common: 'https://ng-web-apis.github.io/dist/assets/images/common.svg',
+        universal: 'https://ng-web-apis.github.io/dist/assets/images/universal.svg',
+        mutation:
+            'https://ng-web-apis.github.io/dist/assets/images/mutation-observer.svg',
+    };
+
+    protected readonly iconVariants: readonly string[] = Object.keys(this.cards);
+
+    protected get icon(): string | null {
+        return (this.iconSelected && this.cards[this.iconSelected]) || null;
+    }
+}