Updating production for Ignite UI Angular 20.1

en/components/accordion.md

@@ -19,7 +19,7 @@ In it, you can see how to define an `igx-accrodion` and its [expansion panels]({
 
 <code-view style="height:460px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1" alt="Angular Accordion Example">
+           iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1/" alt="Angular Accordion Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -203,7 +203,7 @@ The sample below demonstrates how elaborate filtering options can be implemented
 
 <code-view style="height:550px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-3" alt="Angular Accoridon Example">
+           iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-3/" alt="Angular Accoridon Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -239,7 +239,7 @@ You can see the result below.
 
 <code-view style="height:550px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2" alt="Angular Accordion Example">
+           iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2/" alt="Angular Accordion Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -294,7 +294,7 @@ The last step is to include the component's theme.
 
 <code-view style="height:350px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/layouts/accordion-style" alt="Angular Accordion Style Example">
+           iframe-src="{environment:demosBaseUrl}/layouts/accordion-style/" alt="Angular Accordion Style Example">
 </code-view>
 
 ## API Reference

en/components/action-strip.md

@@ -14,7 +14,7 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai
 
 <code-view style="height: 400px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph" alt="Angular Action Strip Example">
+           iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph/" alt="Angular Action Strip Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -114,7 +114,7 @@ For scenarios where more than three action items will be shown, it is best to us
 
 <code-view style="height: 400px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph-menu" >
+           iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph-menu/" >
 </code-view>
 
 ### Reusing the Action Strip
@@ -153,7 +153,7 @@ This can be utilized via grid action components and we are providing two default
 
 <code-view style="height: 600px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip/" >
 </code-view>
 
 > [!NOTE]
@@ -189,7 +189,7 @@ The last step is to include the newly created component theme in our application
 <code-view style="height: 400px;" 
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/menus/action-strip-styling" >
+           iframe-src="{environment:demosBaseUrl}/menus/action-strip-styling/" >
 </code-view>
 
 ## API and Style References

en/components/angular-reactive-form-validation.md

@@ -113,7 +113,7 @@ So, if you enter values for movie title, full name, phone, and email, they will
 
 <code-view style="height: 850px;"
     data-demos-base-url="{environment:demosBaseUrl}"
-    iframe-src="{environment:demosBaseUrl}/data-entries/reactive-forms"
+    iframe-src="{environment:demosBaseUrl}/data-entries/reactive-forms/"
     alt="Angular Reactive Forms Integration Example">
 </code-view>
 

en/components/autocomplete.md

@@ -18,7 +18,7 @@ The Angular Autocomplete example below generates a dropdown suggestion list as u
 
 <code-view style="height: 400px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/autocomplete" alt="Angular Autocomplete Example">
+           iframe-src="{environment:demosBaseUrl}/data-entries/autocomplete/" alt="Angular Autocomplete Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -216,7 +216,7 @@ If everything went right, you should see this in your browser:
 
 <code-view style="height: 500px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/movie" >
+           iframe-src="{environment:demosBaseUrl}/data-entries/movie/" >
 </code-view>
 
 

en/components/avatar.md

@@ -12,7 +12,7 @@ _keywords: Angular Avatar component, Angular Avatar control, Ignite UI for Angul
 
 <code-view style="height:200px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/layouts/avatar-sample-3" alt="Angular Avatar Example">
+           iframe-src="{environment:demosBaseUrl}/layouts/avatar-sample-3/" alt="Angular Avatar Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -183,7 +183,7 @@ If all went well, you should see something like the following in the browser:
 <code-view style="height:120px" 
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/layouts/avatar-styling" >
+           iframe-src="{environment:demosBaseUrl}/layouts/avatar-styling/" >
 </code-view>
 
 ### Custom sizing

en/components/badge.md

@@ -11,7 +11,7 @@ _keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular
 
 <code-view style="height:100px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-2" alt="Angular Badge Example">
+           iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-2/" alt="Angular Badge Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -153,7 +153,7 @@ Then, just specify the icon name and family as follows:
 
 <code-view style="height: 100px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-display/badge-icon" >
+           iframe-src="{environment:demosBaseUrl}/data-display/badge-icon/" >
 </code-view>
 
 ### Badge in List
@@ -283,7 +283,7 @@ If the sample is configured properly, a list of members should be displayed and
 
 <code-view style="height: 280px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-3" >
+           iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-3/" >
 </code-view>
 
 ## Styling
@@ -317,7 +317,7 @@ To include the new theme we use the `css-vars` mixin:
 <code-view style="height:340px" 
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-display/badge-styling-sample" >
+           iframe-src="{environment:demosBaseUrl}/data-display/badge-styling-sample/" >
 </code-view>
 
 

en/components/banner.md

@@ -10,7 +10,7 @@ _keywords: Angular Banner component, Angular Banner control, Ignite UI for Angul
 
 <code-view style="height: 530px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-1" alt="Angular Banner Example">
+           iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-1/" alt="Angular Banner Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -150,7 +150,7 @@ The `IgxBannerModule` exposes a directive for templating the banner buttons - [`
 
 <code-view style="height: 530px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-2" >
+           iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-2/" >
 </code-view>
 
 
@@ -185,7 +185,7 @@ export class MyBannerComponent {
 
 <code-view style="height: 530px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-3" >
+           iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-3/" >
 </code-view>
 
 
@@ -250,7 +250,7 @@ Finally, we will add a `toast`, displaying a message about the WiFi state. The r
 
 <code-view style="height: 530px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/notifications/banner-advanced-sample" >
+           iframe-src="{environment:demosBaseUrl}/notifications/banner-advanced-sample/" >
 </code-view>
 
 
@@ -285,7 +285,7 @@ The last step is to pass the custom banner theme:
 <code-view style="height: 530px" 
            no-themin
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/notifications/banner-styling" >
+           iframe-src="{environment:demosBaseUrl}/notifications/banner-styling/" >
 </code-view>
 
 

en/components/button-group.md

@@ -12,7 +12,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
 
 <code-view style="height: 85px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-1" alt="Angular Button Group Example">
+           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-1/" alt="Angular Button Group Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -133,7 +133,7 @@ public alignment = ButtonGroupAlignment.vertical;
 
 <code-view style="height: 220px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-2" >
+           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-2/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -150,7 +150,7 @@ The sample below demonstrates the exposed `igx-buttongroup` selection modes:
 
 <code-view style="height: 170px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-4" >
+           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-4/" >
 </code-view>
 
 ### Size
@@ -171,7 +171,7 @@ igx-buttongroup {
 
 <code-view style="height: 80px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-5" >
+           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-5/" >
 </code-view>
 
 ### Custom toggle buttons
@@ -243,7 +243,7 @@ public ngOnInit() {
 
 <code-view style="height: 90px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-3" >
+           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-3/" >
 </code-view>
 
 ## Styling
@@ -278,7 +278,7 @@ The last step is to include the component's theme.
 <code-view style="height: 200px" 
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-style" >
+           iframe-src="{environment:demosBaseUrl}/data-entries/button-group-style/" >
 </code-view>
 
 ## API References

en/components/button.md

@@ -18,7 +18,7 @@ We have created the Angular Button example below to show you how different butto
 
 <code-view style="height: 150px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/data-entries/buttons-sample-1" alt="Angular Button Example">
+           iframe-src="{environment:demosBaseUrl}/data-entries/buttons-sample-1/" alt="Angular Button Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -242,7 +242,7 @@ If all went well, you should see something like the following in the browser:
 
 <code-view style="height: 150px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/data-entries/buttons-display-density" alt="Angular Button Example">
+           iframe-src="{environment:demosBaseUrl}/data-entries/buttons-display-density/" alt="Angular Button Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -323,7 +323,7 @@ For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-t
 <code-view style="height: 100px"
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/data-entries/buttons-style" >
+           iframe-src="{environment:demosBaseUrl}/data-entries/buttons-style/" >
 </code-view>
 
 ### Custom sizing