chore(demo): migrate avatar docs api

taiga-family · Dec 28, 2024 · e76a5cb · e76a5cb
1 parent a32d2a4
commit e76a5cb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git 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
@@ -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,
 })