chore(demo): InputCard add API page

projects/addon-doc/components/api/api-item.component.ts

@@ -7,13 +7,15 @@ import {
     inject,
     Input,
     Output,
+    signal,
 } from '@angular/core';
 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';
@@ -48,13 +50,15 @@ const SERIALIZED_SUFFIX = '$';
     ],
     templateUrl: './api-item.template.html',
     styleUrls: ['./api-item.style.less'],
+    exportAs: 'docAPIItem',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiDocAPIItem<T> implements OnInit {
     private readonly locationRef = inject(Location);
     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 = '';
@@ -71,6 +75,8 @@ export class TuiDocAPIItem<T> implements OnInit {
     @Output()
     public readonly valueChange = new EventEmitter<T>();
 
+    public readonly emits = signal(1);
+
     public ngOnInit(): void {
         this.parseParams(this.activatedRoute.snapshot.queryParams);
     }
@@ -81,6 +87,18 @@ export class TuiDocAPIItem<T> implements OnInit {
         this.setQueryParam(value);
     }
 
+    public emitEvent(event: unknown): void {
+        this.emits.update((x) => ++x);
+
+        let content: string | undefined;
+
+        if (event !== undefined) {
+            content = tuiInspectAny(event, 2);
+        }
+
+        this.alerts.open(content, {label: this.name}).subscribe();
+    }
+
     private clearBrackets(value: string): string {
         return value.replaceAll(/[()[\]]/g, '');
     }

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)="docAPIItemBinChange.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
+                #docAPIItemBinChange="docAPIItem"
+                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>

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;
+    }
+}