feat(chat/grid-lite): adding api links

docs/angular/src/content/en/components/chat.mdx

@@ -25,7 +25,7 @@ To get started, install Ignite UI for Angular package as well as the Ignite UI f
 npm install igniteui-angular igniteui-webcomponents
 ```
 
-`IgxChatComponent` provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI.
+<ApiLink type="Chat" /> provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI.
 
 For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
 
@@ -85,8 +85,8 @@ The Chat component exposes several key properties that let you control its state
 | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `messages`        | Array of messages (`IgcChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown.                                                  |
 | `draftMessage`    | The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts.            |
-| `options`         | Chat configuration (`IgxChatOptions`) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. |
-| `templates` | Custom Angular templates (`IgxChatTemplates`) for message content, input, attachments, and other parts of the chat UI.                                   |
+| `options`         | Chat configuration (<ApiLink type="ChatOptions" kind="type" suffix={false} />) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. |
+| `templates` | Custom Angular templates (<ApiLink type="ChatTemplates" kind="type" suffix={false} />) for message content, input, attachments, and other parts of the chat UI.                                   |
 
 These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend.
 
@@ -168,7 +168,7 @@ This level of granularity means you can tweak just one part (for example, how at
 
 Here:
 - `let-message` exposes the message object.
-- The `igxChatMessageContext` directive ensures proper typing for message templates.
+- The <ApiLink type="ChatMessageContextDirective" suffix={false} label="igxChatMessageContext" /> directive ensures proper typing for message templates.
 
 #### Custom Input Area
 By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button:
@@ -435,12 +435,12 @@ Finally, **include** the custom theme in your application:
 
 ## API Reference
 
-- `IgxChatComponent`
-- `IgxChatOptions`
-- `IgxChatTemplates`
-- `IgxChatMessageContextDirective`
-- `IgxChatInputContextDirective`
-- `IgxChatAttachmentContextDirective`
+- <ApiLink type="Chat" />
+- <ApiLink type="ChatOptions" kind="type" suffix={false} />
+- <ApiLink type="ChatTemplates" kind="type" suffix={false} />
+- <ApiLink type="ChatMessageContextDirective" suffix={false} />
+- <ApiLink type="ChatInputContextDirective" suffix={false} />
+- <ApiLink type="ChatAttachmentContextDirective" suffix={false} />
 - [`Styling & Themes`](/themes)
 
 ## Additional Resources

docs/angular/src/content/en/components/grid-lite/binding.mdx

@@ -9,6 +9,7 @@ namespace: Infragistics.Controls
 
 import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Angular Grid Lite Data Binding
@@ -56,19 +57,17 @@ Or just set the respective properties in the html instead of using a `@ViewChild
 <DocsAside type="info">
 The sort/filter states of the Grid Lite component are kept when changing the data source in this manner.
 </DocsAside>
-Usually you will want to reset them by calling either **`clearSort()`** and/or **`clearFilter()`**.
+Usually you will want to reset them by calling either <ApiLink type="GridLite" member="clearSort" label="clearSort()" /> and/or <ApiLink type="GridLite" member="clearFilter" label="clearFilter()" />.
 
 In the sample below, the grid has column auto-generation enabled. When you click on the switch data button,
 the column collection is reset, and a new data source is bound to the grid.
 
 <Sample src="/grid-lite/data-binding-dynamic" height={510} alt="Angular Grid Lite Data Binding Example" />
 
-{/* TODO ## API References
+## API References
 
-* `{ComponentName}`
-* `Column`
-
-*/}
+- <ApiLink type="GridLite" />
+- <ApiLink type="GridLiteColumn" />
 
 ## Additional Resources
 

docs/angular/src/content/en/components/grid-lite/cell-template.mdx

@@ -9,6 +9,7 @@ namespace: Infragistics.Controls
 
 import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Column Cell Template
@@ -26,7 +27,7 @@ To achieve that, use **`<ng-template>`** inside `<igx-grid-lite-column>...</igx-
 </igx-grid-lite-column>
 ```
 
-You also need to import **`IgxGridLiteCellTemplateDirective`**
+You also need to import <ApiLink type="GridLiteCellTemplateDirective" suffix={false} />
 
 ```typescript
 import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';
@@ -117,7 +118,7 @@ Keep in mind the more complex and involved the template is, the greater the perf
 
 ## Cell Context Object
 
-The custom cell renderer is passed an **`GridLiteCellContext`** object as a parameter with the following props:
+The custom cell renderer is passed an <ApiLink type="GridLiteCellTemplateContext" kind="type" suffix={false} /> object as a parameter with the following props:
 
 
 ```typescript
@@ -148,12 +149,11 @@ export interface IgxGridLiteCellTemplateContext<T extends object> {
 
 <Sample src="/grid-lite/column-config-simple" height={510} alt="Angular Grid Lite Column Config Basic" />
 
-{/* TODO ## API References
+## API References
 
-* `{ComponentName}`
-* `Column`
-
-*/}
+- <ApiLink type="GridLite" />
+- <ApiLink type="GridLiteColumn" />
+- <ApiLink type="GridLiteCellTemplateDirective" suffix={false} />
 
 ## Additional Resources
 

docs/angular/src/content/en/components/grid-lite/column-configuration.mdx

@@ -9,6 +9,7 @@ namespace: Infragistics.Controls
 
 import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Column Configuration
@@ -101,12 +102,10 @@ In the sample below you can try out the different column properties and how they
 
 <Sample src="/grid-lite/column-config-dynamic" height={510} alt="Angular Grid Lite Column Config Dynamic" />
 
-{/* TODO ## API References
+## API References
 
-* `{ComponentName}`
-* `Column`
-
-*/}
+- <ApiLink type="GridLite" />
+- <ApiLink type="GridLiteColumn" />
 
 ## Additional Resources
 

docs/angular/src/content/en/components/grid-lite/filtering.mdx

@@ -8,6 +8,7 @@ namespace: Infragistics.Controls
 ---
 
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Angular Grid Lite Filter Operations
@@ -42,7 +43,7 @@ column.filteringCaseSensitive = true;
 
 ## Filter Model
 
-The building blocks for filter operations in the grid is the **`FilterExpression`** which has the following structure:
+The building blocks for filter operations in the grid is the <ApiLink type="GridLiteFilteringExpression" kind="type" suffix={false} /> which has the following structure:
 
 ```typescript
 export interface FilterExpression<T, K extends Keys<T> = Keys<T>> {
@@ -79,7 +80,7 @@ export interface FilterExpression<T, K extends Keys<T> = Keys<T>> {
 
 ## Filter API
 
-The Grid Lite exposes two main approaches for applying filter operations from its API. Either through the **`GridLite.filter()`**/**`GridLite.clearFilter()`** methods or through the **`Grid.Lite.filterExpressions`** property.
+The Grid Lite exposes two main approaches for applying filter operations from its API. Either through the <ApiLink type="GridLite" member="filter" label="filter()" />/<ApiLink type="GridLite" member="clearFilter" label="clearFilter()" /> methods or through the <ApiLink type="GridLite" member="filterExpressions" /> property.
 
 The **`filter()`** method accepts either a single expression or an array of filter expression and then filters the grid data
 based on those expressions.
@@ -107,7 +108,7 @@ grid.clearFilter();
 
 ## Initial Filter State
 
-The **`filterExpressions`** property is very similar in behavior to the **`filter()`** method call. It exposes a declarative way to control filter state in the grid, but the most useful property is the ability to set initial filter state when the Grid Lite component is first rendered.
+The <ApiLink type="GridLite" member="filterExpressions" label="filterExpressions" /> property is very similar in behavior to the **`filter()`** method call. It exposes a declarative way to control filter state in the grid, but the most useful property is the ability to set initial filter state when the Grid Lite component is first rendered.
 
 For example here is a Lit-based sample:
 
@@ -155,7 +156,7 @@ onFiltered(event: IgxFilteredEvent) { ... }
 In cases where filtering must be done remotely or you want to save the current state/data to a server somewhere,
 the Grid Lite exposes a hook where you can implement and customize this behavior.
 
-Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a **`DataPipelineParams`** object.
+Using the <ApiLink type="GridLite" member="dataPipelineConfiguration" label="dataPipelineConfiguration" /> property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a **`DataPipelineParams`** object.
 
 ```typescript
 export type DataPipelineParams<T extends object> = {
@@ -184,11 +185,11 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 
 <Sample src="/grid-lite/filtering-pipeline" height={510} alt="Angular Grid Lite Filtering Config Remote" />
 
-{/* TODO ## API References
 ## API References
-* `{ComponentName}`
-* `Column`
-*/}
+
+- <ApiLink type="GridLite" />
+- <ApiLink type="GridLiteColumn" />
+
 ## Additional Resources
 
 - [Column Configuration](/grid-lite/column-configuration)

docs/angular/src/content/en/components/grid-lite/header-template.mdx

@@ -9,6 +9,7 @@ namespace: Infragistics.Controls
 
 import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Customizing the Column Header
@@ -62,12 +63,11 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla
 
 <Sample src="/grid-lite/column-config-headers" height={510} alt="Angular Grid Lite Column Config Headers" />
 
-{/* TODO ## API References
+## API References
 
-* `{ComponentName}`
-* `Column`
-
-*/}
+- <ApiLink type="GridLite" />
+- <ApiLink type="GridLiteColumn" />
+- <ApiLink type="GridLiteHeaderTemplateDirective" suffix={false} />
 
 ## Additional Resources
 

docs/angular/src/content/en/components/grid-lite/overview.mdx

@@ -8,6 +8,7 @@ namespace: Infragistics.Controls
 ---
 
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Free & Open-Source Angular Data Grid (Grid Lite)
@@ -27,7 +28,7 @@ Angular <a href="https://custom-elements-everywhere.com/#angular" target="_blank
 <Sample src="/grid-lite/overview" height={510} alt="Angular Grid Lite App Sample Main" />
 
 ## Installation and Setup
-To use Grid Lite in your application you can import it directly from `igniteui-angular` through this entry point `igniteui-angular/grids/lite`. But you also need to install the `igniteui-grid-lite` package that powers the UI. IgxGridLiteComponent provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by `igniteui-grid-lite`. Installing both ensures the grid lite behaves natively in Angular while leveraging the full `igniteui-grid-lite` UI.
+To use Grid Lite in your application you can import it directly from `igniteui-angular` through this entry point `igniteui-angular/grids/lite`. But you also need to install the `igniteui-grid-lite` package that powers the UI. <ApiLink type="GridLite" /> provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by `igniteui-grid-lite`. Installing both ensures the grid lite behaves natively in Angular while leveraging the full `igniteui-grid-lite` UI.
 
 ```shell
 npm install igniteui-grid-lite

docs/angular/src/content/en/components/grid-lite/sorting.mdx

@@ -9,6 +9,7 @@ namespace: Infragistics.Controls
 
 import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Sort Operations
@@ -184,7 +185,7 @@ In the following sample, when you try to sort the **Name** and **Rating** column
 
 In cases where sorting must be done remotely or you want to save the current state/data to a server somewhere, the Grid Lite exposes a hook where you can implement and customize this behavior.
 
-Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a **`DataPipelineParams`** object.
+Using the <ApiLink type="GridLite" member="dataPipelineConfiguration" label="dataPipelineConfiguration" /> property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a **`DataPipelineParams`** object.
 
 ```typescript
 export type DataPipelineParams<T extends object> = {
@@ -213,12 +214,10 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 
 <Sample src="/grid-lite/sorting-pipeline" height={510} alt="Angular Grid Lite Sorting Config Pipeline" />
 
-{/* TODO ## API References
+## API References
 
-* `{ComponentName}`
-* `Column`
-
-*/}
+- <ApiLink type="GridLite" />
+- <ApiLink type="GridLiteColumn" />
 
 ## Additional Resources
 

docs/angular/src/content/en/components/grid-lite/theming.mdx

@@ -8,6 +8,7 @@ namespace: Infragistics.Controls
 ---
 
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Styles and Themes
@@ -87,11 +88,10 @@ Here is an example showcasing the custom theming from above.
 
 <Sample src="/grid-lite/styling-custom" height={510} alt="Angular Grid Lite Styling Custom Theme" />
 
-{/* TODO ## API References
+## API References
 
-* `{ComponentName}`
-* `Column`
-*/}
+- <ApiLink type="GridLite" />
+- <ApiLink type="GridLiteColumn" />
 
 ## Additional Resources
 

docs/angular/src/content/jp/components/chat.mdx

@@ -26,7 +26,7 @@ Chat コンポーネントは静的なメッセージ リストではなく、**
 npm install igniteui-angular igniteui-webcomponents
 ```
 
-`IgxChatComponent` は Angular のバインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なチャット UI は Web Components によってレンダリングされます。両方をインストールすることで、Angular でネイティブに動作するチャットを実現しつつ、Web Components の完全な UI を活用できます。
+<ApiLink type="Chat" /> は Angular のバインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なチャット UI は Web Components によってレンダリングされます。両方をインストールすることで、Angular でネイティブに動作するチャットを実現しつつ、Web Components の完全な UI を活用できます。
 
 Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。
 
@@ -86,8 +86,8 @@ Chat コンポーネントは、その状態と構成を制御できるいくつ
 | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `messages`        | チャットに表示されるメッセージ (`IgcChatMessage[]`) の配列。表示するメッセージを制御するためにバインド可能。                                                  |
 | `draftMessage`    | 未送信メッセージ。`text` とオプションの `attachments` を含むオブジェクト。メッセージ下書きの保存や復元に便利。            |
-| `options`         | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 (`IgxChatOptions`)。  |
-| `templates` | メッセージ コンテンツ、入力、添付ファイル、その他のチャット UI 部分に対して、カスタム Angular テンプレート(`IgxChatTemplates`)。                                    |
+| `options`         | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 (<ApiLink type="ChatOptions" kind="type" suffix={false} />)。  |
+| `templates` | メッセージ コンテンツ、入力、添付ファイル、その他のチャット UI 部分に対して、カスタム Angular テンプレート(<ApiLink type="ChatTemplates" kind="type" suffix={false} />)。                                    |
 
 上記のプロパティを使用することで、Chat の UI をアプリケーションの状態やバックエンドと簡単に同期させることができます。
 
@@ -167,7 +167,7 @@ Chat のカスタマイズ可能な部分は次の通りです:
 
 上記の例では:
 - `let-message` はメッセージ オブジェクトを公開します。
-- `igxChatMessageContext` ディレクティブは、メッセージ テンプレートの適切な入力を保証します。
+- <ApiLink type="ChatMessageContextDirective" suffix={false} label="igxChatMessageContext" /> ディレクティブは、メッセージ テンプレートの適切な入力を保証します。
 
 #### 入力領域のカスタマイズ
 デフォルトでは、チャット入力はテキスト領域です。音声入力ボタンなど、より適した体験を提供するためにオーバーライドできます。
@@ -401,12 +401,12 @@ Chat コンポーネントのオプションには、高度なスタイル設定
 
 ## API リファレンス
 
-- `IgxChatComponent`
-- `IgxChatOptions`
-- `IgxChatTemplates`
-- `IgxChatMessageContextDirective`
-- `IgxChatInputContextDirective`
-- `IgxChatAttachmentContextDirective`
+- <ApiLink type="Chat" />
+- <ApiLink type="ChatOptions" kind="type" suffix={false} />
+- <ApiLink type="ChatTemplates" kind="type" suffix={false} />
+- <ApiLink type="ChatMessageContextDirective" suffix={false} />
+- <ApiLink type="ChatInputContextDirective" suffix={false} />
+- <ApiLink type="ChatAttachmentContextDirective" suffix={false} />
 - [スタイル設定およびテーマ](./themes/index.md)
 
 ## その他のリソース