feat(*): adding jQuery samples

docs/jquery/src/content/en/environment.json

@@ -13,7 +13,8 @@
         "jQueryApiUrl": "https://www.igniteui.com/help/api/2025.1",
         "DesignerUrl": "TODO_DESIGNER_URL",
         "InstallPath": "%%InstallPath%%",
-        "InstallPathMVC": "%%InstallPathMVC%%"
+        "InstallPathMVC": "%%InstallPathMVC%%",
+        "demosBaseUrl": "https://igniteui.github.io/help-samples/25.1/EN/"
     },
     "staging": {
         "ProductName": "Ignite UI for jQuery",
@@ -29,7 +30,8 @@
         "jQueryApiUrl": "https://www.igniteui.com/help/api/2025.1",
         "DesignerUrl": "TODO_DESIGNER_URL",
         "InstallPath": "%%InstallPath%%",
-        "InstallPathMVC": "%%InstallPathMVC%%"
+        "InstallPathMVC": "%%InstallPathMVC%%",
+        "demosBaseUrl": "https://igniteui.github.io/help-samples/25.1/EN/"
     },
     "production": {
         "ProductName": "Ignite UI for jQuery",
@@ -45,6 +47,7 @@
         "jQueryApiUrl": "https://www.igniteui.com/help/api/2025.1",
         "DesignerUrl": "TODO_DESIGNER_URL",
         "InstallPath": "%%InstallPath%%",
-        "InstallPathMVC": "%%InstallPathMVC%%"
+        "InstallPathMVC": "%%InstallPathMVC%%",
+        "demosBaseUrl": "https://igniteui.github.io/help-samples/25.1/EN/"
     }
 }

docs/jquery/src/content/en/topics/angularjs-directives/angularjs-samples.mdx

@@ -3,6 +3,8 @@ title: "AngularJS Samples"
 slug: angularjs-samples
 ---
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # AngularJS Samples
 
 ## Topic Overview
@@ -49,9 +51,7 @@ This sample will demonstrate how we can use `igGrid` with AngularJS.
 #### <a id="grid_sample_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/grid/angular](&#123;environment:SamplesEmbedUrl&#125;/grid/angular)
-</div>
+<Sample src="/grid/angular/index.html" height={428} alt="Grid Angular"/>
 
 #### <a id="grid_sample_details"></a>Details
 This sample demonstrates how AngularJS directives are used with the igGrid when `Updating`, `Paging` and `Sorting` features are activated.
@@ -62,9 +62,7 @@ This sample will demonstrate how we can use `igEditors` with AngularJS.
 #### <a id="editors_sample_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/editors/angular](&#123;environment:SamplesEmbedUrl&#125;/editors/angular)
-</div>
+<Sample src="/editors/angular/index.html" height={428} alt="Editors Angular"/>
 
 #### <a id="editors_sample_details"></a>Details
 This sample demonstrates how to create a number of different editors using AngularJS directives.
@@ -75,9 +73,7 @@ This sample will demonstrate how we can use `igTileManager` with AngularJS.
 #### <a id="tile_manager_sample_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/tile-manager/angular](&#123;environment:SamplesEmbedUrl&#125;/tile-manager/angular)
-</div>
+<Sample src="/tile-manager/angular/index.html" height={428} alt="Tile Manager Angular"/>
 
 #### <a id="tile_manager_sample_details"></a>Details
 In this sample we use the `igTileManager` AngularJS directive. Firstly we introduce a `data` variable in our controller which holds the data source. Then we declare an `igTileManager` AngularJS directive and bind it to the `data` variable.
@@ -88,9 +84,7 @@ This sample will demonstrate how we can use `igDialog` with AngularJS.
 #### <a id="dialog_window_sample_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/dialog-window/angular](&#123;environment:SamplesEmbedUrl&#125;/dialog-window/angular)
-</div>
+<Sample src="/dialog-window/angular/index.html" height={428} alt="Dialog Window Angular"/>
 
 #### <a id="dialog_window_sample_details"></a>Details
 In this sample we use the `igDialog` AngularJS directive. The Dialog Window is initialized with `headerText` and `height` options set.
@@ -101,9 +95,7 @@ This sample will demonstrate how we can use `igTree` with AngularJS.
 #### <a id="tree_sample_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/tree-control/angular](&#123;environment:SamplesEmbedUrl&#125;/tree-control/angular)
-</div>
+<Sample src="/tree-control/angular/index.html" height={428} alt="Tree Control Angular"/>
 
 #### <a id="tree_sample_details"></a>Details
 In this sample we use the `igTree` AngularJS directive. Firstly we introduce a `data` variable in our controller which holds the data source. Then we declare an `igTree` AngularJS directive and bind it to the `data` variable.
@@ -114,9 +106,7 @@ This sample will demonstrate how we can use `igMap` with AngularJS.
 #### <a id="map_sample_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/map/angular](&#123;environment:SamplesEmbedUrl&#125;/map/angular)
-</div>
+<Sample src="/map/angular/index.html" height={428} alt="Map Angular"/>
 
 #### <a id="map_sample_details"></a>Details
 In the sample above we show how a zoomable map can be initialized using an AngularJS directive.
@@ -127,9 +117,7 @@ This sample demonstrates how `AngularJS` directives are used to instantiate `igL
 #### <a id="lm_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/layout-manager/angular](&#123;environment:SamplesEmbedUrl&#125;/layout-manager/angular)
-</div>
+<Sample src="/layout-manager/angular/index.html" height={428} alt="Layout Manager Angular"/>
 
 #### <a id="lm_details"></a>Details
 In this sample we use the `igLayoutManager` AngularJS directive.
@@ -140,9 +128,7 @@ This sample demonstrates how `AngularJS` directives are used to instantiate `igD
 #### <a id="dchart_preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/data-chart/angular](&#123;environment:SamplesEmbedUrl&#125;/data-chart/angular)
-</div>
+<Sample src="/data-chart/angular/index.html" height={428} alt="Data Chart Angular"/>
 
 #### <a id="dchart_details"></a>Details
 This sample demonstrates how to link together the Data Chart and Zoombar Controls using AngularJS directives.

docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-tooltips.mdx

@@ -4,6 +4,8 @@ slug: igbulletgraph-configuring-the-tooltips
 ---
 import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # Configuring the Tooltips (igBulletGraph)
 
 ## Topic Overview
@@ -371,9 +373,7 @@ While the first `igBulletGraph` used for visualizing the Development Task and ha
 
 In the sample's context, even though these tasks are executed simultaneously at the course of three weeks, initially more time has been spent on development. This is demonstrated by the progress bars’ placement amongst the three different ranges (“Low, “Medium” and “High”), that represent the level of confidence for delivering the needed results.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/bullet-graph/tooltip-settings](&#123;environment:SamplesEmbedUrl&#125;/bullet-graph/tooltip-settings)
-</div>
+<Sample src="/bullet-graph/tooltip-settings/index.html" height={428} alt="Bullet Graph Tooltip Settings"/>
 
 ## <a id="related-content"></a> Related Content
 

docs/jquery/src/content/en/topics/controls/igcombo/binding/data-binding.mdx

@@ -3,6 +3,8 @@ title: "Binding igCombo to Data Overview"
 slug: igcombo-data-binding
 ---
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # Binding igCombo to Data Overview
 
 
@@ -271,24 +273,18 @@ Online Combo binding examples
 ### <a id="json-binding"></a>JSON Binding
 The combo easily binds to a JavaScript array or JSON data. This sample contains a basic example of client-side binding.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/combo/json-binding](&#123;environment:SamplesEmbedUrl&#125;/combo/json-binding)
-</div>
+<Sample src="/combo/json-binding/index.html" height={428} alt="Combo Json Binding"/>
 
 ### <a id="html-binding"></a>HTML Binding
 
 igCombo can bind directly to an HTML SELECT element.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/combo/html-binding](&#123;environment:SamplesEmbedUrl&#125;/combo/html-binding)
-</div>
+<Sample src="/combo/html-binding/index.html" height={428} alt="Combo Html Binding"/>
 
 ### <a id="xml-binding"></a>XML Binding
 igCombo supports binding to XML data. This sample shows a basic example of binding to an XML string.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/combo/xml-binding](&#123;environment:SamplesEmbedUrl&#125;/combo/xml-binding)
-</div>
+<Sample src="/combo/xml-binding/index.html" height={428} alt="Combo Xml Binding"/>
 
 ## <a id="related-topics"></a>Related Topics
 

docs/jquery/src/content/en/topics/controls/igcombo/configuring/angularjs-support.mdx

@@ -3,6 +3,8 @@ title: "AngularJS Support (igCombo)"
 slug: igcombo-angularjs-support
 ---
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # AngularJS Support (igCombo)
 
 ## Topic Overview
@@ -20,9 +22,7 @@ This topic contains the following sections:
 ### <a id="Preview"></a>Preview
 The following is a preview of the final result.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/combo/angular](&#123;environment:SamplesEmbedUrl&#125;/combo/angular)
-</div>
+<Sample src="/combo/angular/index.html" height={428} alt="Combo Angular"/>
 
 ### <a id="Requirements"></a>Requirements
 In order to run this sample, you need to have:

docs/jquery/src/content/en/topics/controls/igcombo/configuring/knockoutjs-support.mdx

@@ -4,6 +4,8 @@ slug: igcombo-knockoutjs-support
 ---
 import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # Configuring Knockout Support (igCombo)
 
 
@@ -217,9 +219,7 @@ The following samples provide additional information related to this topic.
 
 -	The sample below demonstrates how to bind igCombo to data managed by KO data bindings. Binding an array to combo's drop-down and model property to the combo selected items is implemented.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/combo/bind-combo-with-ko](&#123;environment:SamplesEmbedUrl&#125;/combo/bind-combo-with-ko)
-</div>
+<Sample src="/combo/bind-combo-with-ko/index.html" height={428} alt="Combo Bind Combo With Ko"/>
 
 >**Note:**  The Knockout extensions do not work with the &#123;environment:ProductNameMVC&#125;.
 

docs/jquery/src/content/en/topics/controls/igcombo/getting-started.mdx

@@ -6,38 +6,38 @@ slug: igcombo-getting-started
 # Adding igCombo
 
 
-##Topic Overview
+## Topic Overview
 
 
-###Purpose
+### Purpose
 
 
 The `igCombo`™ can be configured to run using jQuery or ASP.NET MVC. This help topic demonstrates how to setup a basic `igCombo` control in each of these environments binding to JSON data on the client and a collection of business object on the server.
 
-###Required background
+### Required background
 
 
 You need to first read the following topics:
 
 -   [Using JavaScript Resources in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-resources.mdx)
 -   [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx)
 
-##Create a basic igCombo implementation
+## Create a basic igCombo implementation
 
 
-###Introduction
+### Introduction
 
 
 The following steps demonstrate how to configure basic options and bind to data using both jQuery and ASP.NET MVC.
 
-###Preview
+### Preview
 
 
 Following is a preview of the final result.
 
 ![](images/igCombo_Auto_Complete.png)
 
-###Requirements
+### Requirements
 
 To complete the procedure, you need the following:
 
@@ -46,7 +46,7 @@ To complete the procedure, you need the following:
 -   References to the required JavaScript files and CSS files on your web page
 -   (ASP.NET MVC) A reference to the `Infragistics.Web.Mvc.dll` assembly
 
-###Overview
+### Overview
 
 
 Following is a conceptual overview of the process:
@@ -56,7 +56,7 @@ Following is a conceptual overview of the process:
 3.  (Optional) Configuring the width
 4.  (Optional) Enabling auto-complete
 
-###Steps
+### Steps
 
 1. **Instantiate the `igCombo`.**
 
@@ -205,10 +205,10 @@ Following is a conceptual overview of the process:
     AutoComplete(true)
 ```
 
-##Code Examples
+## Code Examples
 
 
-###Examples overview
+### Examples overview
 
 
 The following table lists the code examples provided below.
@@ -221,7 +221,7 @@ The following table lists the code examples provided below.
 | Basic ASP.NET MVC Implementation | Shows how to bind to data and set basic options using the {environment:ProductNameMVC} |
 
 
-###Code Example: Basic jQuery implementation
+### Code Example: Basic jQuery implementation
 
 The code below demonstrates how to create and configure the `igCombo` control using jQuery with the following parameters:
 
@@ -259,7 +259,7 @@ The code below demonstrates how to create and configure the `igCombo` control us
 </script>
 ```
 
-###Code Example: Basic ASP.NET MVC implementation
+### Code Example: Basic ASP.NET MVC implementation
 
 
 The code below demonstrates how to create and configure the &#123;environment:ProductNameMVC&#125; `Combo` control with the following parameters:
@@ -306,7 +306,7 @@ public class DefaultController : Controller{
  }}
 ```
 
-##Related Topics
+## Related Topics
 
 
 Following are some other topics you may find useful.

docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/motion-framework.mdx

@@ -4,6 +4,8 @@ slug: igdatachart-motion-framework
 ---
 import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # Infragistics Motion Framework for Charts Overview (igDataChart)
 
 
@@ -61,9 +63,7 @@ A catalog of the Infragistics Motion Network supported configurable chart animat
 
 The following sample demonstrates how to use the Motion Framework™ with igDataChart to build highly engaging visualizations and provide smooth playback of changes in data over time.
 
-<div class="embed-sample">
-   [Motion Framework](&#123;environment:SamplesEmbedUrl&#125;/data-chart/motion-framework)
-</div>
+<Sample src="/data-chart/motion-framework/index.html" height={428} alt="Motion Framework"/>
 
 
 ##Related Content

docs/jquery/src/content/en/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx

@@ -3,6 +3,8 @@ title: "Transitions In Animations"
 slug: igchart-transitions-in-animations
 ---
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # Transitions In Animations
 
 
@@ -118,9 +120,7 @@ The transition type is configured by setting the `transitionInMode` property to
 
 The following example demonstrates how to enable and change transition in animations for the financial chart:
 
-<div class="embed-sample">
-   [Transition Animation (Financial)](&#123;environment:SamplesEmbedUrl&#125;/data-chart/transition-animation-financial)
-</div>
+<Sample src="/data-chart/transition-animation-financial/index.html" height={428} alt="Transition Animation (Financial)"/>
 
 ##<a id="related-content"></a>Related Content
 

docs/jquery/src/content/en/topics/controls/igdatachart/configuring/knockoutjs-support.mdx

@@ -4,6 +4,8 @@ slug: igdatachart-knockoutjs-support
 ---
 import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
 
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
 # Configuring Knockout Support (igDataChart)
 
 
@@ -161,9 +163,7 @@ This example demonstrates the igDataChart control reacting to changes in the dat
 
 >**Note:** The Knockout extensions do not work with the {environment:ProductNameMVC}.
 
-<div class="embed-sample">
-   [&#123;environment:SamplesEmbedUrl&#125;/data-chart/edit-chart-items-with-knockout](&#123;environment:SamplesEmbedUrl&#125;/data-chart/edit-chart-items-with-knockout)
-</div>
+<Sample src="/data-chart/edit-chart-items-with-knockout/index.html" height={428} alt="Data Chart Edit Chart Items With Knockout"/>
 
 ##Related Content