From e76a5cb3c0fab52d290ebaf88fcba149a6ad1020 Mon Sep 17 00:00:00 2001
From: shiv9604 <shivkounsalye@gmail.com>
Date: Sat, 28 Dec 2024 20:06:08 +0530
Subject: [PATCH] chore(demo): migrate avatar docs api

---
 .../src/modules/components/avatar/index.html  | 47 ++++++++++---------
 .../src/modules/components/avatar/index.ts    |  3 +-
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/projects/demo/src/modules/components/avatar/index.html b/projects/demo/src/modules/components/avatar/index.html
index ec4dd62e2f16..4b6aa48a80e7 100644
--- a/projects/demo/src/modules/components/avatar/index.html
+++ b/projects/demo/src/modules/components/avatar/index.html
@@ -21,36 +21,39 @@
                 [src]="src"
             />
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="round"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="round"
+
+        <table tuiDocAPI>
+            <tr
+                name="round"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="round"
             >
                 Use round shape
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="size"
-                documentationPropertyType="TuiSizeS | TuiSizeL"
-                [documentationPropertyValues]="sizes"
-                [(documentationPropertyValue)]="size"
+            </tr>
+
+            <tr
+                name="src"
+                tuiDocAPIItem
+                type="TuiSizeS | TuiSizeL"
+                [items]="sizes"
+                [(value)]="size"
             >
                 Size
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="src"
-                documentationPropertyType="SafeResourceUrl | string | null"
-                [documentationPropertyValues]="srcVariants"
-                [(documentationPropertyValue)]="src"
+            </tr>
+
+            <tr
+                name="size"
+                tuiDocAPIItem
+                type="SafeResourceUrl | string | null"
+                [items]="srcVariants"
+                [(value)]="src"
             >
                 Initials, image URL, or icon name. Alternatively you can pass text as
                 <code>ng-content</code>
                 which would be styled differently from initials and fade if overflown
-            </ng-template>
-        </tui-doc-documentation>
+            </tr>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />
diff --git a/projects/demo/src/modules/components/avatar/index.ts b/projects/demo/src/modules/components/avatar/index.ts
index 79fbe25fe153..5c9b334c6551 100644
--- a/projects/demo/src/modules/components/avatar/index.ts
+++ b/projects/demo/src/modules/components/avatar/index.ts
@@ -3,12 +3,13 @@ import type {SafeResourceUrl} from '@angular/platform-browser';
 import {DomSanitizer} from '@angular/platform-browser';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
+import {TuiDocAPI, TuiDocAPIItem} from '@taiga-ui/addon-doc';
 import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
 import {TuiAvatar} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiAvatar, TuiDemo],
+    imports: [TuiAvatar, TuiDemo, TuiDocAPI, TuiDocAPIItem],
     templateUrl: './index.html',
     changeDetection,
 })