Merge pull request #221 from IgniteUI/dtsvetkov/fix-samples-attributes

fix(angular): add lob, crm attributes to samples

Author: viktorkombov

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

@@ -6,6 +6,7 @@ license: commercial
 ---
 
 import { Image } from 'astro:assets';
+import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import themingwidget1 from '../../images/general/ThemingWidget1.gif';
 import scrolling from '../../images/general/scrolling.gif';
 
@@ -243,9 +244,8 @@ $my-color-palette: palette(
 
 Since Ignite UI for Angular bases its component designs on the [Material Design Principles](https://material.io/guidelines/material-design/introduction.html "Introduction to Material Design"), we try to get as close as possible to colors, sizes, typography, and the overall look and feel of our components to those created by Google. Example:
 
-<div class="sample-container loading" style="height: 477px">
-    <iframe id="list-sample-4-iframe" src='{environment:crmDemoBaseUrl}/' width="100%" height="100%" seamless="" frameborder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
-</div>
+
+<Sample crm src="" height={477} alt="Angular CRM demo example" iframeOnly fullscreenBtn />
 <p style="margin: 0;padding-top: 0.5rem">Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a class="no-external-icon mchNoDecorate trackCTA" target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/download" data-xd-ga-action="Download" data-xd-ga-label="Ignite UI for Angular">Download it for free.</a></p>
 
 <hr/>
@@ -262,9 +262,7 @@ We want to also to mention our samples browser Theming widget. Now, you can chan
 
 The Ignite Angular UI toolset also includes [data analysis capabilities](/general/data-analysis). We strive to give you all of the business capabilities you will need to deliver great experiences to your customers. So, we now provide directives that will give you a more Excel-like experience. For example, by selecting a portion of data you are now able to click a button and perform a quick data analysis on that subset of your data.
 
-<div class="sample-container loading" style="height: 750px;">
-    <iframe id="grid-dynamic-chart" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis" class="lazyload no-theming"></iframe>
-</div>
+<Sample src="/grid-dynamic-chart-data/data-analysis" height={750} lob iframeOnly fullscreenBtn />
 
 ## Tools for Code Generation and Design
 

docs/angular/src/content/en/components/general/how-to/signal-r-service-live-data.mdx

@@ -43,7 +43,7 @@ It's like a handshake, the Client and Server agree on what to use and they use i
 
 The purpose of this demo is to showcase a financial screen board with a Real-time data stream using [ASP.NET Core SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr).
 
-<Sample src="/grid-finjs-dock-manager/grid-finjs-dock-manager" height={700} alt="Angular Live-data Update Example with a service" />
+<Sample src="/grid-finjs-dock-manager/grid-finjs-dock-manager" height={700} alt="Angular Live-data Update Example with a service" lob />
 
 ## SignalR Server Configuration
 

docs/angular/src/content/en/components/pivotGrid/pivot-grid-custom.mdx

@@ -21,7 +21,7 @@ public pivotConfigHierarchy: IPivotConfiguration = {
 ```
 
 The following example show how to handle scenarios, where the data is already aggregated and how its structure should look like:
-<Sample lob src="/pivot-grid/pivot-grid-noop" height={530} alt="Angular Pivot Grid Custom Predefined Aggregations Example" />
+<Sample src="/pivot-grid/pivot-grid-noop" height={530} alt="Angular Pivot Grid Custom Predefined Aggregations Example" />
 
 Users have the ability to achieve certain scenarios by feeding the pivot grid with already aggregated data.
 There are some requirements on how the data should look like and some specifics regarding hierarchies in the pivot view. For example, to declare hierarchy in `rows` dimension:

docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx

@@ -27,7 +27,7 @@ Some features do not have meaningful behavior in the context of a pivot table an
 
 The Pivot Grid component has additional features and functionalities related to its dimensions as described below.
 
-<Sample lob src="/pivot-grid/pivot-grid-features" height={870} alt="Angular Pivot Grid with Pivot Selector Example" />
+<Sample src="/pivot-grid/pivot-grid-features" height={870} alt="Angular Pivot Grid with Pivot Selector Example" />
 
 ## Dimensions filtering
 
@@ -188,7 +188,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h
 The row summary related options - `horizontalSummary` and  `horizontalSummariesPosition` are applicable only for the `Horizontal` layout mode.
 </DocsAside>
 
-<Sample lob src="/pivot-grid/pivot-grid-layout" height={870} alt="Angular Pivot Grid with Horizontal Row Dimensions Layout" />
+<Sample src="/pivot-grid/pivot-grid-layout" height={870} alt="Angular Pivot Grid with Horizontal Row Dimensions Layout" />
 
 ## Interactions
 

docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx

@@ -26,7 +26,7 @@ The rows and columns represent distinct data groups, and the data cell values re
 
 The following is an Angular Pivot Grid example in combination with the Angular Pivot Data Selector Component. This way you can have more flexible runtime configuration options.
 
-<Sample lob src="/pivot-grid/pivot-grid-datasource" height={870} alt="Angular Pivot Grid with Pivot Selector Example" />
+<Sample src="/pivot-grid/pivot-grid-datasource" height={870} alt="Angular Pivot Grid with Pivot Selector Example" />
 
 ## Getting started with Ignite UI for Angular Pivot Grid
 
@@ -304,7 +304,7 @@ public data = [
 
 Resulting in the following view, which groups the Product Categories unique columns, Sellers Names in unique rows and displays the related aggregations for the number of units in the related cells:
 
-<Sample lob src="/pivot-grid/pivot-grid-basic" height={530} alt="Angular Pivot Grid Basic Example" />
+<Sample src="/pivot-grid/pivot-grid-basic" height={530} alt="Angular Pivot Grid Basic Example" />
 
 And if you want to streamline the entire app development process, you can try out our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) for your next Angular app.
 

docs/angular/src/content/en/grids_templates/live-data.mdx

@@ -34,7 +34,7 @@ The sample below demonstrates the {ComponentTitle} performance when all records
 Feed the same data into the [Line Chart](/charts/types/line-chart) to experience the powerful charting capabilities of Ignite UI for Angular. The `Chart` button will show `Category Prices per Region` data for the selected rows and the `Chart` column button will show the same for the current row.
 <ComponentBlock for="Grid">
 
-<Sample src="/grid-finjs/grid-finjs-sample?theme-switch=false" height={700} alt="Angular Live-data Update Example" />
+<Sample src="/grid-finjs/grid-finjs-sample?theme-switch=false" height={700} alt="Angular Live-data Update Example" lob />
 
 ## Data binding and updates
 
@@ -80,7 +80,7 @@ Updating the view works the same way for columns with a default template and for
 The purpose of this demo is to showcase a financial screen board with Real-time data stream using a [SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr) hub back-end.
 As you can see the igxGrid component handles with ease the high-frequency updates from the server. The code for the ASP.NET Core application using SignalR could be found in this [public GitHub repository](https://github.com/IgniteUI/finjs-web-api).
 
-<Sample src="/grid-finjs-dock-manager/grid-finjs-dock-manager" height={700} alt="Angular Live-data Update Example with a service" />
+<Sample src="/grid-finjs-dock-manager/grid-finjs-dock-manager" height={700} alt="Angular Live-data Update Example with a service" lob />
 
 ### Start the hub connection
 

docs/angular/src/content/en/grids_templates/virtualization.mdx

@@ -28,17 +28,6 @@ _license: commercial
 _canonicalLink: grid/virtualization
 ---
 
-</ComponentBlock>
-<ComponentBlock for="HierarchicalGrid">
-
----
-
-title: Angular Grid Virtualization and Performance - Ignite UI for Angular
-_description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed & performance of the grid when handling large data sets. Try for free!
-_keywords: angular data grid, grid performance, data table virtualization, ignite ui for angular
-_canonicalLink: grid/virtualization
----
-
 </ComponentBlock>
 
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';

docs/angular/src/content/jp/components/general/angular-grid-overview-guide.mdx

@@ -7,6 +7,7 @@ _language: ja
 ---
 
 import { Image } from 'astro:assets';
+import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import themingwidget1 from '../../images/general/ThemingWidget1.gif';
 import scrolling from '../../images/general/scrolling.gif';
 
@@ -242,9 +243,7 @@ $my-color-palette: palette(
 
 Ignite UI for Angular はコンポーネントのデザインを[マテリアル デザイン原則](https://material.io/guidelines/material-design/introduction.html "マテリアル デザインの概要")に基づき、Google によって作成されたコンポーネントの色、サイズ、タイポグラフィ、およびルックアンドフィールにできるだけ近づけるようデザインしています。例:
 
-<div class="sample-container loading" style="height: 477px">
-    <iframe id="list-sample-4-iframe" src='{environment:crmDemoBaseUrl}/' width="100%" height="100%" seamless="" frameborder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
-</div>
+<Sample crm src="" height={477} alt="Angular CRM デモの例" iframeOnly />
 <p style="margin: 0;padding-top: 0.5rem">Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a class="no-external-icon mchNoDecorate trackCTA" target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/download" data-xd-ga-action="Download" data-xd-ga-label="Ignite UI for Angular">Download it for free.</a></p>
 
 <hr/>
@@ -261,9 +260,7 @@ Ignite UI for Angular はコンポーネントのデザインを[マテリアル
 
 Ignite Angular UI ツールセットには[データ分析機能](data-analysis.md)も含まれています。優れたエクスペリエンスを顧客に提供するために必要なすべてのビジネス機能を提供します。そのため、Excel に類似したエクスペリエンスを提供するディレクティブを提供します。たとえば、データの一部を選択することにより、ボタンをクリックし、データのサブセットですばやくデータ分析を実行できるようになりました。
 
-<div class="sample-container loading" style="height: 750px;">
-    <iframe id="grid-dynamic-chart" frameborder="0" seamless="" width="100%" height="100%" data-src="{environment:lobDemosBaseUrl}/grid-dynamic-chart-data/data-analysis" class="lazyload no-theming"></iframe>
-</div>
+<Sample src="/grid-dynamic-chart-data/data-analysis" height={750} lob iframeOnly fullscreenBtn />
 
 ## コード生成とデザインのためのツール
 

docs/angular/src/content/jp/components/general/how-to/signal-r-service-live-data.mdx

@@ -47,7 +47,7 @@ It's like a handshake, the Client and Server agree on what to use and they use i
 
 このデモの目的は、[ASP.NET Core SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr) を使用してリアルタイム データ ストリームを表示する財務用スクリーン ボードを紹介することです。
 
-<Sample src="/grid-finjs-dock-manager/grid-finjs-dock-manager" height={700} alt="サービスを使用した Angular ライブデータ更新の例" />
+<Sample src="/grid-finjs-dock-manager/grid-finjs-dock-manager" height={700} alt="サービスを使用した Angular ライブデータ更新の例" lob />
 
 ## SignalR サーバーの構成
 

docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx

@@ -28,7 +28,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 ピボット グリッド コンポーネントには、以下で説明するように、そのディメンションに関連する追加の機能があります。
 
-<Sample lob src="/pivot-grid/pivot-grid-features" height={870} alt="Angular ピボット セレクターを備えたピボット グリッドの例" />
+<Sample src="/pivot-grid/pivot-grid-features" height={870} alt="Angular ピボット セレクターを備えたピボット グリッドの例" />
 
 ## ディメンション フィルタリング
 
@@ -188,7 +188,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h
 行集計関連のオプション (`horizontalSummary` および `horizontalSummariesPosition`) は、`Horizontal` レイアウト モードにのみ適用されます。
 </DocsAside>
 
-<Sample lob src="/pivot-grid/pivot-grid-layout" height={870} alt="水平行ディメンション レイアウトの Angular ピボット グリッド" />
+<Sample src="/pivot-grid/pivot-grid-layout" height={870} alt="水平行ディメンション レイアウトの Angular ピボット グリッド" />
 
 ## インタラクション